/* DM Sans (SIL OFL 1.1, fonts/OFL.txt), served from this site: no request to Google. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/dm-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/dm-sans-latin.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; }

/* Colours from PandaNota Components/Theme.swift (AppTheme light). */
/* Fredoka (SIL OFL 1.1, fonts/OFL-Fredoka.txt) sets the logo only. The fallback is resized to Fredoka's width so the logo does not jump on swap. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/fredoka-latin.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: "Fredoka fallback"; font-weight: 300 700; src: local("Arial Bold"), local("Arial"); size-adjust: 97.6%; }

:root {
  --paper: #F8FAFC;       /* bgPrimary */
  --paper-2: #F1F5F9;     /* bgElevated */
  --ink: #0F172A;         /* textPrimary */
  --muted: #475569;       /* textSecondary */
  --sky-muted: #334155;   /* secondary text straight on the sky, where blobs overlap */
  --accent: #4F46E5;      /* accentPrimary (brand) taste-skill-ignore */
  --accent-ledge: #3730A3;
  --amber: #D97706;       /* accentSecondary */
  --note-red: #E32933;    /* Theme.noteRed (drawing palette) */
  --key-green: #059669;   /* statusSuccess */
  --danger: #DC2626;      /* statusDanger */
  --purple: #7C3AED;      /* categoryPurple */
  --teal: #0D9488;        /* categoryTeal */
  --line: #E2E8F0;        /* borderSubtle */
  --panda-black: #212126; /* Theme.pandaBlack (drawing palette) */
  --panda-white: #FCFCF7; /* Theme.pandaWhite */
  --staff-ink: #2E2E38;   /* Theme.staffInk */
  /* PianoKeyboardView keys (Theme.key*; a lit key is categoryCoral) */
  --key-white-top: #EDEDED; --key-black-top: #4C4C4C; --key-black-bottom: #141414;
  --key-lit-top: #FF8C8C; --key-lit: #E11D48; --key-lit-dark: #8C0D14;

  --m: clamp(16px, 2.2vw, 32px);
  --gap: 12px;
  --rad: clamp(20px, 2.4vw, 32px);  /* the one corner radius for pictures; nested frames add their padding */
  --soft: 0 1px 2px rgb(79 70 229 / .06), 0 12px 32px rgb(79 70 229 / .10), 0 36px 80px rgb(79 70 229 / .12); /* taste-skill-ignore: product pictures float */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1.03rem + 0.25vw, 1.25rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  --step-sub: clamp(1.5rem, 0.9rem + 1.8vw, 2.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html[lang="tr"] [lang="en"], html[lang="en"] [lang="tr"] { display: none; }
body {
  background: #EDEBFC; color: var(--ink);
  font: 400 var(--step-body)/1.5 "DM Sans", "Apple Symbols", "Segoe UI Symbol", system-ui, sans-serif; /* symbol faces only supply what DM Sans lacks, such as the sharp sign */
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
ul { padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
h1, h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
h2 { font-size: var(--step-head); }

main, .foot { position: relative; z-index: 1; }

/* The sky: fixed behind the page, built from gradients only (no filter), moved by transform and opacity from main.js.
   Colours are AppTheme accent and category hues at very low strength over bgPrimary. */
.sky { --g: 0; --peach: 0; --mint: 0; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(200deg, #F8FAFC 0%, #EDEBFC 55%, #DFDEFA 100%); } /* taste-skill-ignore */
.sky .tint { position: absolute; inset: 0; will-change: opacity; }
.sky .peach { opacity: var(--peach); background: linear-gradient(200deg, #FFF6EE 0%, #FDEBDD 55%, #FBDCD4 100%); } /* taste-skill-ignore */
.sky .mint { opacity: var(--mint); background: linear-gradient(200deg, #F3FBF9 0%, #DCF1EC 55%, #CDEAE8 100%); } /* taste-skill-ignore */
.blob { position: absolute; width: 110vmax; height: 110vmax; border-radius: 50%; will-change: transform; }
.blob.a { top: -46vmax; left: -34vmax; transform: translate3d(0, calc(var(--g) * -22vh), 0); background: radial-gradient(closest-side, rgb(79 70 229 / .18), rgb(79 70 229 / .08) 50%, rgb(79 70 229 / 0)); } /* taste-skill-ignore */
.blob.b { top: 6vh; right: -48vmax; transform: translate3d(0, calc(var(--g) * 16vh), 0); background: radial-gradient(closest-side, rgb(225 29 72 / .12), rgb(225 29 72 / .05) 50%, rgb(225 29 72 / 0)); } /* taste-skill-ignore */
.blob.c { bottom: -62vmax; left: 8vw; transform: translate3d(0, calc(var(--g) * -10vh), 0); background: radial-gradient(closest-side, rgb(13 148 136 / .14), rgb(13 148 136 / .06) 50%, rgb(13 148 136 / 0)); } /* taste-skill-ignore */
.drift { position: absolute; top: 0; left: 0; width: 100%; height: 260vh; transform: translate3d(0, calc(var(--g) * -160vh), 0); will-change: transform; color: var(--accent); }
.drift svg { position: absolute; fill: currentColor; opacity: .16; overflow: visible; }
.drift .wisp { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .14; }
/* a little grain keeps these very light gradients from banding */
.grain { position: absolute; inset: 0; opacity: .05; background-size: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .6 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

.btn {
  display: inline-block; padding: 18px 28px; background: var(--accent); color: var(--paper);
  font-weight: 500; text-decoration: none; transition: transform .18s var(--ease), background-color .18s;
}
.btn:hover { background: var(--accent-ledge); }
.btn:active { transform: translateY(2px); }
.btn.light { background: var(--paper); color: var(--ink); }
.btn.light:hover { background: var(--paper-2); }
/* Apple's official App Store badge, untouched: 48 px tall (Apple's minimum is 40), clear space of a quarter of its height
   as padding, which also makes the tap area 72 px; the negative margin keeps it aligned with the text around it */
.badge { display: inline-block; padding: 12px; margin: -12px; line-height: 0; }
.badge img { height: 48px; width: auto; }

.lang {
  position: absolute; z-index: 5; top: var(--m); right: var(--m);
  font-family: inherit; font-weight: 500; font-size: var(--step-small); line-height: 1; min-width: 48px; min-height: 48px;
  background: var(--paper); color: var(--ink); border: 0; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s;
}
.lang:hover { background: var(--paper-2); }
.lang:active { transform: scale(.94); }

/* ---------- Scenes ----------
   Without .scenes (no script, or reduced motion) each scene is an ordinary section at its last frame (--p: 1).
   With .scenes the section is --len svh tall, the stage sticks, and main.js writes --p from 0 to 1. */
.scene { --p: 1; --k: 0; position: relative; }
.stage { position: relative; min-height: 100svh; padding: clamp(72px, 8vw, 96px) var(--m) var(--m); }
.scenes .scene { --p: 0; --in: 0; --out: 0; height: calc(var(--len) * 1svh); }
.scenes .s-hero { --in: 1; }
.scenes .stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }

/* Pictures arrive with their stage and leave with it (--in, --out come from main.js) */
.scenes :is(.hero-art, .staffband, .bigword, .s-phone .phone, .key-art, .finder, .practice, .paper) {
  --I: calc(var(--in) * var(--in) * (3 - 2 * var(--in)));
  --O: calc(var(--out) * var(--out) * (3 - 2 * var(--out)));
  opacity: calc(var(--I) * (1 - var(--O)));
  transform: translateY(calc((1 - var(--I)) * 32px - var(--O) * 32px)) scale(calc(.96 + .04 * var(--I) - .04 * var(--O)));
}

/* Entrance: logo left, panda right */
.logo { display: inline-block; font-family: "Fredoka", "Fredoka fallback", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.logo-o { display: inline-block; height: .518em; width: .621em; fill: currentColor; vertical-align: -.0173em; }  /* x-height, overshoot and bearings measured from Fredoka 600 o */
/* P (half note) and d (eighth note; with the panda looking out of its head where the wordmark is large) are drawn on Fredoka's grid: 1000 units = 1em, baseline at 0, cap height 690 */
.logo-g { display: inline-block; height: .76em; vertical-align: -.01em; fill: currentColor; overflow: visible; }
.s-hero .stage { --pw: min(40vw, calc((100svh - 2 * var(--m) - 12px) / 1.778)); display: grid; grid-template-columns: 1fr auto; gap: var(--m); align-items: center; padding: var(--m); }
.hero-copy h1 { font-size: 7.8vw; letter-spacing: 0; }
.slogan { font-size: var(--step-sub); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 20px 0 36px; }
.hero-art { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-right: 56px; }
.panda-wrap { position: relative; width: var(--pw); aspect-ratio: .64; }
.panda-wrap > svg { position: absolute; }
.panda-base { inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel { top: .32%; width: 26%; aspect-ratio: 1; will-change: transform; }
.wheel-l { left: 6%; }
.wheel-r { left: 68%; }
.wheel text { font: 700 22px "DM Sans", system-ui, sans-serif; fill: #212126; fill-opacity: .75; text-anchor: middle; dominant-baseline: central; }
.sign { left: 24%; top: 37.76%; width: 52%; }
.bead { left: 46%; top: 94.05%; width: 8%; aspect-ratio: 1; will-change: transform; }
.kb { width: calc(var(--pw) * 1.1); max-width: 100%; }
.kb-win { aspect-ratio: 408 / 80; overflow: hidden; border-radius: 14px; background: var(--ink); }
.kb-strip { display: block; width: calc(1334 / 408 * 100%); height: 100%; will-change: transform; }

/* Scene 1: the opening */
.s-open .stage { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding-top: var(--m); }
.bigword { display: grid; font-size: min(16.5vw, 24svh); line-height: .95; letter-spacing: -0.05em; color: var(--ink); }
.bigword .w { grid-area: 1 / 1; display: flex; }
.bigword b { font-weight: 700; display: inline-block; will-change: transform, opacity; }
.bigword .out b {
  --o: clamp(0, var(--p) * 3 - .45 - var(--i) * .08, 1);
  --oo: calc(var(--o) * var(--o) * (3 - 2 * var(--o)));
  opacity: calc(1 - var(--oo));
  transform: translate(calc(var(--oo) * var(--dx)), calc(var(--oo) * -30svh)) rotate(calc(var(--oo) * (var(--i) - 2.5) * 14deg));
}
.bigword .in b {
  --n: clamp(0, var(--p) * 3 - 1.3 - var(--i) * .12, 1);
  --nn: calc(var(--n) * var(--n) * (3 - 2 * var(--n)));
  opacity: var(--nn);
  transform: translateY(calc((1 - var(--nn)) * 24svh));
}
.staffband { display: flex; align-items: center; gap: clamp(8px, 2vw, 32px); background: var(--paper); padding: 12px clamp(12px, 2vw, 32px); align-self: center; border-radius: var(--rad); box-shadow: var(--soft); } /* taste-skill-ignore */
.bigstaff { flex: 1; min-width: 0; height: auto; overflow: visible; }
.bigstaff .lines, .bigstaff .ledger, .bigstaff .stem { stroke: var(--ink); stroke-width: 2.5; fill: none; }
.bigstaff .clef { font-size: 108px; fill: var(--ink); font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; }
.bigstaff ellipse { fill: var(--ink); }
.bigstaff text:not(.clef) { font-size: 20px; text-anchor: middle; fill: var(--muted); font-family: inherit; }
.fall { --q: clamp(0, var(--p) * 5 - .25 - var(--i) * .5, 1); --qq: calc(var(--q) * var(--q) * (3 - 2 * var(--q))); opacity: var(--qq); transform: translateY(calc((1 - var(--qq)) * -160px)); }
.fall:first-child ellipse { fill: var(--note-red); }
.open-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px clamp(24px, 4vw, 64px); align-items: end; }
.open-copy h1 { font-size: var(--step-head); grid-row: 1 / 3; max-width: 12ch; }
.open-copy .lead { max-width: 44ch; }
.open-copy .btn { justify-self: start; }

/* Scene 2: the phone */
.s-phone .stage { display: grid; grid-template-columns: 1fr auto; gap: var(--m) clamp(24px, 6vw, 96px); align-items: center; }
.phone-copy h2 { max-width: 12ch; }
.steps { margin-top: 40px; display: grid; }
.steps li { max-width: 46ch; margin-top: 20px; }
.steps b { display: block; font-size: var(--step-lead); font-weight: 500; margin-bottom: 4px; }
.scenes .steps li { grid-area: 1 / 1; margin-top: 0; opacity: var(--v, 0); transform: translateY(calc((1 - var(--v, 0)) * 12px)); }
.scenes .steps li:not(.on) { visibility: hidden; }
/* Device frames: every app picture is a whole screen in a frame of the screen's own shape, never a crop */
.dev {
  --bezel: 12px; flex: none; box-sizing: content-box;
  padding: var(--bezel); background: var(--paper); border-radius: calc(var(--rad) + var(--bezel)); box-shadow: var(--soft); /* taste-skill-ignore */
}
/* Width is written out from --h, not left to aspect-ratio: WebKit leaves an aspect-ratio box out of its parent's fit-content width,
   so a centred parent (the Read Music viewfinder) grew to the whole column and the phone sat at its left edge */
.dev.phone { --isl-top: 1.38%; --isl-w: 21.6%; --isl-h: 4.05%; --ar: 600 / 1304; aspect-ratio: var(--ar); height: var(--h); width: calc(var(--h) * var(--ar)); }
.dev.tablet { --ar: 1668 / 2388; aspect-ratio: var(--ar); height: var(--h); width: calc(var(--h) * var(--ar)); --bezel: 14px; border-radius: calc(var(--rad) * .7 + var(--bezel)); }
.screen { position: relative; height: 100%; border-radius: var(--rad); overflow: hidden; background: var(--paper); }
.tablet .screen { border-radius: calc(var(--rad) * .7); }
.screen > img, .screen > video { width: 100%; height: 100%; object-fit: cover; }
/* a video sits over the same picture and shows only once it has drawn a frame; if it never does (Low Power Mode, a blocked
   play, a server without byte ranges) the picture stays instead of an empty white screen */
.screen > video { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.screen > video.drawn { opacity: 1; }
/* the Dynamic Island at the size and place the screen recordings show it, so a recording's own island lies exactly under it */
.phone .screen::after { content: ""; position: absolute; top: var(--isl-top); left: 50%; width: var(--isl-w); height: var(--isl-h); transform: translateX(-50%); background: var(--ink); border-radius: 99px; }
.s-phone .phone { --h: min(80svh, 720px); }
.strip { display: flex; flex-direction: column; transform: translateY(calc(var(--k) * -25%)); will-change: transform; }
.strip img { width: 100%; height: auto; }
.scenes .strip { position: absolute; inset: 0; transform: none; }
.scenes .strip img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: var(--v, 0); transform: translateY(calc(var(--d, 0) * 6%)) scale(calc(1 - var(--a, 0) * .03)); will-change: transform, opacity; }

/* Scene 3: Press a key. .panda-wrap is cloned from the entrance; the keys are PianoKeyboardView's */
.s-key .stage { --pw: min(30vw, calc((100svh - 320px) / 1.5625)); display: grid; grid-template-columns: 5fr 7fr; gap: var(--m) clamp(24px, 5vw, 80px); align-items: center; }
.key-art { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.panda-slot .panda-wrap { width: var(--pw); }
.s-key .bead, .s-key .wheel { transition: transform .45s cubic-bezier(.3, 1.35, .5, 1); }  /* the app's spring */
.s-key .acc { /* the app sets ls * 1.4 in the system font, whose sharp is larger than Apple Symbols one */ font: 700 88px "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; fill: var(--staff-ink); text-anchor: middle; dominant-baseline: central; }
.s-key .piano { width: min(100%, calc(var(--pw) * 1.7)); height: clamp(110px, 17svh, 170px); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Scene 4: Read Music */
.scene-copy h2 { max-width: 13ch; }
.scene-copy p { margin-top: 28px; max-width: 40ch; }
.s-read .stage, .s-ink .stage { display: grid; grid-template-columns: 5fr 7fr; gap: var(--m) clamp(24px, 5vw, 80px); align-items: center; }
.finder { --spread: 48px; --c0: clamp(0, var(--p) * 2.5, 1); --c: calc(var(--c0) * var(--c0) * (3 - 2 * var(--c0))); position: relative; justify-self: center; }
.finder .phone { --h: min(74svh, 660px); transform: scale(calc(.86 + .14 * var(--c))); }
.finder .c { position: absolute; width: 56px; height: 56px; border: 0 solid var(--amber); }
.finder .tl { top: -18px; left: -18px; border-width: 6px 0 0 6px; border-top-left-radius: calc(var(--rad) + 18px); transform: translate(calc((1 - var(--c)) * -1 * var(--spread)), calc((1 - var(--c)) * -1 * var(--spread))); }
.finder .tr { top: -18px; right: -18px; border-width: 6px 6px 0 0; border-top-right-radius: calc(var(--rad) + 18px); transform: translate(calc((1 - var(--c)) * var(--spread)), calc((1 - var(--c)) * -1 * var(--spread))); }
.finder .bl { bottom: -18px; left: -18px; border-width: 0 0 6px 6px; border-bottom-left-radius: calc(var(--rad) + 18px); transform: translate(calc((1 - var(--c)) * -1 * var(--spread)), calc((1 - var(--c)) * var(--spread))); }
.finder .br { bottom: -18px; right: -18px; border-width: 0 6px 6px 0; border-bottom-right-radius: calc(var(--rad) + 18px); transform: translate(calc((1 - var(--c)) * var(--spread)), calc((1 - var(--c)) * var(--spread))); }

/* Scene 5: Let Me Play, drawn from PracticeView: listening ring, next and heard note, staff, keyboard (main.js sets the state) */
.s-play .stage { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.scene-copy.wide { display: grid; grid-template-columns: 1fr 1fr; gap: 16px clamp(24px, 5vw, 80px); align-items: end; }
.scene-copy.wide p { margin-top: 0; }
.practice-wrap { flex: 1; display: grid; place-items: center; }
.practice { width: min(100%, 860px); display: grid; gap: clamp(12px, 2vw, 24px); padding: clamp(16px, 2.6vw, 32px); background: var(--paper); border-radius: var(--rad); box-shadow: var(--soft); } /* taste-skill-ignore */
.pr-bar { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); flex-wrap: wrap; }
/* ListeningOrb: a turning ring of accent and category hues that swells with the sound; idle it is a thin border */
.orb { --o: clamp(64px, 8vw, 104px); --lv: 0; position: relative; width: var(--o); height: var(--o); flex: none; border-radius: 50%; }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from var(--turn, 0deg), var(--accent), var(--purple), var(--teal), var(--amber), var(--accent)); filter: blur(calc(var(--o) * .09)); opacity: calc(.6 + .4 * var(--lv)); transform: scale(calc(1 + .4 * var(--lv))); transition: opacity .3s; } /* taste-skill-ignore: the app's own angular gradient */
.orb.idle::before { opacity: 0; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line); opacity: 0; transition: opacity .3s; }
.orb.idle::after { opacity: 1; }
.orb svg { position: absolute; inset: 9.4%; width: 81.2%; height: 81.2%; border-radius: 50%; background: var(--panda-white); padding: 6.3%; box-sizing: border-box; overflow: visible; z-index: 1; }
.orb .k { fill: var(--panda-black); } .orb .w { fill: var(--panda-white); } .orb .s { fill: none; stroke: var(--panda-black); stroke-width: 4; stroke-linecap: round; }
.pr-pill { display: grid; line-height: 1.2; margin-right: auto; }
.pr-pill b { font-size: var(--step-sub); font-weight: 700; letter-spacing: -0.02em; }
.pr-pill small { font-size: var(--step-small); font-weight: 500; color: var(--muted); }
.pr-count { display: flex; align-items: center; gap: 14px; font-weight: 500; font-variant-numeric: tabular-nums; padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; }
.pr-count > span { display: inline-flex; align-items: center; gap: 4px; }
.pr-count svg { width: 1.1em; height: 1.1em; }
.pr-count path { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pr-count .ok circle { fill: var(--key-green); } .pr-count .bad circle { fill: var(--danger); }
.pr-staff { width: 100%; height: auto; overflow: visible; }
.pr-staff .lines { stroke: var(--staff-ink); stroke-width: 1.5; fill: none; }
.pr-staff .clef { font-size: 68px; fill: var(--staff-ink); font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; }
.pr-staff .col { fill: var(--amber); fill-opacity: .35; transition: x .3s var(--ease), fill .2s; }
.pr-staff .col.wrong { fill: var(--danger); fill-opacity: .25; }
.pr-staff .col.gone { fill-opacity: 0; }
.pn ellipse { fill: var(--staff-ink); transition: fill .2s; } .pn path { stroke: var(--staff-ink); stroke-width: 2; transition: stroke .2s; }
.pn.done ellipse { fill: var(--key-green); } .pn.done path { stroke: var(--key-green); }
.pn.wrong ellipse { fill: var(--danger); } .pn.wrong path { stroke: var(--danger); }

/* Scene 6: Handwrite, the whole iPad screen; the ink is drawn over its second staff */
.paper { --h: min(78svh, 720px); justify-self: center; }
.paper svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hand ellipse, .hand path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
.hand ellipse { --h: clamp(0, (var(--p) * 9 - .6 - var(--i)) * 2, 1); stroke-dashoffset: calc(1 - var(--h)); }
.hand path { --s: clamp(0, (var(--p) * 9 - 1.1 - var(--i)) * 2, 1); stroke-dashoffset: calc(1 - var(--s)); }
.hand, .engraved { --v0: clamp(0, var(--p) * 8 - 6.9, 1); --v: calc(var(--v0) * var(--v0) * (3 - 2 * var(--v0))); }
.hand { opacity: calc(1 - var(--v)); }
.engraved { opacity: var(--v); }
.engraved ellipse { fill: var(--ink); }
.engraved path { stroke: var(--ink); stroke-width: 2.5; }
.engraved text { font: 500 20px "DM Sans", system-ui, sans-serif; text-anchor: middle; fill: var(--accent); }

/* ---------- Quiet sections ---------- */
.quiet { padding: clamp(120px, 14vw, 200px) var(--m); }
/* PianoKeyboardView: rounded keys on a dark rounded strip; the lit key is coral (a scene can light it indigo or red) */
.piano { position: relative; display: flex; padding: 4px 0; background: var(--ink); border-radius: 14px; touch-action: manipulation; }
.piano > * { border: 0; padding: 0; font: inherit; }
.piano button { cursor: pointer; }
.piano .w { --top: var(--key-white-top); --bot: var(--paper); flex: 1; margin: 0 .75px; border-radius: 5px; background: linear-gradient(var(--top), var(--bot)); box-shadow: inset 0 0 0 .75px rgb(15 23 42 / .25);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: var(--step-small); font-weight: 700; color: rgb(30 41 59 / .55); transition: transform .2s var(--ease); }
.piano .b { --top: var(--key-black-top); --bot: var(--key-black-bottom); position: absolute; top: 4px; height: calc((100% - 8px) * .62); width: calc(100% / 8 * .62); z-index: 1; border-radius: 4px;
  background: linear-gradient(var(--top), var(--bot)); box-shadow: 0 2px 3px rgb(15 23 42 / .35); transition: transform .2s var(--ease); }
.piano .on.w { --top: var(--key-lit-top); --bot: var(--key-lit); color: var(--paper); transform: translateY(2px); }
.piano .on.b { --top: var(--key-lit); --bot: var(--key-lit-dark); transform: translateY(1.5px); }
.piano .next.w { --top: rgb(79 70 229 / .7); --bot: var(--accent); color: var(--paper); transform: translateY(2px); }
.piano .next.b { --top: rgb(79 70 229 / .8); --bot: var(--accent); transform: translateY(1.5px); }
.piano .bad { --top: rgb(220 38 38 / .49); --bot: rgb(220 38 38 / .7); }
.piano.still { height: clamp(84px, 12svh, 128px); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px var(--gap); }
.pair-title { grid-column: 1 / -1; }
.pair figure { --fh: clamp(420px, 44vw, 620px); height: var(--fh); display: flex; justify-content: center; }
.pair .dev { --h: calc(var(--fh) - 2 * var(--bezel)); }
.pair video { transition: opacity .3s ease; }
.pair video.turn { opacity: 0; }  /* a short dip hides the loop's jump back to the start */
.pair h3 { font-size: var(--step-sub); margin-top: 24px; }
.pair p { margin-top: 16px; max-width: 40ch; color: var(--sky-muted); }

.route { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding: clamp(40px, 6vw, 80px) var(--m) 0; align-items: start; }
.route-text { grid-column: 1 / 6; }
.route-text p { margin-top: 32px; max-width: 30ch; color: var(--sky-muted); }
.slip {
  grid-column: 7 / 13; background: var(--paper); color: var(--ink); padding: 36px 32px 64px; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 97.917% 100%, 95.833% calc(100% - 14px), 93.750% 100%, 91.667% calc(100% - 14px), 89.583% 100%, 87.500% calc(100% - 14px), 85.417% 100%, 83.333% calc(100% - 14px), 81.250% 100%, 79.167% calc(100% - 14px), 77.083% 100%, 75.000% calc(100% - 14px), 72.917% 100%, 70.833% calc(100% - 14px), 68.750% 100%, 66.667% calc(100% - 14px), 64.583% 100%, 62.500% calc(100% - 14px), 60.417% 100%, 58.333% calc(100% - 14px), 56.250% 100%, 54.167% calc(100% - 14px), 52.083% 100%, 50.000% calc(100% - 14px), 47.917% 100%, 45.833% calc(100% - 14px), 43.750% 100%, 41.667% calc(100% - 14px), 39.583% 100%, 37.500% calc(100% - 14px), 35.417% 100%, 33.333% calc(100% - 14px), 31.250% 100%, 29.167% calc(100% - 14px), 27.083% 100%, 25.000% calc(100% - 14px), 22.917% 100%, 20.833% calc(100% - 14px), 18.750% 100%, 16.667% calc(100% - 14px), 14.583% 100%, 12.500% calc(100% - 14px), 10.417% 100%, 8.333% calc(100% - 14px), 6.250% 100%, 4.167% calc(100% - 14px), 2.083% 100%, 0% calc(100% - 14px));
}
.slip h3 { font-size: var(--step-body); font-weight: 500; letter-spacing: 0; margin-top: 28px; }
.slip h3:first-child { margin-top: 0; }
.row { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.row i { flex: 1; min-width: 24px; border-bottom: 4px dotted var(--muted); transform: translateY(-4px); }
.row > span:last-child { text-align: right; white-space: nowrap; }
.row.total { background: #E7E5FB; color: var(--ink); margin: 32px -32px 0; padding: 12px 32px; min-height: 44px; justify-content: space-between; font-weight: 500; }

.cta { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding: clamp(120px, 14vw, 220px) 0; overflow: hidden; }
.tile { height: 360px; border-radius: var(--rad); }
.tile.main { grid-column: 3 / 11; background: var(--accent); color: var(--paper); padding: 40px clamp(24px, 4vw, 64px); display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-content: center; justify-items: start; }
.tile.main > :not(.appicon) { grid-column: 1; }
.tile.main h2 { font-size: var(--step-sub); }
.tile.main p { margin: 20px 0 32px; max-width: 46ch; }
.tile.main .appicon { grid-column: 2; grid-row: 1 / 4; align-self: center; width: clamp(160px, 16vw, 240px); height: auto; border-radius: var(--rad); box-shadow: var(--soft); } /* taste-skill-ignore */

.foot {
  min-height: 72svh;
  display: grid; grid-template-rows: auto 1fr auto auto; color: var(--ink);
  padding: 40px var(--m) 20px;
}
.cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); font-size: var(--step-small); }
.cols p { color: var(--sky-muted); }
.cols p:first-child { color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.cols a { text-underline-offset: 4px; }
.cols a:hover { color: var(--accent); }
.bigmark { grid-row: 3; font-size: calc((100vw - 2 * var(--m)) / 5.36); line-height: 1; margin-bottom: 20px; white-space: nowrap; }
.legal { grid-row: 4; font-size: var(--step-small); color: var(--sky-muted); }

/* Entrances for the quiet sections: visible without script; .js arms them */
.js .reveal > *, .js article.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in > *, .js article.reveal.in { opacity: 1; transform: none; }
.js .reveal.in > *:nth-child(2) { transition-delay: 80ms; }
.js .reveal.in > *:nth-child(n+3) { transition-delay: 160ms; }
.js h2.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js h2.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .js .reveal > *, .js article.reveal, .js h2.reveal { opacity: 1; transform: none; }
  .sky .tint, .blob, .drift { will-change: auto; }
}

@media (max-width: 1024px) {
  .route-text { grid-column: 1 / 7; }
  .slip { grid-column: 7 / 13; }
  .s-read .stage, .s-ink .stage, .s-key .stage { grid-template-columns: 1fr 1fr; }
  .s-key .stage { --pw: min(38vw, calc((100svh - 320px) / 1.5625)); }
  .paper { --h: min(78svh, 720px, calc((50vw - 70px) * 2388 / 1668)); }  /* the tablet fits its half */
}

/* Phone: each scene stacks text above its picture */
@media (max-width: 760px) {
  .drift svg:nth-of-type(even):not(.wisp) { display: none; }  /* sparser on a phone */
  .s-hero .stage { --pw: min(calc(100vw - 72px), calc((100svh - 300px) / 1.778)); grid-template-columns: 1fr; grid-template-rows: auto 1fr; justify-items: center; text-align: center; gap: 12px; padding: 72px 16px 16px; }
  .hero-copy h1 { font-size: calc((100vw - 32px) / 5.36); }  /* the wordmark is 5.28em wide */
  .slogan { margin: 6px 0 12px; font-size: 1.375rem; }
  .hero-art { margin-right: 0; gap: 8px; align-self: end; }
  .stage { padding: 72px 16px 16px; }
  .s-open .stage { padding-top: 16px; gap: 12px; }
  .bigword { font-size: min(16.5vw, 17svh); }
  .staffband { flex-direction: column; padding: 16px 10px 8px; gap: 4px; }
  .bigstaff { width: 100%; }
  .open-copy { grid-template-columns: 1fr; }
  .open-copy h1 { grid-row: auto; font-size: clamp(2rem, 9vw, 2.5rem); }
  .open-copy .lead { font-size: 1.0625rem; }

  .s-phone .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; justify-items: center; }
  .phone-copy { justify-self: stretch; }
  .phone-copy h2 { font-size: 2rem; }
  .steps { margin-top: 16px; }
  .steps b { font-size: var(--step-body); }
  .dev { --bezel: 8px; }
  .s-phone .phone { --h: min(52svh, 520px); }

  .s-read .stage, .s-ink .stage, .s-key .stage { grid-template-columns: 1fr; align-content: start; }
  .s-key .stage { --pw: min(calc(100vw - 96px), calc((100svh - 420px) / 1.5625)); }
  .s-key .piano { height: 104px; }
  /* stacked under the text: the corners (18px out, plus their spread) must clear the paragraph at every moment */
  .finder { --spread: 16px; margin-top: 30px; }
  .finder .phone { --h: min(calc(100svh - 500px), 420px); }
  .paper { --h: min(calc(100svh - 440px), 460px); }
  .pr-count { gap: 10px; padding: 6px 12px; font-size: var(--step-small); }
  .scene-copy h2 { font-size: 2rem; }
  .scene-copy p { margin-top: 16px; font-size: 1.0625rem; }
  .scene-copy.wide { grid-template-columns: 1fr; }

  .pair { grid-template-columns: 1fr; padding: 96px 16px; }
  .pair figure { --fh: min(560px, 130vw); }

  .route { grid-template-columns: 1fr; gap: 40px; padding: 48px 16px 0; }
  .route-text, .slip { grid-column: 1; }
  .slip { padding: 28px 20px 56px; }
  .row.total { margin: 28px -20px 0; padding: 12px 20px; }

  .cta { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
  .tile.main { grid-column: 1; grid-row: 1; height: auto; min-height: 300px; padding: 32px 20px; grid-template-columns: 1fr; }
  .tile.main .appicon { display: none; }
  .tile.main .btn { width: 100%; text-align: center; }

  .cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

/* ---------- Legal pages (gizlilik.html, kosullar.html): a plain reading page, same layout as gekaret.com's ---------- */
.legal-page { background: var(--paper); }
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; padding: var(--m); }
.doc-top .home { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; font-size: var(--step-lead); }
.doc-top .lang { position: static; background: var(--paper-2); }
.legal-page main { max-width: 1120px; margin: 0 auto; padding: 0 var(--m); }
.doc { max-width: 68ch; padding: clamp(24px, 4vw, 48px) 0 clamp(72px, 10vw, 120px); font-size: 1.0625rem; line-height: 1.65; overflow-wrap: break-word; }
.doc h1 { font-size: var(--step-sub); letter-spacing: -0.02em; line-height: 1.15; }
.doc .updated { margin-top: 8px; color: var(--muted); font-size: var(--step-small); }
.doc h2 { margin-top: 48px; font-size: var(--step-lead); letter-spacing: -0.01em; line-height: 1.25; }
.doc h3 { margin-top: 28px; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }
.doc p, .doc ul { margin-top: 12px; }
.doc ul { padding-left: 1.4em; list-style: disc; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--accent-ledge); text-underline-offset: 4px; }
.doc .general { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step-small); }
.doc-foot { max-width: 1120px; margin: 0 auto; padding: 24px var(--m); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--step-small); color: var(--muted); }
.doc-foot a { display: inline-block; padding: 12px 0; color: var(--ink); text-underline-offset: 4px; }