/* Design parser tokens: Interactions:** Every interactive element input fields IntersectionObserver with `threshold: 0.3` */
:root{--parchment:#f5e6c8;--ink:#3d2a14;--coral:#e84545;--marigold:#f5a623;--teal:#2ec4b6;--navy:#1b2845;--rose:#c97b84;--cream:#efe0c3;--grid:#dbc8a0;--gold:#c9a96e;--accent:#f5a623;--rx:0deg;--ry:0deg}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--parchment);color:var(--ink);font-family:Lexend,Inter,Arial,sans-serif}body{cursor:grab}body.dragging{cursor:grabbing}.strip{display:flex;flex-direction:row;width:800vw;height:100vh;will-change:transform}.panel{position:relative;flex:0 0 100vw;width:100vw;height:100vh;display:grid;place-items:center;overflow:hidden;border-right:5px solid var(--ink);background:var(--parchment)}.halftone:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--ink) 1px,transparent 1px);background-size:6px 6px;opacity:.08;pointer-events:none}.grid-field{position:absolute;inset:6vh 5vw;background-image:linear-gradient(90deg,transparent calc(10% - 1px),var(--grid) 10%),linear-gradient(0deg,transparent calc(10% - 1px),var(--grid) 10%);background-size:10% 10%;opacity:.42}.grid-field:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(201,169,110,.55),transparent 17%)}h1,h2{font-family:Bungee,"Arial Black",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;margin:0;line-height:.9}h1{font-size:clamp(3rem,8vw,7rem);text-shadow:4px 4px 0 var(--marigold),8px 8px 0 var(--ink);-webkit-text-stroke:2px var(--ink);color:var(--parchment)}h2{font-size:clamp(3rem,8vw,7rem);text-shadow:4px 4px 0 var(--accent);-webkit-text-stroke:1px var(--ink)}.kicker{font-family:"Archivo Black",Impact,sans-serif;letter-spacing:.12em;font-size:clamp(.8rem,1.4vw,1.1rem);margin:0;text-transform:uppercase}.speed-lines{position:absolute;inset:-25%;background:conic-gradient(from 0deg at 50% 50%,transparent 0 5deg,rgba(61,42,20,.08) 5deg 9deg);animation:spinBack 28s linear infinite}.splash-card,.meter-card,.verdict-wall,.tune-board,.speech-bubble,.tone-input,.boom-button{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out}.splash-card{position:relative;z-index:2;width:min(1120px,90vw);display:grid;gap:1.4rem;justify-items:center;text-align:center;padding:4vh 3vw}.speech-bubble{position:relative;background:var(--parchment);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:clamp(1rem,2vw,2rem);font-weight:600;font-size:clamp(1rem,1.8vw,1.45rem);line-height:1.35}.speech-bubble:after{content:"";position:absolute;left:12%;bottom:-24px;border-top:24px solid var(--ink);border-right:25px solid transparent}.hero-bubble{max-width:760px;background:var(--marigold)}.tone-input{width:min(760px,88vw);min-height:112px;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--coral);background:#fff8ea;color:var(--ink);font:600 clamp(1rem,1.4vw,1.25rem)/1.45 Lexend,Arial,sans-serif;padding:1.1rem;resize:none;outline:none}.boom-button{font-family:Bungee,"Arial Black",Impact,sans-serif;font-size:clamp(1rem,2vw,1.5rem);letter-spacing:.06em;border:4px solid var(--ink);background:var(--teal);color:var(--ink);padding:.8rem 1.8rem;box-shadow:7px 7px 0 var(--ink);cursor:pointer}.boom-button:active{translate:4px 4px;box-shadow:3px 3px 0 var(--ink)}.tone-panel{--accent:var(--navy)}.formality{--accent:#1b2845;background:linear-gradient(135deg,#f5e6c8 0%,#efe0c3 100%)}.warmth{--accent:#f5a623}.assertiveness{--accent:#e84545}.clarity{--accent:#2ec4b6}.emotion{--accent:#c97b84}.meter-card{position:relative;z-index:3;width:min(900px,88vw);min-height:72vh;display:grid;place-items:center;gap:1rem;text-align:center;border:5px solid var(--ink);background:rgba(245,230,200,.88);box-shadow:14px 14px 0 var(--accent);padding:clamp(1.2rem,3vw,3rem)}.gauge{--score:0;position:relative;width:clamp(250px,36vw,460px);aspect-ratio:1;border:5px solid var(--ink);border-radius:50%;background:var(--parchment);overflow:hidden}.gauge:before{content:"";position:absolute;inset:8%;border-radius:50%;border:2px solid var(--grid);background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(219,200,160,.65) 9% calc(9% + 1px),transparent calc(9% + 1px) 10%)}.gauge-fill{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 270deg,var(--accent) 0deg, var(--accent) calc(var(--score)*1.8deg), transparent calc(var(--score)*1.8deg) 360deg);clip-path:polygon(0 50%,100% 50%,100% 0,0 0);transition:background .8s cubic-bezier(.34,1.56,.64,1)}.needle{position:absolute;left:calc(50% - 4px);bottom:50%;width:8px;height:43%;background:var(--ink);border-radius:8px;transform-origin:bottom center;transform:rotate(calc(-90deg + var(--score)*1.8deg));transition:transform .8s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 0 2px var(--parchment)}.needle:after{content:"";position:absolute;left:-8px;bottom:-12px;width:24px;height:24px;border-radius:50%;background:var(--ink)}.score{position:absolute;inset:0;display:grid;place-items:center;font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(2rem,5vw,4rem);z-index:2;text-shadow:3px 3px 0 #fff}.panel-copy{max-width:760px;margin:0;font-size:clamp(.95rem,1.5vw,1.2rem);line-height:1.65;letter-spacing:.01em}.verdict-panel{background:linear-gradient(135deg,#f5e6c8,#efe0c3)}.verdict-wall{position:relative;z-index:2;width:min(980px,92vw);padding:2rem;border:5px solid var(--ink);background:rgba(245,230,200,.9);box-shadow:15px 15px 0 var(--navy);transform:perspective(1200px) rotateY(-3deg) rotateX(var(--rx,0deg))}.verdict-wall h2{text-align:center;font-size:clamp(2.2rem,6vw,5rem);margin-bottom:1rem;--accent:var(--rose)}.verdict-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(120px,1fr));gap:1rem}.verdict-cell{border:4px solid var(--ink);background:#fff8ea;display:grid;place-items:center;text-align:center;box-shadow:6px 6px 0 var(--ink);font-family:"Archivo Black",Impact,sans-serif}.verdict-cell span{font-family:Lexend,Arial,sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.08em}.verdict-cell strong{font-size:clamp(1.8rem,4vw,3.2rem)}.v-formality{grid-area:1/2;background:#1b284522}.v-warmth{grid-area:2/1;background:#f5a62333}.v-assertiveness{grid-area:2/3;background:#e8454533}.v-clarity{grid-area:3/1;background:#2ec4b633}.v-emotion{grid-area:3/3;background:#c97b8433}.final-verdict{grid-area:2/2;display:grid;place-items:center;text-align:center;background:var(--marigold);font-family:Bungee,"Arial Black",Impact,sans-serif}.final-verdict span{font-family:Lexend,Arial,sans-serif;font-size:.85rem}.final-verdict b{font-size:clamp(1.1rem,2.4vw,2rem)}.tune-board{position:relative;z-index:2;width:min(1060px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center;border:5px solid var(--ink);background:rgba(245,230,200,.92);box-shadow:15px 15px 0 var(--gold);padding:clamp(1rem,3vw,3rem)}.tune-board h2{grid-column:1/-1;--accent:var(--teal)}.faders{display:grid;gap:1rem}.faders label{display:grid;gap:.45rem;font-family:Bungee,"Arial Black",Impact,sans-serif;letter-spacing:.06em}input[type=range]{appearance:none;width:100%;height:24px;border:4px solid var(--ink);background:repeating-linear-gradient(90deg,var(--grid) 0 9%,var(--ink) 9% calc(9% + 2px),var(--grid) calc(9% + 2px) 10%);box-shadow:5px 5px 0 var(--ink);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:34px;height:46px;border:4px solid var(--ink);background:var(--coral);box-shadow:4px 4px 0 var(--ink)}input[type=range]::-moz-range-thumb{width:34px;height:46px;border:4px solid var(--ink);border-radius:0;background:var(--coral);box-shadow:4px 4px 0 var(--ink)}.retuned{min-height:170px;background:#fff8ea}.progress{position:fixed;left:0;right:0;bottom:0;height:16px;display:grid;grid-template-columns:repeat(8,1fr);z-index:20;border-top:4px solid var(--ink);background:var(--ink)}.progress i{position:absolute;left:0;top:0;bottom:0;width:12.5%;background:#fff;mix-blend-mode:overlay;transition:transform .25s ease}.progress span{position:relative;border-right:3px solid var(--ink)}.progress span:nth-child(2){background:#f5e6c8}.progress span:nth-child(3){background:#1b2845}.progress span:nth-child(4){background:#f5a623}.progress span:nth-child(5){background:#e84545}.progress span:nth-child(6){background:#2ec4b6}.progress span:nth-child(7){background:#c97b84}.progress span:nth-child(8){background:#c9a96e}.progress span:nth-child(9){background:#3d2a14}.progress span:after{content:"";position:absolute;right:-8px;top:-10px;width:12px;height:12px;border:3px solid var(--ink);border-radius:50%;background:inherit;animation:pulse 1.2s infinite}@keyframes pulse{50%{transform:scale(1.35);opacity:.65}}@keyframes spinBack{to{transform:rotate(-1turn)}}.panel:not(.is-active) .meter-card,.panel:not(.is-active) .verdict-wall,.panel:not(.is-active) .tune-board{opacity:.5;transform:perspective(800px) translateY(26px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}.panel.is-active .meter-card,.panel.is-active .verdict-wall,.panel.is-active .tune-board{animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both}@keyframes popIn{from{opacity:.15;transform:perspective(800px) translateY(36px) scale(.94)}to{opacity:1;transform:perspective(800px) translateY(0) scale(1)}}@media(max-width:760px){.meter-card{min-height:76vh}.tune-board{grid-template-columns:1fr}.verdict-grid{grid-template-rows:repeat(3,100px);gap:.55rem}.speech-bubble{box-shadow:5px 5px 0 var(--ink)}.grid-field{inset:4vh 3vw}.panel-copy{font-size:.9rem}}