/* Loop Doodle. MIT licence. Fonts are self-hosted (SIL OFL 1.1, see fonts/). */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(fonts/unbounded-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(fonts/unbounded-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
/* Layout: two views in one page. Landing = loud sticker-sheet scroll with live pads; app = one-screen groovebox (pad left, deck right, stacked on phones). */
:root {
  color-scheme: dark;
  --bg: #0f0c1d;
  --panel: #181431;
  --panel-2: #231d45;
  --line: #342c61;
  --fg: #f3efff;
  --muted: #9d94c9;
  --ink: #120d22;
  --accent: #a8ff3e;
  --accent-deep: #4c8a10;
  --on-accent: #0f1f06;
  --keys: #ffd84d;
  --bass: #ff4d7a;
  --lead: #3df2c5;
  --pad: #9d87ff;
  --bells: #4dbdff;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(900px 500px at 12% -10%, #2a1f5c 0%, transparent 60%),
    radial-gradient(700px 500px at 110% 110%, #3a1638 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 14px;
  padding-block: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color: transparent;
}
body.land, body.legal { height: auto; min-height: 100%; }
body:not(.play) .app, body:not(.land) .landing, body:not(.legal) .legalv { display: none; }

/* legal view */
.legalv { max-width: 720px; margin-inline: auto; padding-bottom: 48px; }
.legalv .nav { margin-bottom: 36px; }
.legalv .langs { display: flex; gap: 8px; margin-bottom: 26px; }
.legalv h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 6vw, 42px); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 8px; }
.legalv h2 { font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; margin: 34px 0 10px; color: var(--accent); }
.legalv h3 { font-size: 16px; margin: 20px 0 6px; }
.legalv p, .legalv li { font-size: 16px; line-height: 1.6; color: #d9d3f2; margin: 0 0 12px; }
.legalv ul { padding-left: 20px; margin: 0 0 12px; }
.legalv .when { color: var(--muted); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; }
.legalv .short { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 18px 0 0; }
.legalv .short p { margin: 0; color: var(--fg); }
.legalv .sel { user-select: all; font-family: var(--f-mono); font-size: 14.5px; color: var(--fg); overflow-wrap: anywhere; }
.flinks { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; color: var(--muted); font-size: 13px; }
.flinks a { text-underline-offset: 3px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* shared bits */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.brand svg { flex: none; }
.brand b { font-family: var(--f-display); font-weight: 800; font-size: clamp(17px, 4.6vw, 24px); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.brand b span { color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); padding: 15px 26px;
  font-family: var(--f-display); font-weight: 800; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 5px 0 var(--accent-deep); transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-deep); }
.btn.sm { padding: 10px 16px; font-size: 11.5px; box-shadow: 0 4px 0 var(--accent-deep); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:active { transform: none; box-shadow: inset 0 0 0 2px var(--fg); }
.btn.white { background: var(--fg); color: var(--bg); box-shadow: 0 4px 0 #6f66a8; }
.btn.white[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-deep); }
.ico { width: 12px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }
[aria-pressed="true"] > .ico { clip-path: none; border-radius: 2px; }
.dot { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid transparent; opacity: .5; padding: 0; flex: none; transition: opacity .12s, transform .08s; }
.dot[aria-pressed="true"] { opacity: 1; border-color: var(--fg); box-shadow: 0 0 14px var(--c); transform: scale(1.08); }

/* ================= landing ================= */
.landing { max-width: 1180px; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(64px, 10vw, 120px); overflow-x: clip; padding-bottom: 36px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero { display: grid; gap: 36px; align-items: center; margin-top: calc(clamp(64px, 10vw, 120px) * -1 + 28px); }
.tag { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: var(--bass); color: var(--ink); padding: 6px 10px; border-radius: 6px; transform: rotate(-2deg); font-weight: 700; }
.mega { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 11.5vw, 76px); line-height: .98; letter-spacing: -0.035em; margin: 18px 0 20px; }
.mega .a { color: var(--accent); text-decoration: underline wavy var(--accent); text-decoration-thickness: 4px; text-underline-offset: 9px; }
.mega .b { color: var(--keys); display: inline-block; transform: rotate(-3deg); }
.lede { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.5; color: var(--fg); max-width: 34em; margin: 0 0 26px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.demo { position: relative; min-width: 0; }
.mini { position: relative; aspect-ratio: 16 / 11; max-width: 100%; background: linear-gradient(180deg, #151130, #110e25); border: 2px solid var(--fg); border-radius: 22px; overflow: hidden; box-shadow: 8px 8px 0 var(--pad); }
.mini canvas, #pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.sticker { position: absolute; z-index: 3; font-family: var(--f-display); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; padding: 8px 12px; border-radius: 999px; color: var(--ink); pointer-events: none; box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.sticker.s1 { background: var(--keys); top: -14px; left: 14px; transform: rotate(-6deg); }
.sticker.s2 { background: var(--lead); top: -14px; right: 14px; transform: rotate(4deg); }
.mbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.mbar .dots { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.mbar .sp { flex: 1; }
.link { background: none; border: 0; padding: 6px 2px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.cap { color: var(--muted); margin: 12px 0 0; font-size: 13.5px; }

.marq { background: var(--accent); color: var(--on-accent); transform: rotate(-1.5deg); margin-inline: -30px; padding: 14px 0; overflow: hidden; }
.marq div { display: flex; width: max-content; animation: marq 26s linear infinite; font-family: var(--f-display); font-weight: 800; font-size: clamp(15px, 3vw, 22px); text-transform: uppercase; white-space: nowrap; }
.marq span { padding-right: 2.2em; }
@keyframes marq { to { transform: translateX(-50%); } }

.h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 5.6vw, 46px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 12px; text-wrap: balance; }
.sub { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0 0 28px; max-width: 40em; }
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps i { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--f-display); font-weight: 800; font-size: 20px; color: var(--ink); background: var(--c); box-shadow: 4px 4px 0 var(--fg); }
.steps h3 { margin: 4px 0 4px; font-family: var(--f-display); font-size: 16px; font-weight: 800; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }

.groove { display: grid; gap: 30px; align-items: center; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 10px 15px; font-weight: 700; font-size: 13.5px; min-height: 42px; }
.pill[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pills.bt .pill[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.plab { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }

.guide { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.gc { background: var(--c); color: var(--ink); border-radius: 18px; padding: 20px 20px 22px; box-shadow: 6px 6px 0 rgba(0,0,0,.55); transform: rotate(var(--rot)); min-width: 0; }
.gc h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.gc p { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 500; }
.end { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.end .mega { margin: 0; }
.fine { color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 44em; margin: 0; }

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.02fr .98fr; gap: 56px; }
  .groove { grid-template-columns: .95fr 1.05fr; gap: 56px; }
  .sticker { font-size: 12.5px; }
}

/* ================= app ================= */
.app { display: flex; flex-direction: column; gap: 12px; min-height: 100%; max-width: 1360px; margin-inline: auto; }
.top { display: flex; align-items: center; gap: 10px; }
.hint { margin: 0; color: var(--muted); flex: 1; min-width: 0; display: none; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.help { width: 40px; height: 40px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); font-family: var(--f-display); font-weight: 800; font-size: 15px; padding: 0; }
.stage {
  position: relative; height: clamp(280px, 46svh, 560px);
  background: linear-gradient(180deg, #151130, #110e25);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 10px 40px rgba(0,0,0,.35);
}
.stage.erasing #pad { cursor: cell; }
.deck { display: flex; flex-direction: column; gap: 14px; }
.grp { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.lbl b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.row { display: grid; gap: 6px; }
.row.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chip, .tool, .beat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  min-height: 44px; padding: 6px 4px; font-weight: 700; font-size: 12.5px; min-width: 0;
  transition: background .12s, border-color .12s, transform .06s;
}
.chip:active, .tool:active, .beat:active { transform: scale(.96); }
.chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.chip i { width: 22px; height: 6px; border-radius: 99px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.chip[aria-pressed="true"] { background: var(--c); color: var(--ink); border-color: var(--c); }
.chip[aria-pressed="true"] i { background: var(--ink); box-shadow: none; }
.tool[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tool:disabled { opacity: .4; cursor: default; }
.beat { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 7px 7px; text-align: left; }
.beat .n { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; white-space: nowrap; }
.beat .n small { font-family: var(--f-mono); font-weight: 500; font-size: 10px; color: var(--muted); }
.beat .mini-p { display: grid; grid-template-columns: repeat(16, 1fr); gap: 1px; height: 7px; }
.beat .mini-p u { background: var(--line); border-radius: 1px; }
.beat .mini-p u.k { background: var(--fg); }
.beat .mini-p u.s { background: var(--bells); }
.beat[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.beat[aria-pressed="true"] .n small { color: var(--on-accent); }
.beat[aria-pressed="true"] .mini-p u { background: rgba(15,31,6,.2); }
.beat[aria-pressed="true"] .mini-p u.k { background: var(--on-accent); }
.beat[aria-pressed="true"] .mini-p u.s { background: #fff; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; margin: 0; }
select { width: 100%; min-height: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font-weight: 700; }
.foot { color: var(--muted); font-size: 12px; margin: 0; line-height: 1.45; }
.foot kbd { font-family: var(--f-mono); font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--fg); }

/* clean space */
.float, .cbar > div { background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid var(--line); border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.float { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 8px 13px; font-weight: 700; font-size: 12px; }
.cbar { display: none; position: absolute; top: 10px; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); z-index: 2; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.cbar > div { pointer-events: auto; display: flex; align-items: center; gap: 5px; padding: 5px; }
.cb { width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2); border: 0; font-size: 15px; font-weight: 700; display: grid; place-items: center; padding: 0; line-height: 1; }
.cb[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
#cPlay[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.cb:disabled { opacity: .35; }
body.clean .top, body.clean .deck, body.clean .float { display: none; }
body.clean .cbar { display: flex; flex-wrap: wrap; }
body.clean .stage { position: fixed; inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0; height: auto; border: 0; border-radius: 0; z-index: 20; }
@media (max-width: 480px) { .cbar > div { gap: 4px; } .cbar .dot { width: 26px; height: 26px; } .cb { width: 32px; height: 32px; font-size: 14px; } }

/* help sheet */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(8, 6, 18, .78); display: grid; place-items: center; padding: 16px; }
.sheet-in { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; max-width: 580px; width: 100%; max-height: 100%; overflow-y: auto; padding: 22px; }
.sheet-in header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.sheet-in h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.sheet-in > p { color: var(--muted); margin: 0 0 16px; font-size: 14.5px; line-height: 1.45; }
.sheet-in dl { margin: 0 0 18px; }
.sheet-in dt { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.sheet-in dt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sheet-in dd { margin: 0 0 14px; color: var(--muted); line-height: 1.45; font-size: 14.5px; }

@media (min-width: 900px) {
  body.play { padding-block: 18px; }
  .app { display: grid; grid-template-columns: minmax(0, 1fr) 372px; grid-template-rows: auto minmax(0, 1fr); gap: 16px 18px; height: 100%; min-height: 0; }
  .top { grid-column: 1 / -1; gap: 14px; }
  .hint { display: block; }
  .stage { height: auto; min-height: 0; }
  .deck { overflow-y: auto; background: color-mix(in srgb, var(--panel) 55%, transparent); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .marq div { animation: none; } }