:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#170b23;--color-bg-deep:#0c0712;--color-surface:#2b1439e6;--color-surface-soft:#71347d38;--color-border:#ffeaf324;--color-border-strong:#ff52978c;--color-text:#fff9f4;--color-muted:#dbc7db;--color-primary:#f93f83;--color-primary-bright:#ff78a8;--color-primary-ink:#290717;--color-secondary:#8e55b7;--color-gold:#ffd35a;--color-teal:#28baa4;--shadow-panel:#07020c6b;background:var(--color-bg);color:var(--color-text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:radial-gradient(circle at 5% 5%, #c5367e38, transparent 32rem), radial-gradient(circle at 95% 65%, #37b8a01f, transparent 34rem), var(--color-bg);min-height:100%}body{background-image:radial-gradient(#ffffff17 .75px,#0000 .75px);background-size:18px 18px;min-height:100%;margin:0}button{background:linear-gradient(135deg, var(--color-gold), #ff9f68 58%, var(--color-primary-bright));min-height:3.25rem;color:var(--color-primary-ink);cursor:pointer;font:inherit;letter-spacing:.01em;border:0;border-radius:999px;justify-content:center;align-items:center;gap:.45rem;padding:.8rem 1.25rem;font-weight:850;transition:transform .16s,box-shadow .16s,filter .16s;display:inline-flex;box-shadow:0 .75rem 1.8rem #f93f8333}button:hover:not(:disabled){filter:saturate(1.08)brightness(1.04);transform:translateY(-2px);box-shadow:0 .9rem 2.2rem #f93f834d}button:active:not(:disabled){transform:translateY(0)}button:focus-visible{outline:3px solid var(--color-text);outline-offset:3px}button:disabled{cursor:not-allowed;filter:grayscale(.25);opacity:.5}.app-shell{width:min(54rem,100%);padding:max(.75rem, env(safe-area-inset-top)) .75rem max(1.5rem, env(safe-area-inset-bottom));margin:0 auto}.hero{isolation:isolate;background:#3b194a;border:1px solid #ffddea2e;border-radius:2rem;min-height:clamp(23rem,72vw,29rem);position:relative;overflow:hidden;box-shadow:0 1.4rem 4rem #08020e7a}.hero:before,.hero:after{content:"✦";z-index:3;color:var(--color-gold);text-shadow:0 0 1.25rem #ffd35a80;line-height:1;position:absolute}.hero:before{font-size:1.2rem;top:1.35rem;left:1.35rem}.hero:after{color:#ffb5cd;font-size:.7rem;top:2.6rem;left:3.4rem}.hero-portrait{object-fit:cover;object-position:center 27%;width:100%;height:100%;display:block;position:absolute;inset:0}.hero-shade{z-index:1;background:linear-gradient(#0000 30%,#17071d26 46%,#110519f0 100%),linear-gradient(90deg,#1b08244d,#0000 55%);position:absolute;inset:0}.hero-copy{z-index:2;position:absolute;bottom:1.45rem;left:1.4rem;right:1.4rem}.eyebrow,.section-kicker{color:var(--color-gold);letter-spacing:.16em;text-transform:uppercase;margin:0 0 .38rem;font-size:.7rem;font-weight:900}h1,h2,p{margin-top:0}h1,h2{font-family:Georgia,Times New Roman,serif}h1{letter-spacing:-.065em;text-shadow:0 .2rem 1rem #0c031480;max-width:7ch;margin-bottom:.35rem;font-size:clamp(3.2rem,15vw,6.5rem);font-style:italic;font-weight:700;line-height:.82}.hero-intro{color:#f1dfe9;margin:0;font-size:clamp(.95rem,3.8vw,1.2rem);font-weight:600}.panel{border:1px solid var(--color-border);box-shadow:0 1rem 3rem var(--shadow-panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(145deg,#3e1c4bf0,#1e0e2bf5);border-radius:1.65rem;margin:.9rem 0;padding:1rem;position:relative;overflow:hidden}.scanner-panel{border-color:#ff78a842}.section-title-row{z-index:2;justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex;position:relative}.section-heading{align-items:center;gap:.75rem;min-width:0;display:flex}.step-number{width:2.5rem;height:2.5rem;color:var(--color-gold);background:#ffd35a1a;border:1px solid #ffd35a6b;border-radius:50%;flex:none;place-items:center;font-size:.75rem;font-weight:900;display:grid}.section-kicker{color:var(--color-primary-bright);margin-bottom:.15rem;font-size:.58rem}h2{letter-spacing:-.025em;margin-bottom:0;font-size:clamp(1.35rem,5vw,1.8rem);line-height:1.05}.status{z-index:2;min-height:1.35rem;color:var(--color-muted);margin:.85rem 0 0;font-size:.9rem;line-height:1.45;position:relative}.badge{border:1px solid var(--color-border-strong);color:#ffacc9;letter-spacing:.04em;text-align:center;text-transform:uppercase;border-radius:999px;flex:none;max-width:9rem;padding:.4rem .65rem;font-size:.62rem;font-weight:900}.scan-instruction{background:#28baa414;border:1px solid #28baa43d;border-radius:.9rem;align-items:center;gap:.65rem;margin:.9rem 0 .75rem;padding:.55rem .7rem;display:flex}.scan-instruction img{background:#fff;border-radius:.25rem;flex:none;width:2rem;height:2rem;padding:.12rem}.scan-instruction p{color:#dff8f3;margin:0;font-size:.78rem;font-weight:650}.viewport-wrap{aspect-ratio:1;background:radial-gradient(circle, #753f8780, transparent 60%), var(--color-bg-deep);border:1px solid #ffffff14;border-radius:1.25rem;margin:0;position:relative;overflow:hidden}.camera-placeholder{color:#fff9f47a;letter-spacing:.12em;text-transform:uppercase;place-items:center;font-size:.75rem;font-weight:800;display:grid;position:absolute;inset:0}video{z-index:1;object-fit:cover;width:100%;height:100%;display:block;position:relative}.playback-button-stage{aspect-ratio:16/9;background:radial-gradient(circle,#f93f8340,#0000 52%),linear-gradient(145deg,#552767d9,#100818e6);place-items:center;margin-top:1rem;display:grid}.playback-button-stage:before{content:"♪";color:#ffd35a29;font-family:Georgia,serif;font-size:9rem;position:absolute}.playback-button-stage .playback-toggle-actions{z-index:1;width:min(20rem,100% - 2rem);margin-top:0;position:relative}.scan-frame{pointer-events:none;z-index:2;border-radius:1.1rem;position:absolute;inset:12%}.scan-frame:before{content:"";border-radius:inherit;position:absolute;inset:0;box-shadow:0 0 0 999px #0a031252}.scan-frame:after{content:"";background:linear-gradient(90deg, transparent, var(--color-primary-bright), transparent);height:2px;box-shadow:0 0 1rem var(--color-primary);border-radius:999px;animation:2.4s ease-in-out infinite scan;position:absolute;top:50%;left:5%;right:5%}.scan-frame span{border-color:var(--color-gold);filter:drop-shadow(0 0 .35rem #ffd35a59);border-style:solid;width:3rem;height:3rem;position:absolute}.scan-frame span:first-child{border-width:.25rem 0 0 .25rem;border-top-left-radius:1rem;top:0;left:0}.scan-frame span:nth-child(2){border-width:.25rem .25rem 0 0;border-top-right-radius:1rem;top:0;right:0}.scan-frame span:nth-child(3){border-width:0 .25rem .25rem 0;border-bottom-right-radius:1rem;bottom:0;right:0}.scan-frame span:nth-child(4){border-width:0 0 .25rem .25rem;border-bottom-left-radius:1rem;bottom:0;left:0}.spotify-panel{background:linear-gradient(135deg,#1b4f4ead,#2a1237f7 70%);border-color:#28baa440;align-items:stretch;min-height:17rem;display:flex}.spotify-art{opacity:.26;object-fit:cover;width:16rem;height:16rem;position:absolute;bottom:-3.2rem;right:-3.8rem;transform:rotate(8deg)}.spotify-content{z-index:1;flex-direction:column;width:100%;display:flex;position:relative}.spotify-panel .status{max-width:31rem}.controls{grid-template-columns:1fr;gap:.65rem;display:grid}.controls.spotify-setup-actions,.controls.playback-toggle-actions,.controls.install-actions{margin-top:1rem}.controls.spotify-setup-actions{width:min(20rem,100%);padding-top:1rem}@keyframes scan{0%,to{opacity:.35;transform:translateY(-5.5rem)}50%{opacity:1;transform:translateY(5.5rem)}}@media (width>=38rem){.app-shell{padding-inline:1.25rem}.hero{min-height:25rem}.hero-portrait{object-position:center 25%;width:64%;left:auto}.hero-shade{background:linear-gradient(90deg,#2d123d 2%,#2d123deb 34%,#2d123d14 72%),linear-gradient(#0000 55%,#100517c2)}.hero-copy{inset:50% auto auto clamp(2rem,6vw,3.5rem);transform:translateY(-45%)}h1{font-size:clamp(4.5rem,11vw,6.5rem)}.panel{padding:1.25rem}.scanner-panel .viewport-wrap{aspect-ratio:16/10}.spotify-art{opacity:.42;width:18rem;height:18rem;bottom:-4.5rem;right:-1rem}.spotify-content{width:72%}}@media (prefers-reduced-motion:reduce){button{transition:none}.scan-frame:after{animation:none}}