@font-face{font-family:"Instrument Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/joychromium/assets/instrument-serif-latin-ext-400-normal-C2je3j2s.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:"Instrument Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/joychromium/assets/instrument-serif-latin-400-normal-DnYpCC2O.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:Schibsted Grotesk Variable;font-style:normal;font-display:swap;font-weight:400 900;src:url(/joychromium/assets/schibsted-grotesk-latin-ext-wght-normal-hsMS0n0O.woff2) format("woff2-variations");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:Schibsted Grotesk Variable;font-style:normal;font-display:swap;font-weight:400 900;src:url(/joychromium/assets/schibsted-grotesk-latin-wght-normal-Bb8VGrTG.woff2) format("woff2-variations");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{color-scheme:light;--paper: oklch(96.5% .006 245);--paper-2: oklch(93.5% .008 245);--paper-3: oklch(90% .01 245);--ink: oklch(22% .025 255);--ink-2: oklch(38% .02 255);--ink-3: oklch(52% .018 255);--line: oklch(22% .025 255 / .1);--line-strong: var(--shadow);--accent: oklch(55% .17 252);--accent-bright: oklch(66% .18 252);--accent-soft: oklch(55% .17 252 / .1);--night: oklch(19% .025 255);--night-2: oklch(26% .025 255);--night-ink: oklch(95% .008 245);--night-ink-2: oklch(76% .015 245);--focus: oklch(55% .17 252);--error: oklch(52% .19 27);--success: oklch(52% .13 155);--btn-a: oklch(64% .15 152);--btn-b: oklch(62% .2 27);--btn-x: oklch(60% .19 258);--btn-y: oklch(80% .16 92);--pad-shell-top: oklch(97% .006 260);--pad-shell-bottom: oklch(86% .012 260);--pad-well: oklch(80% .015 260);--pad-key: oklch(24% .02 260);--m-bg: #1c1c1c;--m-surface: #2b2b2b;--m-strip: #141414;--m-text: #e8e8e8;--m-dim: #8a8a8a;--m-accent: #2b95ff;--font-display: "Instrument Serif", Georgia, serif;--font-body: "Schibsted Grotesk Variable", system-ui, sans-serif;--text-xs: .8125rem;--text-sm: .9375rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: clamp(2.2rem, 1.6rem + 2.2vw, 3.3rem);--text-display: clamp(3.4rem, 1.8rem + 6.4vw, 7.4rem);--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.5rem;--space-2xl: 4rem;--space-3xl: 7rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-pill: 999px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-micro: .12s;--dur-short: .2s;--dur-long: .4s;--page: min(1180px, calc(100% - 2 * var(--space-lg)));--surface: #fff;--nav-bg: oklch(96.5% .006 245 / .86);--card-bg: oklch(96.5% .006 245 / .92);--ink-hover: oklch(30% .025 255);--shadow: oklch(22% .025 255 / .18)}:root[data-theme=dark]{color-scheme:dark;--paper: oklch(16% .02 255);--paper-2: oklch(21% .022 255);--paper-3: oklch(26% .024 255);--ink: oklch(95% .008 245);--ink-2: oklch(80% .014 245);--ink-3: oklch(64% .016 245);--line: oklch(100% 0 0 / .09);--line-strong: oklch(100% 0 0 / .16);--accent: oklch(72% .14 248);--accent-soft: oklch(72% .14 248 / .16);--night: oklch(11% .018 255);--night-2: oklch(19% .022 255);--focus: oklch(76% .13 245);--error: oklch(70% .17 25);--success: oklch(74% .14 155);--surface: oklch(20% .022 255);--nav-bg: oklch(16% .02 255 / .82);--card-bg: oklch(16% .02 255 / .9);--ink-hover: oklch(86% .01 245);--shadow: oklch(0% 0 0 / .45)}html{transition:background-color var(--dur-long) var(--ease-out)}*,*:before,*:after{box-sizing:border-box}html{overflow-x:clip;background:var(--paper)}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 var(--text-base) / 1.6 var(--font-body);-webkit-font-smoothing:antialiased}img,svg,video{display:block;max-width:100%}h1,h2,h3{margin:0;font-style:normal;overflow-wrap:anywhere;min-width:0}p{margin:0}a{color:inherit}::selection{background:var(--accent);color:var(--paper)}:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}kbd{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .4em;border-radius:var(--radius-pill);background:var(--pad-key);color:#fff;font:700 .7em / 1 var(--font-body);vertical-align:.1em}kbd.b-a{background:var(--btn-a)}kbd.b-b{background:var(--btn-b)}kbd.b-x{background:var(--btn-x)}kbd.b-y{background:var(--btn-y);color:var(--ink)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:2.9rem;padding:0 1.25rem;border:0;border-radius:var(--radius-md);font:600 var(--text-sm) / 1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}.btn:active{transform:scale(.97)}.btn-dark{background:var(--ink);color:var(--paper);box-shadow:0 6px 16px #131b2638}.btn-dark:hover{background:var(--ink-hover)}.btn-soft{background:var(--paper-2);color:var(--ink)}.btn-soft:hover{background:var(--paper-3)}.btn-light{background:var(--night-ink);color:var(--night)}.btn-light:hover{background:#fff}.nav{position:fixed;inset:0 0 auto;z-index:40;border-bottom:1px solid transparent;transition:background var(--dur-long) var(--ease-out),border-color var(--dur-long) var(--ease-out)}.nav[data-scrolled=true]{background:var(--nav-bg);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}.nav-inner{display:flex;align-items:center;gap:var(--space-xl);width:var(--page);height:72px;margin:0 auto}.nav-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:600 1.02rem / 1 var(--font-body);letter-spacing:-.01em;white-space:nowrap}.nav-brand img{width:28px;height:28px}.nav-links{display:flex;align-items:center;gap:var(--space-lg);margin:0 auto}.nav-links a{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-size:var(--text-sm);font-weight:500;text-decoration:none;white-space:nowrap;transition:color var(--dur-short) var(--ease-out)}.nav-links a:hover{color:var(--ink)}.nav-end{display:flex;align-items:center;gap:var(--space-md)}.nav-pad{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:var(--text-xs);white-space:nowrap}.nav-cta{display:inline-flex;align-items:center;gap:8px;min-height:2.6rem;padding:0 1rem;border-radius:var(--radius-md);background:var(--ink);color:var(--paper);font-size:var(--text-sm);font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:0 6px 16px #131b2633;transition:background var(--dur-short) var(--ease-out)}.nav-cta svg{flex:none}.nav-cta:hover{background:var(--ink-hover)}.theme-toggle{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:0;border-radius:var(--radius-md);background:none;color:var(--ink-2);cursor:pointer;transition:background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}.theme-toggle:hover{background:var(--paper-2);color:var(--ink)}.pad-live{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}.section-head{display:grid;gap:var(--space-sm);max-width:40rem;margin:0 auto var(--space-xl);text-align:center}.section-head.left{margin-left:0;text-align:left}.section-head h2{font:400 var(--text-2xl) / 1.05 var(--font-display);letter-spacing:-.01em}.section-head p{color:var(--ink-2)}.section-head a{color:var(--accent)}.hero{display:grid;justify-items:center;width:var(--page);margin:0 auto;padding:10rem 0 var(--space-2xl);text-align:center}.hero h1{max-width:12ch;font:400 var(--text-display) / .95 var(--font-display);letter-spacing:-.02em}.hero h1 .accent{color:var(--accent)}.hero-sub{margin-top:var(--space-lg);color:var(--ink-2);font-size:var(--text-lg);line-height:1.55}.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin-top:var(--space-xl)}.hero-note{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-lg);color:var(--ink-3);font-size:var(--text-xs)}.frame{position:relative;width:100%;overflow:hidden;border-radius:var(--radius-lg);background:var(--night) center / cover no-repeat;box-shadow:0 30px 70px var(--shadow)}.frame-window{position:relative;overflow:hidden;border-radius:10px;box-shadow:0 0 0 1px #0006,0 30px 60px #00000073}.frame-credit{position:absolute;right:14px;bottom:10px;color:#ffffffb3;font-size:.7rem;text-shadow:0 1px 2px oklch(0% 0 0 / .6)}.frame-credit i{font-style:italic}.frame-hero{margin-top:var(--space-2xl);padding:clamp(18px,5.5vw,76px) clamp(18px,8vw,120px) clamp(30px,6vw,84px)}.features{width:var(--page);margin:0 auto;padding:var(--space-3xl) 0 var(--space-2xl)}.features-body{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:var(--space-xl);align-items:start}.features-list{display:grid;gap:4px}.features-list button{position:relative;display:grid;gap:4px;padding:14px 16px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink-3);font:inherit;text-align:left;cursor:pointer;transition:color var(--dur-short) var(--ease-out)}.features-list button strong{position:relative;color:var(--ink-2);font-size:var(--text-lg);font-weight:600}.features-list button span{position:relative;font-size:var(--text-sm);line-height:1.5}.features-list button.is-active{color:var(--ink-2)}.features-list button.is-active strong,.features-list button:hover strong{color:var(--ink)}.features-bg{position:absolute;inset:0;border-radius:var(--radius-md);background:var(--paper-2)}.frame-feature{padding:clamp(16px,4vw,52px)}.padlab,.values{width:var(--page);margin:0 auto;padding:var(--space-3xl) 0}.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs);margin-bottom:var(--space-lg)}.chips button{display:inline-flex;align-items:center;gap:8px;min-height:2.6rem;padding:0 1rem;border:0;border-radius:var(--radius-md);background:none;color:var(--ink-2);font:500 var(--text-sm) / 1 var(--font-body);white-space:nowrap;cursor:pointer;transition:background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}.chips button:hover{color:var(--ink)}.chips button.is-active{background:var(--paper-2);color:var(--ink)}.chips button svg{color:var(--accent)}.frame-values{display:grid;place-items:center;min-height:22rem;padding:var(--space-2xl) var(--space-lg)}.values-card{max-width:30rem;padding:26px 28px;border-radius:var(--radius-lg);background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 20px 50px #00000040;text-align:left}.values-card h3{font:400 1.9rem / 1.1 var(--font-display)}.values-card p{margin-top:var(--space-xs);color:var(--ink-2);font-size:var(--text-sm)}.signup{position:relative;display:flex;gap:6px;width:min(30rem,100%);padding:6px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 10px 30px #131b2614;transition:box-shadow var(--dur-short) var(--ease-out)}.signup:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-soft)}.signup[data-state=error]{box-shadow:inset 0 0 0 1.5px var(--error)}.signup input{flex:1;min-width:0;padding:0 .9rem;border:0;background:transparent;color:var(--ink);font:inherit}.signup input::placeholder{color:var(--ink-3)}.signup input:focus-visible{outline:none}.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.signup button{display:inline-grid;place-items:center;min-width:8.5rem;min-height:2.8rem;padding:0 1.2rem;border:0;border-radius:10px;background:var(--ink);color:var(--paper);font:600 var(--text-sm) / 1 var(--font-body);white-space:nowrap;cursor:pointer;transition:background var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out)}.signup button:hover{background:var(--ink-hover)}.signup button:active{transform:scale(.97)}.signup button:disabled{cursor:progress;opacity:.8}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.8;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.signup-msg{position:absolute;left:.9rem;right:.9rem;top:calc(100% + 8px);color:var(--error);font-size:var(--text-sm);text-align:left}.signup-done{display:flex;align-items:flex-start;gap:12px;width:min(30rem,100%);padding:16px 18px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px #007e4659;box-shadow:inset 0 0 0 1px oklch(52% .13 155 / .35);color:var(--ink-2);font-size:var(--text-sm);text-align:left}.signup-done strong{color:var(--ink)}.signup-done b{color:var(--success)}.done-check{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--success);color:#fff;font-weight:800}.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-2xl);width:var(--page);margin:0 auto;padding:var(--space-3xl) 0}.faq .section-head{margin:0;align-content:start}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item h3{font:inherit}.faq-item button{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);width:100%;padding:20px 0;border:0;background:none;color:var(--ink);font:600 var(--text-lg) / 1.35 var(--font-body);text-align:left;cursor:pointer}.faq-sign{position:relative;width:12px;height:12px;flex:none}.faq-sign:before,.faq-sign:after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;border-radius:2px;background:var(--ink-3);transition:transform var(--dur-short) var(--ease-out)}.faq-sign:after{transform:rotate(90deg)}.faq-item.open .faq-sign:after{transform:rotate(0)}.faq-answer{overflow:hidden}.faq-answer p{padding-bottom:20px;max-width:40rem;color:var(--ink-2)}.beta{display:grid;justify-items:center;gap:var(--space-md);width:var(--page);margin:0 auto;padding:var(--space-2xl) 0 var(--space-3xl);text-align:center}.beta h2{font:400 var(--text-2xl) / 1.05 var(--font-display)}.beta>p{max-width:32rem;color:var(--ink-2)}.beta .signup,.beta .signup-done{margin-top:var(--space-sm)}.foot{position:relative;overflow:hidden;background:var(--night);color:var(--night-ink)}.foot-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-2xl) var(--space-xl);width:var(--page);margin:0 auto;padding:var(--space-3xl) 0 var(--space-xl)}.foot-name{font:400 clamp(2.6rem,2rem + 2.4vw,3.8rem) / 1 var(--font-display)}.foot-tagline{max-width:26rem;margin:var(--space-sm) 0 var(--space-lg);color:var(--night-ink-2)}.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}.foot-cols div{display:grid;align-content:start;gap:10px}.foot-cols h2{margin-bottom:4px;font:600 var(--text-sm) / 1.2 var(--font-body);color:var(--night-ink)}.foot-cols a{display:inline-flex;align-items:center;gap:6px;color:var(--night-ink-2);font-size:var(--text-sm);text-decoration:none}.foot-cols a:hover{color:#fff}.foot-made{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--space-lg);padding-top:var(--space-lg);border-top:1px solid oklch(100% 0 0 / .1);color:var(--night-ink-2);font-size:var(--text-sm)}.foot-made a{display:inline-flex;align-items:center;gap:6px;color:var(--night-ink);font-weight:600;text-decoration:none}.foot-made img{border-radius:5px;image-rendering:pixelated}.foot-made span{margin-left:auto}.foot-mark{position:absolute;right:-90px;bottom:-110px;width:380px;opacity:.08;filter:grayscale(1) brightness(2);pointer-events:none}.pad-pointer{position:fixed;left:0;top:0;z-index:60;pointer-events:none;opacity:0;translate:-2.4px -2.4px;filter:drop-shadow(0 2px 4px oklch(0% 0 0 / .5));transition:opacity var(--dur-short) var(--ease-out)}.pad-pointer.hand{translate:-11.5px -2px}.pad-pointer.glide{transition:opacity var(--dur-short) var(--ease-out),transform .24s var(--ease-out)}.pad-pointer.press svg{transform:scale(.84)}.pad-pointer svg{transition:transform var(--dur-micro) var(--ease-out);transform-origin:2.4px 2.4px}.pad-mode :focus-visible,.pad-mode :focus{outline:3px solid var(--accent);outline-offset:3px}@media(max-width:900px){.nav-links,.nav-pad{display:none}.nav-end{margin-left:auto}.features-body,.faq,.padlab-stage,.foot-inner{grid-template-columns:minmax(0,1fr)}.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.frame-credit{display:none}}@media(max-width:560px){.nav-inner{height:64px}.hero{padding-top:7.5rem}.hero-sub br{display:none}.hero-actions .btn{flex:1 1 100%}.signup{flex-direction:column}.signup input{min-height:2.8rem}.signup button{width:100%}.foot-cols{grid-template-columns:minmax(0,1fr)}.foot-made span{margin-left:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:.1s!important}}.mock{position:relative;aspect-ratio:816 / 459;overflow:hidden;border-radius:clamp(6px,.9vw,12px);background:var(--m-bg)}.mock-screen{position:absolute;left:0;top:0;transform-origin:0 0;font-family:Segoe UI,system-ui,sans-serif;color:var(--m-text);background:var(--m-bg);overflow:hidden}.m-tabs{position:absolute;left:0;top:0;width:816px;height:34px;display:flex;align-items:flex-end;gap:2px;padding-left:8px;background:var(--m-strip)}.m-tab{display:flex;align-items:center;gap:8px;width:170px;height:28px;padding:0 10px;border-radius:8px 8px 0 0;color:#c9c9c9;font-size:12px}.m-tab.on{background:var(--m-surface);color:#fff}.m-tab i{width:14px;height:14px;border-radius:4px;background:var(--m-accent);flex:none}.m-tab b{margin-left:auto;color:var(--m-dim);font-weight:400}.m-plus{width:28px;height:28px;display:grid;place-items:center;color:#c9c9c9;font-size:18px}.m-bar{position:absolute;left:0;top:34px;width:816px;height:40px;display:flex;align-items:center;gap:6px;padding:0 8px;background:var(--m-surface)}.m-ib{width:28px;height:28px;display:grid;place-items:center;color:#d0d0d0;font-size:15px}.m-shield{color:var(--m-accent)}.m-addr{display:flex;align-items:center;width:590px;height:28px;padding:0 12px;border-radius:14px;border:1px solid #3a3a3a;background:var(--m-bg);font-size:13px}.m-dim{color:var(--m-dim)}.m-caret{display:inline-block;width:1.5px;height:15px;margin-left:1px;background:var(--m-accent)}.m-page{position:absolute;left:0;top:74px;width:816px;height:385px;overflow:hidden}.m-home{background:radial-gradient(600px 300px at 50% -10%,rgba(43,149,255,.16),transparent),var(--m-bg)}.m-logo{position:absolute;left:0;right:0;top:46px;display:flex;justify-content:center;align-items:center;gap:10px;font:800 26px/1 Segoe UI,system-ui,sans-serif;letter-spacing:-.02em}.m-logo b{color:var(--m-accent)}.m-logo img{width:34px;height:34px;padding:3px;border-radius:10px;background:#f4f6fa}.m-search{position:absolute;left:178px;top:104px;width:460px;height:42px;display:flex;align-items:center;padding:0 14px;border-radius:10px;border:1px solid #3a3a3a;background:var(--m-surface);color:var(--m-dim);font-size:14px}.m-tile{position:absolute;top:176px;width:80px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:10px;background:#2b2b2bcc;color:#ddd;font-size:11px}.m-tile.hover{background:#383838}.m-tile i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#fff;font: 800 15px/1 Segoe UI,system-ui,sans-serif}.m-video{background:#0f0f0f}.m-player{position:absolute;left:18px;top:14px;width:520px;height:292px;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,#1d3c6e,#0b1a33 60%,#12345e)}.m-play{position:absolute;left:232px;top:118px;width:56px;height:56px;border-radius:50%;background:#ffffffe6}.m-play:after{content:"";position:absolute;left:22px;top:16px;border-left:18px solid #111;border-top:12px solid transparent;border-bottom:12px solid transparent}.m-prog{position:absolute;left:0;bottom:0;height:4px;background:#ff3b3b}.m-line{position:absolute;left:18px;border-radius:6px;background:#2c2c2c}.m-thumb{position:absolute;left:556px;width:240px;height:74px;display:flex;gap:8px}.m-thumb i{width:120px;height:74px;border-radius:8px;flex:none}.m-thumb span{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:6px}.m-thumb em{height:9px;border-radius:5px;background:#2c2c2c}.m-focus{position:absolute;border:3px solid var(--m-accent);box-shadow:0 0 0 4px #2b95ff40,0 0 24px #2b95ff73;pointer-events:none}.m-keyboard{position:absolute;left:118px;top:283px;width:580px;height:176px;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px 14px 0 0;background:#202020f7;box-shadow:0 -10px 40px #00000080}.m-row{display:flex;justify-content:center;gap:6px}.m-key{width:48px;height:30px;display:grid;place-items:center;border-radius:6px;background:#3a3a3a;color:#eee;font-size:14px;font-weight:600}.m-key.wide{width:110px}.m-key.go{background:var(--m-accent);color:#fff}.m-key.on{background:#fff;color:#111;transform:scale(1.08)}.m-ripple{position:absolute;border:3px solid var(--m-accent);border-radius:50%;translate:-50% -50%}.m-pointer{position:absolute;left:0;top:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));transform-origin:2.4px 2.4px}.m-pointer svg{display:block}.padlab{width:min(1180px,100%);margin:0 auto;padding:var(--space-3xl) var(--space-lg)}.padlab-head{display:grid;gap:var(--space-md);max-width:46rem}.padlab-head p{color:var(--ink-2);font-size:var(--text-lg)}.padlab-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:var(--space-2xl);margin-top:var(--space-2xl);perspective:1200px}.padlab-pad{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 50px 70px oklch(0% 0 0 / .55)) drop-shadow(0 0 80px oklch(66% .18 252 / .12))}.p-body{fill:url(#shell);stroke:#fff9;stroke-width:1.5}.p-well{fill:var(--pad-well)}.p-key,.p-part circle,.p-part path,.p-part rect{fill:var(--pad-key)}.p-part .p-cap{fill:#2d333d}.p-home{fill:var(--accent)}.p-face text{fill:var(--accent-ink);font:800 13px var(--font-body);text-anchor:middle;pointer-events:none}.p-face.a circle{fill:var(--btn-a)}.p-face.b circle{fill:var(--btn-b)}.p-face.x circle{fill:var(--btn-x)}.p-face.y circle{fill:var(--btn-y)}.p-part,.p-face{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-short) var(--ease-out),filter var(--dur-short) var(--ease-out)}.p-face.is-lit{transform:scale(1.2);filter:url(#lit) brightness(1.2)}.p-part.is-lit circle,.p-part.is-lit path,.p-part.is-lit rect{fill:var(--accent)}.p-part.is-lit{filter:url(#lit)}.padlab-legend{list-style:none;margin:0;padding:0;display:grid;gap:4px}.padlab-legend li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);align-items:center;gap:var(--space-sm);padding:10px 14px;border-radius:var(--radius-md);color:var(--ink-3);transition:background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}.padlab-legend li.is-lit{background:#ffffff0d;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}.padlab-key{display:flex;justify-content:center;color:var(--ink-2);font:700 var(--text-sm) / 1 var(--font-display);white-space:nowrap}.padlab-legend strong{display:block;font-weight:600}.padlab-detail{display:block;color:var(--ink-3);font-size:var(--text-sm)}.padlab-legend li.is-lit .padlab-detail{color:var(--ink-2)}.padlab-stage{margin-top:0;padding:clamp(24px,4vw,56px);border-radius:var(--radius-lg);background:radial-gradient(70% 90% at 30% 40%,var(--night-2),var(--night));box-shadow:0 30px 70px var(--shadow)}.padlab-legend li{color:var(--night-ink-2)}.padlab-legend li.is-lit{background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1a;color:var(--night-ink)}.padlab-key{color:var(--night-ink);font-family:var(--font-body)}.padlab-detail{color:#8b939b}.padlab-legend li.is-lit .padlab-detail{color:var(--night-ink-2)}.p-home{fill:var(--accent-bright)}.p-part.is-lit circle,.p-part.is-lit path,.p-part.is-lit rect{fill:var(--accent-bright)}@media(max-width:900px){.padlab-stage{grid-template-columns:minmax(0,1fr)}.padlab-pad{max-width:440px;margin:0 auto}}