@keyframes preview-spin{to{transform:rotate(360deg)}}@keyframes mockIn{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}@keyframes mockCaret{50%{opacity:0}}@keyframes mockShimmer{to{background-position:-200%0}}@keyframes mockScan{0%{transform:translateY(-42px)}to{transform:translateY(150px)}}@keyframes mockDot{to{opacity:1;transform:scale(1)}}@keyframes mockCheck{0%{transform:scale(.6)}60%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes mockPulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 35%,transparent),0 10px 28px rgba(12,30,24,.12)}}@keyframes mockFace{0%{font-family:Georgia,"Times New Roman",serif;font-weight:700}25%{font-family:ui-sans-serif,system-ui,sans-serif;font-weight:300}50%{font-family:ui-monospace,Consolas,monospace;font-weight:600}75%{font-family:"Trebuchet MS",sans-serif;font-weight:800;font-style:italic}}@keyframes preview-verdict-pulse{0%,to{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px rgba(222,255,110,.18)}}@keyframes hookPop{0%{opacity:0;transform:scale(.55) rotate(-7deg)}to{opacity:1;transform:none}}@keyframes hookRise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes hookGrow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes hookPulse{0%,to{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--c)}50%{box-shadow:0 0 0 3px var(--surface),0 0 0 9px color-mix(in srgb,var(--c) 35%,transparent)}}@keyframes stageDrift{0%{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(-2%)}}@keyframes stageFlow{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes stageSweep{0%{transform:translateY(-100%);opacity:1}to{transform:translateY(340%);opacity:0}}@keyframes stageRec{50%{opacity:.35}}@keyframes sampleDraw{to{stroke-dashoffset:0}}@keyframes sampleType{to{width:100%}}@keyframes sampleGrow{to{transform:scaleY(1)}}@keyframes cubeSpin{to{transform:rotateX(-25deg) rotateY(390deg)}}@keyframes couldFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 80%,transparent)}to{box-shadow:0 0 0 18px transparent}}@keyframes compFill{to{width:var(--w)}}@keyframes ringFill{to{stroke-dasharray:94 100}}@keyframes copyPulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes a11yOn{to{background:var(--brand);transform:scale(1.12)}}@keyframes a11yWarn{to{background:#e8a800;transform:scale(1.12)}}@keyframes couldBreathe{0%,to{font-weight:200}50%{font-weight:850}}@keyframes pgSpin{to{transform:rotate(360deg)}}@keyframes pgFill{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes hintBounce{0%,to{transform:translateY(-2px)}50%{transform:translateY(4px)}}@keyframes eqBar{0%,to{height:4px}50%{height:16px}}.preview-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,15,11,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}.preview-modal-overlay.is-open{opacity:1;pointer-events:auto}.preview-modal{position:relative;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;padding:32px 28px 28px;background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(12,30,24,.08),0 32px 64px rgba(0,0,0,.35);font-family:var(--font-body);transform:translateY(18px) scale(.97);transition:transform .4s var(--ease-spring-fallback)}@supports (transition-timing-function:linear(0,1)){.preview-modal{transition-timing-function:var(--ease-spring)}}.preview-modal-overlay.is-open .preview-modal{transform:translateY(0) scale(1)}.preview-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:0;background:0 0;color:var(--ink-faint);cursor:pointer;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}.preview-modal-close:hover{background:var(--line);color:var(--ink)}.preview-modal-close svg{width:16px;height:16px;display:block}.preview-modal-loading{display:none;text-align:center;padding:24px 4px}.preview-modal-loading.is-visible,.preview-modal-result.is-visible{display:block}.preview-modal-spinner{width:36px;height:36px;margin:0 auto 18px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:preview-spin .8s linear infinite}.preview-modal-loading p{margin:0;font-size:15px;color:var(--ink-soft)}.mock-run{max-width:340px;margin:4px auto 18px;text-align:left;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:0 10px 28px rgba(12,30,24,.12);animation:mockIn .5s var(--ease-out) both}.mock-chrome{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--line) 35%,var(--surface))}.mock-chrome>i{width:8px;height:8px;border-radius:50%;background:var(--line)}.mock-url{flex:1;margin-left:6px;padding:3px 9px;border-radius:99px;background:var(--surface);font:11px/1.4 var(--font-mono, ui-monospace, monospace);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mock-url b{font-weight:500}.mock-url em{display:inline-block;width:1px;height:11px;margin-left:1px;vertical-align:-1px;background:var(--brand);animation:mockCaret .9s steps(1) infinite}.mock-page{position:relative;height:150px;padding:14px;overflow:hidden}.mock-skel{height:8px;margin-bottom:8px;border-radius:4px;background:linear-gradient(90deg,var(--line) 25%,color-mix(in srgb,var(--line) 40%,var(--surface)) 50%,var(--line) 75%);background-size:200% 100%;animation:mockShimmer 1.3s linear infinite}.mock-skel--nav{width:100%;height:6px;margin-bottom:14px;opacity:.7}.mock-skel--title{width:70%;height:14px}.mock-skel--line{width:92%}.mock-skel--short{width:55%}.mock-skel--btn{width:74px;height:20px;margin-top:12px;border-radius:10px}.mock-dots{position:absolute;left:14px;right:14px;bottom:42px;display:flex;gap:6px}.mock-dots s{width:20px;height:20px;border-radius:50%;text-decoration:none;opacity:0;transform:scale(.3);background:var(--brand)}.mock-dots s:nth-child(2){background:color-mix(in srgb,var(--brand) 70%,#fff)}.mock-dots s:nth-child(3){background:color-mix(in srgb,var(--brand) 45%,#fff)}.mock-dots s:nth-child(4){background:var(--ink)}.mock-dots s:nth-child(5){background:color-mix(in srgb,var(--ink) 55%,#fff)}.mock-dots s:nth-child(6){background:color-mix(in srgb,var(--brand) 85%,#000)}.mock-dots s:nth-child(7){background:var(--line)}.mock-dots s:nth-child(8){background:color-mix(in srgb,var(--brand) 25%,#fff)}.mock-run[data-stage="2"] .mock-dots s,.mock-run[data-stage="3"] .mock-dots s,.mock-run[data-stage="4"] .mock-dots s{animation:mockDot .45s var(--ease-out) forwards}.mock-dots s:nth-child(2){animation-delay:.06s!important}.mock-dots s:nth-child(3){animation-delay:.12s!important}.mock-dots s:nth-child(4){animation-delay:.18s!important}.mock-dots s:nth-child(5){animation-delay:.24s!important}.mock-dots s:nth-child(6){animation-delay:.3s!important}.mock-dots s:nth-child(7){animation-delay:.36s!important}.mock-dots s:nth-child(8){animation-delay:.42s!important}.mock-type{position:absolute;left:14px;bottom:10px;display:flex;gap:14px;opacity:0;transition:opacity .3s var(--ease-out)}.mock-type span{font-size:20px;line-height:1;color:var(--ink);animation:mockFace 1.5s steps(1) infinite}.mock-type span:nth-child(2){animation-delay:-.5s}.mock-type span:nth-child(3){animation-delay:-1s}.mock-run[data-stage="3"] .mock-type,.mock-run[data-stage="4"] .mock-type,.preview-swatch.is-copied::after{opacity:1}.mock-scan{position:absolute;left:0;right:0;top:0;height:42px;pointer-events:none;opacity:0;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--brand) 22%,transparent) 70%,color-mix(in srgb,var(--brand) 60%,transparent));border-bottom:2px solid var(--brand)}.mock-run[data-stage="0"] .mock-scan,.mock-run[data-stage="1"] .mock-scan,.mock-run[data-stage="2"] .mock-scan,.mock-run[data-stage="3"] .mock-scan{opacity:1;animation:mockScan 1.25s ease-in-out infinite alternate}.mock-steps{list-style:none;margin:0 auto 14px;padding:0;max-width:260px;text-align:left}.mock-steps li{position:relative;padding:4px 0 4px 26px;font-size:13px;color:var(--ink-faint);transition:color .25s var(--ease-out)}.mock-steps li::before{content:"";position:absolute;left:2px;top:6px;width:13px;height:13px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box;transition:background-color .25s,border-color .25s}.mock-steps li.is-active{color:var(--ink);font-weight:600}.mock-steps li.is-active::before{border-color:var(--line);border-top-color:var(--brand);animation:preview-spin .7s linear infinite}.mock-steps li.is-done{color:var(--ink-soft)}.mock-steps li.is-done::before{border-color:var(--brand);background:var(--brand);animation:mockCheck .3s var(--ease-out)}.mock-steps li.is-done::after{content:"";position:absolute;left:6px;top:9px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.preview-modal-loading.is-finishing .mock-run{animation:mockPulse .4s var(--ease-out)}.preview-modal-result{display:none}.preview-modal-shot{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top;border-radius:var(--radius-sm);border:1px solid var(--line);display:block;margin-bottom:18px;background:var(--bg)}.preview-modal-url{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);margin:0 0 4px;word-break:break-all}.preview-modal-result h2{margin:0 0 8px;font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}.preview-modal-description{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink-soft)}.preview-modal-row{margin-bottom:16px}.preview-modal-row-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px}.preview-modal-row-hint{text-transform:none;font-weight:400;letter-spacing:normal;color:var(--ink-faint);font-size:11px}.preview-palette{display:flex;gap:8px;flex-wrap:wrap}.preview-swatch{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);position:relative;cursor:pointer;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}.preview-swatch:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 6px 14px rgba(12,30,24,.18)}.preview-swatch::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4);opacity:0;transition:opacity .15s var(--ease-out)}.preview-badges{display:flex;gap:6px;flex-wrap:wrap}.preview-badge,.preview-verdict{display:inline-flex;align-items:center;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:12px}.preview-badge{padding:4px 10px;background:var(--bg);border:1px solid var(--line);color:var(--ink-soft)}.preview-verdict{margin:2px 0 14px;padding:5px 13px;background:var(--accent);color:var(--brand-dark);font-weight:700;letter-spacing:.01em;animation:preview-verdict-pulse 2.4s ease-in-out infinite}.preview-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin:0 0 18px}.preview-stat{text-align:center;padding:12px 6px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--line)}.preview-stat-num{display:block;font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--brand);letter-spacing:-.01em;line-height:1.1}.preview-stat-label{display:block;margin-top:2px;font-size:10px;color:var(--ink-faint);line-height:1.3}.preview-compare-head{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin:0 0 6px;padding:0 2px}.preview-compare-rows{display:flex;flex-direction:column;gap:8px}.preview-compare-row{display:grid;grid-template-columns:1fr auto 70px auto;align-items:center;gap:10px}.preview-compare-label{font-size:12px;color:var(--ink-soft)}.preview-compare-fetch{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);text-decoration:line-through}.preview-compare-track{height:6px;border-radius:var(--radius-pill);background:var(--line);overflow:hidden}.preview-compare-bar--win{display:block;height:100%;width:0%;border-radius:var(--radius-pill);background:var(--brand)}.preview-compare-num{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--brand);text-align:right;min-width:2.5em}.preview-fonts-flashy{display:flex;flex-direction:column;gap:6px}.preview-font-chip{display:flex;align-items:baseline;gap:12px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--line)}.preview-font-sample{font-size:24px;line-height:1;color:var(--ink)}.preview-font-name{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint)}.preview-highlights{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 18px}.preview-highlight{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--radius-pill);background:var(--accent);color:var(--brand-dark);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.01em}.preview-layers{display:grid;gap:10px}.preview-layer{padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--bg)}.preview-layer.is-quiet{opacity:.72}.preview-layer-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}.preview-layer-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}.preview-layer-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink)}.preview-facts{display:flex;gap:6px;flex-wrap:wrap}.preview-fact{display:inline-flex;padding:3px 9px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--ink)}.preview-locked{display:flex;align-items:center;gap:7px;margin:10px 0 0;padding-top:9px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink-faint)}.preview-locked svg{flex:none;color:var(--brand)}.preview-modal-cta{display:block;width:100%;text-align:center;text-decoration:none;margin-top:20px;padding:14px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:var(--brand-dark);font-family:var(--font-display);font-size:16px;font-weight:700;cursor:pointer;transition:transform .45s var(--ease-spring-fallback),background-color .3s var(--ease-out)}@supports (transition-timing-function:linear(0,1)){.preview-modal-cta{transition-timing-function:var(--ease-spring)}}.preview-modal-cta:hover{background:#f0ff85;transform:scale(1.02)}.preview-modal-cta:active{transform:scale(.98)}.preview-modal-note{text-align:center;margin:10px 0 0;font-size:12px;color:var(--ink-faint)}.hook-head{display:flex;align-items:center;gap:14px;padding-right:36px}.hook-thumb{flex:none;width:96px;height:60px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line);background:var(--bg);transition:transform .35s var(--ease-out)}.hook-thumb:hover{transform:scale(1.8) translateX(24px);box-shadow:0 10px 28px rgba(12,30,24,.3);position:relative;z-index:2}.hook-head-text{min-width:0}.hook-head-text .preview-modal-url{margin:0 0 2px}.hook-head-text h2{margin:0;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hook-section-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 8px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}.hook-section-label span{text-transform:none;letter-spacing:normal;font-weight:400}.hook-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:2px;margin:0 0 10px}.hook-bar button{flex:var(--share, 1)1 0;min-width:4px;border:0;padding:0;transform-origin:left center;animation:hookGrow .7s var(--ease-out) both;animation-delay:calc(var(--i)*20ms);transition:flex-grow .3s var(--ease-out),filter .2s}.hook-bar button.is-hot,.hook-bar button:hover{filter:brightness(1.15) saturate(1.2);flex-grow:calc(var(--share, 1)*2.2)}.hook-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));grid-auto-rows:84px;grid-auto-flow:dense;gap:8px}.hook-bar button,.hook-tile{cursor:pointer;background:var(--c)}.hook-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:1px;padding:8px 9px;border:1px solid rgba(0,0,0,.08);border-radius:12px;text-align:left;color:var(--ink-on);font-family:var(--font-mono);animation:hookPop .5s var(--ease-spring-fallback) both;animation-delay:calc(var(--i)*28ms);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}.hook-tile--lg{grid-column:span 2;grid-row:span 2;padding:12px 13px;border-radius:16px}.hook-tile.is-hot,.hook-tile:focus-visible,.hook-tile:hover{transform:translateY(-3px) scale(1.04);z-index:1;box-shadow:0 12px 26px rgba(12,30,24,.28);outline:0}.hook-tile.is-active{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--c);animation:hookPop .5s var(--ease-spring-fallback) both,hookPulse 2.4s ease-in-out .6s infinite}.hook-tile-hex{font-size:12px;font-weight:700;letter-spacing:.02em}.hook-tile--lg .hook-tile-hex{font-size:16px}.hook-tile-meta{font-size:10px;opacity:.78;line-height:1.3}.hook-tile-wcag{position:absolute;top:7px;right:8px;font-size:9px;font-weight:700;padding:2px 5px;border-radius:99px;background:var(--ink-on);color:var(--c);opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s}.hook-tile:focus-visible .hook-tile-wcag,.hook-tile:hover .hook-tile-wcag{opacity:.92;transform:none}.hook-copied{min-height:18px;margin:8px 0 0;font-family:var(--font-mono);font-size:12px;color:var(--brand);opacity:0;transition:opacity .2s}.hook-copied.is-on{opacity:1}.hook-stage{position:relative;margin:4px 0 0;padding:22px 22px 18px;border-radius:16px;overflow:hidden;background:var(--stage-bg, #fff);color:var(--stage-fg, #111);border:1px solid var(--line);transition:background-color .45s var(--ease-out),color .45s var(--ease-out)}.hook-stage .hook-sample--head{display:block;margin:0 0 8px;line-height:1.08;letter-spacing:-.01em;overflow-wrap:anywhere}.hook-stage .hook-sample--body{display:block;margin:0;font-size:14px;line-height:1.5;opacity:.85;font-weight:400}.hook-stage-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-family:var(--font-mono);font-size:11px}.hook-contrast,.hook-shuffle{border:1px solid currentColor;border-radius:99px}.hook-contrast{padding:3px 8px;opacity:.85}.hook-shuffle{background:0 0;color:inherit;cursor:pointer;font:inherit;font-weight:700;padding:5px 12px;transition:transform .2s var(--ease-out)}.hook-shuffle:hover{transform:scale(1.06) rotate(-1.5deg)}.hook-shuffle:active{transform:scale(.95)}.hook-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:12px 0}.hook-text{flex:1 1 200px;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:14px}.hook-text:focus{outline:2px solid var(--brand);outline-offset:1px}.hook-control{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)}.hook-control input[type=range]{width:110px;accent-color:var(--brand)}.hook-fonts{display:grid;gap:8px}.hook-font{padding:11px 14px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);animation:hookRise .55s var(--ease-out) both;animation-delay:calc(var(--i)*70ms + 200ms);transition:transform .25s var(--ease-out),border-color .25s}.hook-font:hover{transform:translateY(-2px);border-color:var(--brand)}.hook-font-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}.hook-font-name{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink)}.hook-font-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);display:flex;gap:5px;flex-wrap:wrap;align-items:center}.hook-tag,.hook-weight{padding:1px 7px;border-radius:99px}.hook-weight{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:inherit;font-size:11px;cursor:pointer;transition:background-color .15s,color .15s}.hook-weight.is-on,.hook-weight:hover{background:var(--brand);color:#fff;border-color:var(--brand)}.hook-tag{background:var(--accent);color:var(--brand-dark);font-size:10px;font-weight:700}.hook-font .hook-sample{display:block;margin:6px 0 0;color:var(--ink);line-height:1.15;overflow-wrap:anywhere;font-size:var(--hook-size, 34px);font-weight:var(--hook-weight, 400);transition:font-size .2s var(--ease-out),font-weight .25s var(--ease-out),letter-spacing .3s var(--ease-out)}.hook-font:hover .hook-sample{letter-spacing:.02em}@media (max-width:480px){.hook-palette{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));grid-auto-rows:72px}.hook-thumb{width:72px;height:46px}.hook-control input[type=range]{width:90px}}@media (prefers-reduced-motion:reduce){.hook-bar button,.hook-font,.hook-tile,.hook-tile.is-active{animation:none}.hook-font,.hook-sample,.hook-shuffle,.hook-stage,.hook-thumb,.hook-tile{transition:none}}.preview-modal-error{display:none;text-align:center;padding:16px 4px}.preview-modal-error.is-visible{display:block}.preview-modal-error p{margin:0 0 18px;font-size:15px;color:var(--ink-soft)}@media (max-width:480px){.preview-modal{padding:26px 20px 22px}.preview-compare-row{grid-template-columns:1fr auto;row-gap:4px}.preview-compare-track{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.preview-modal-overlay{transition:opacity .15s linear}.preview-modal{transition:none;transform:none}.preview-modal-spinner{animation-duration:1.6s}.mock-run,.mock-skel,.mock-steps li::before,.mock-type span,.mock-url em,.preview-modal-loading.is-finishing .mock-run{animation:none}.mock-scan{display:none}.mock-dots s{opacity:1;transform:none;animation:none!important}.mock-dots s,.mock-type{transition:none}.preview-verdict{animation:none}.preview-swatch{transition:none}}.preview-modal--wide{max-width:860px}.hook-head{margin:0 0 12px}.stage-media{margin:0 0 18px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b1410;box-shadow:0 18px 40px rgba(12,30,24,.22);animation:mockIn .5s var(--ease-out) both}.stage-chrome{display:flex;align-items:center;gap:5px;padding:8px 12px;background:#14201a}.stage-chrome>i{width:8px;height:8px;border-radius:50%;background:#2c3b33}.stage-url,.stage-view{overflow:hidden;background:#0b1410}.stage-url{flex:1;margin-left:8px;padding:3px 10px;border-radius:99px;color:#8fa89a;font:11px/1.4 var(--font-mono, ui-monospace, monospace);white-space:nowrap;text-overflow:ellipsis}.stage-view{position:relative;width:100%;aspect-ratio:3/1}.stage-clip,.stage-shot{width:100%;height:100%;object-fit:cover}.stage-shot{display:block;object-position:top;transform-origin:50%0;animation:stageDrift 14s ease-in-out infinite alternate}.stage-view.has-clip .stage-shot{animation-play-state:paused}.stage-clip{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease-out)}.stage-clip.is-ready{opacity:1}.stage-fallback{display:flex;align-items:center;justify-content:center;height:100%;background:linear-gradient(120deg,var(--g1),var(--g2),var(--g3),var(--g4));background-size:300% 300%;animation:stageFlow 8s ease-in-out infinite}.stage-fallback span{font:700 clamp(22px,5vw,34px)/1 var(--font-display);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}.stage-sweep{position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.2));border-bottom:2px solid var(--accent);animation:stageSweep 1.1s ease-out both}.stage-chip,.stage-dots{position:absolute;bottom:12px;display:flex}.stage-dots{left:12px;gap:6px}.stage-dots s{width:22px;height:22px;border-radius:50%;background:var(--c);text-decoration:none;opacity:0;transform:scale(.3);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 10px rgba(0,0,0,.35);animation:mockDot .45s var(--ease-out) forwards;animation-delay:calc(.35s + var(--i)*.07s)}.stage-chip{right:12px;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;background:rgba(8,16,12,.78);color:#fff;font-size:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.stage-chip[hidden]{display:none}.stage-chip>i{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:var(--accent);animation:preview-spin .8s linear infinite}.stage-chip[data-state=live]>i{border:0;background:#ff4d4d;animation:stageRec 1.2s ease-in-out infinite}.stage-stats{display:flex;background:#14201a}.stage-stats>div{flex:1;padding:10px 12px;text-align:center;border-left:1px solid #22332a}.stage-stats>div:first-child{border-left:0}.sample-stats b,.stage-stats b{font-variant-numeric:tabular-nums}.stage-stats b{display:block;font:700 22px/1.2 var(--font-display);color:var(--accent)}.stage-stats span{font-size:11px;color:#8fa89a;text-transform:uppercase;letter-spacing:.08em}.hook-tag--ok{color:var(--brand)}.sample{margin-top:22px}.sample-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.sample-card{position:relative;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}.sample-card.is-in{opacity:1;transform:none}.sample-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.sample-card h3{margin:0;font:700 13px/1.2 var(--font-display)}.sample-tag{padding:2px 7px;border-radius:99px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--surface))}.sample-stats{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;font-size:12px;color:var(--ink-soft)}.sample-stats b{color:var(--ink)}.sample-curve{display:block;width:100%;height:64px}.sample-curve .grid{stroke:var(--line);stroke-width:1;fill:none}.sample-curve .line{stroke:var(--brand);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:280;stroke-dashoffset:280}.sample-curve .dot{fill:var(--accent);stroke:var(--brand);stroke-width:1.5;opacity:0;transition:opacity .3s .4s}.sample-card.is-in .sample-curve .line{animation:sampleDraw 1.4s var(--ease-out) forwards}.sample-card.is-in .sample-curve .dot{opacity:1}.sample-3d{display:flex;align-items:center;gap:16px;height:64px;perspective:420px}.cube{position:relative;flex:none;width:44px;height:44px;margin-left:8px;transform-style:preserve-3d;transform:rotateX(-25deg) rotateY(30deg);animation:cubeSpin 7s linear infinite}.cube>i{position:absolute;inset:0;border:1.5px solid var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}.cube>i:nth-child(1){transform:translateZ(22px)}.cube>i:nth-child(2){transform:rotateY(90deg) translateZ(22px)}.cube>i:nth-child(3){transform:rotateY(180deg) translateZ(22px)}.cube>i:nth-child(4){transform:rotateY(-90deg) translateZ(22px)}.cube>i:nth-child(5){transform:rotateX(90deg) translateZ(22px)}.cube>i:nth-child(6){transform:rotateX(-90deg) translateZ(22px)}.glsl{margin:0;min-width:0;font:11px/1.55 var(--font-mono, ui-monospace, monospace);color:var(--ink-soft)}.glsl span{display:block;width:0;overflow:hidden;white-space:nowrap}.sample-card.is-in .glsl span{animation:sampleType 1s steps(24) forwards}.sample-card.is-in .glsl span:nth-child(2){animation-delay:.9s}.sample-card.is-in .glsl span:nth-child(3){animation-delay:1.8s}.sample-scale{display:flex;align-items:flex-end;gap:6px;height:84px;padding-top:16px}.sample-scale>i{position:relative;flex:1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(to top,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--accent)));transform:scaleY(0);transform-origin:bottom}.sample-scale b{position:absolute;top:-15px;left:0;right:0;text-align:center;font-size:9px;font-weight:500;color:var(--ink-faint)}.sample-card.is-in .sample-scale>i{animation:sampleGrow .6s var(--ease-out) forwards;animation-delay:calc(var(--i)*.07s)}.sample-tokens{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:64px}.sample-tokens code{padding:4px 8px;border:1px solid var(--line);border-radius:99px;font:11px/1.2 var(--font-mono, ui-monospace, monospace);background:color-mix(in srgb,var(--accent) 18%,var(--surface));opacity:0;transform:scale(.6)}.sample-card.is-in .sample-tokens code{animation:mockDot .4s var(--ease-out) forwards;animation-delay:calc(var(--i)*.12s + .1s)}.hook-cta-bar{position:sticky;bottom:-28px;z-index:3;margin:14px -28px -28px;padding:14px 28px 18px;background:linear-gradient(to top,var(--surface) 78%,transparent)}.hook-cta-bar .preview-modal-cta{margin-top:0}@media (max-width:560px){.sample-grid{grid-template-columns:1fr}.hook-cta-bar{bottom:-22px;margin:12px -20px -22px;padding:12px 20px 16px}.stage-stats b{font-size:18px}.stage-dots s:nth-child(n+6){display:none}}@media (prefers-reduced-motion:reduce){.cube,.glsl span,.stage-chip>i,.stage-fallback,.stage-media,.stage-shot{animation:none}.stage-sweep{display:none}.sample-tokens code,.stage-dots s{opacity:1;transform:none;animation:none}.sample-card{opacity:1;transform:none}.sample-curve .line{stroke-dashoffset:0;animation:none}.sample-scale>i{transform:none;animation:none}.glsl span{width:100%}.sample-card,.stage-clip{transition:none}}.is-scrubbable{cursor:ew-resize;touch-action:pan-y}.hook-wght{font:10px/1 var(--font-mono, ui-monospace, monospace);letter-spacing:.04em;color:var(--brand);padding:3px 6px;border-radius:99px;background:color-mix(in srgb,var(--brand) 10%,var(--surface));font-variant-numeric:tabular-nums}.hook-font .hook-sample,.hook-stage .hook-sample--head{transition:font-weight .12s linear}.hook-stage.is-flash{animation:couldFlash .7s var(--ease-out)}.could-label{margin-top:22px}.could-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.could-card{display:flex;flex-direction:column;gap:8px;text-align:left;cursor:ew-resize;touch-action:pan-y;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;opacity:0;transform:translateY(12px);animation:hookRise .5s var(--ease-out) forwards;animation-delay:calc(var(--i)*.07s);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),translate .2s var(--ease-out)}.could-card:focus-visible,.could-card:hover{border-color:var(--brand);translate:0-3px;box-shadow:0 10px 24px rgba(12,30,24,.14)}.could-card.is-picked{border-color:var(--brand);background:color-mix(in srgb,var(--accent) 22%,var(--surface))}.could-top{display:flex;flex-direction:column;gap:1px}.could-top b{font:700 12px/1.3 var(--font-mono, ui-monospace, monospace)}.could-top em{font-style:normal;font-size:11px;color:var(--ink-faint)}.could-sample{font-size:26px;line-height:1.1;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:font-weight .12s linear}.could-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}.could-try{font-size:11px;color:var(--ink-faint);opacity:0;transition:opacity .2s var(--ease-out)}.could-card:focus-visible .could-try,.could-card:hover .could-try{opacity:1}.sample-card--wide{grid-column:1/-1}.bp,.sample-bp{display:flex;align-items:flex-end}.sample-bp{gap:10px;height:64px}.bp{gap:3px;padding:4px;border:1.5px solid var(--brand);border-radius:6px;background:color-mix(in srgb,var(--brand) 5%,transparent)}.bp--m{width:26px;height:54px}.bp--t{width:52px;height:44px}.bp--d{width:96px;height:34px}.bp>i{flex:1;height:100%;border-radius:2px;background:color-mix(in srgb,var(--brand) 55%,var(--accent));transform:scaleY(0);transform-origin:bottom}.sample-card.is-in .bp>i{animation:sampleGrow .5s var(--ease-out) forwards}.sample-card.is-in .bp>i:nth-child(2){animation-delay:.1s}.sample-card.is-in .bp>i:nth-child(3){animation-delay:.2s}.sample-card.is-in .bp>i:nth-child(4){animation-delay:.3s}.sample-comps,.sample-perf ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}.sample-comps li,.sample-perf li{font-size:12px;color:var(--ink-soft)}.sample-comps li{display:grid;grid-template-columns:74px 1fr 22px;align-items:center;gap:8px}.sample-comps s{height:7px;border-radius:99px;background:var(--line);overflow:hidden;text-decoration:none}.sample-comps s i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--accent))}.sample-comps b{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}.sample-card.is-in .sample-comps s i{animation:compFill .9s var(--ease-out) forwards;animation-delay:calc(var(--i)*.12s)}.sample-perf{display:flex;align-items:center;gap:16px}.sample-perf .ring{position:relative;flex:none;width:72px;height:72px}.sample-perf .ring svg{width:100%;height:100%;transform:rotate(-90deg)}.sample-perf .ring circle{fill:none;stroke-width:3.4}.sample-perf .ring .bg{stroke:var(--line)}.sample-perf .ring .fg{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:0 100}.sample-card.is-in .sample-perf .ring .fg{animation:ringFill 1.3s var(--ease-out) forwards}.sample-perf .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 20px/1 var(--font-display);font-variant-numeric:tabular-nums}.sample-perf ul{gap:4px;flex:1}.sample-perf li{display:flex;justify-content:space-between}.sample-perf li em{font-style:normal;font-weight:700;color:var(--brand)}.sample-brief{margin:0;padding:12px 14px;border-radius:10px;background:#0f1b15;color:#cfe3d6;font:12px/1.6 var(--font-mono, ui-monospace, monospace);white-space:normal}.sample-brief span{display:block;opacity:0;transform:translateY(6px)}.sample-card.is-in .sample-brief span{animation:hookRise .45s var(--ease-out) forwards}.sample-card.is-in .sample-brief span:nth-child(2){animation-delay:.45s}.sample-card.is-in .sample-brief span:nth-child(3){animation-delay:.9s}.sample-card.is-in .sample-brief span:nth-child(4){animation-delay:1.35s}.sample-brief span:last-child::after{content:"";display:inline-block;width:7px;height:13px;margin-left:3px;vertical-align:-2px;background:var(--accent);animation:mockCaret .9s steps(1) infinite}.sample-copy{padding:4px 11px;border-radius:99px;background:var(--accent);color:var(--brand-dark);font-weight:700}.sample-card.is-in .sample-copy{animation:copyPulse 2.2s ease-in-out 1.8s infinite}.sample-detects{margin:16px 0 8px;font-size:12px;color:var(--ink-faint);text-align:center}.sample-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.sample-marquee>div{display:flex;gap:8px;width:max-content;animation:marquee 26s linear infinite}.sample-marquee span{flex:none;padding:5px 12px;border:1px solid var(--line);border-radius:99px;font:12px/1 var(--font-mono, ui-monospace, monospace);color:var(--ink-soft);background:var(--surface)}@media (max-width:560px){.could-grid{grid-template-columns:repeat(2,1fr)}.could-sample{font-size:22px}.could-try{opacity:1}.could-foot{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){.could-card{opacity:1;transition:none}.hook-stage.is-flash,.sample-marquee>div{animation:none}.bp>i,.could-card,.sample-brief span{transform:none;animation:none}.sample-comps s i{width:var(--w);animation:none}.sample-perf .ring .fg{stroke-dasharray:94 100;animation:none}.sample-brief span{opacity:1}.sample-brief span:last-child::after,.sample-copy{animation:none}.could-sample,.hook-font .hook-sample{transition:none}}.sample-a11y{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:4px 0 6px}.sample-a11y>i{aspect-ratio:1;border-radius:5px;background:var(--line)}.sample-card.is-in .sample-a11y>i{animation:a11yOn .35s var(--ease-out) forwards;animation-delay:calc(var(--i)*.05s)}.sample-card.is-in .sample-a11y>i.warn{animation-name:a11yWarn}@media (prefers-reduced-motion:reduce){.sample-a11y>i{background:var(--brand);animation:none}.sample-a11y>i.warn{background:#e8a800}}.could-grid.is-live .could-sample{animation:couldBreathe 2.8s ease-in-out 3;animation-delay:calc(var(--i, 0)*.15s)}.could-grid.is-live .could-card:nth-child(1) .could-sample{animation-delay:0s}.could-grid.is-live .could-card:nth-child(2) .could-sample{animation-delay:.15s}.could-grid.is-live .could-card:nth-child(3) .could-sample{animation-delay:.3s}.could-grid.is-live .could-card:nth-child(4) .could-sample{animation-delay:.45s}.could-grid.is-live .could-card:nth-child(5) .could-sample{animation-delay:.6s}.could-grid.is-live .could-card:nth-child(6) .could-sample{animation-delay:.75s}.could-card.is-scrubbing .could-sample{animation:none}@media (prefers-reduced-motion:reduce){.could-grid.is-live .could-sample{animation:none}}.stage-loader{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);display:grid;place-items:center;padding:14px;border-radius:18px;background:rgba(11,20,16,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;transition:opacity .4s var(--ease-out)}.stage-loader.is-done{opacity:0}.stage-loader svg{width:46px;height:46px;display:block;animation:pgSpin 2.4s linear infinite}.stage-loader .pg-out{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2.4}.stage-loader .pg-fill{fill:var(--accent);animation:pgFill 1.1s ease-in-out infinite alternate}@media (prefers-reduced-motion:reduce){.stage-loader .pg-fill,.stage-loader svg{animation:none}.stage-loader .pg-fill{transform:translateY(25px)}}.stage-view:has(.stage-loader) .stage-fallback span{transform:translateY(-38px)}.stage-view:has(.stage-loader) .stage-fallback~.stage-loader{top:64%}.hook-scroll-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;font:700 12px/1.2 var(--font-mono, ui-monospace, monospace);letter-spacing:.02em;color:var(--brand);max-height:40px;overflow:hidden;transition:opacity .35s var(--ease-out),max-height .35s var(--ease-out),margin .35s var(--ease-out)}.hook-scroll-hint i{font-style:normal;font-size:16px;line-height:1;animation:hintBounce 1.1s ease-in-out infinite}.hook-scroll-hint.is-gone{opacity:0;max-height:0;margin:0}@media (prefers-reduced-motion:reduce){.hook-scroll-hint i{animation:none}}.hook-sound{display:grid;gap:10px;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.hook-sound-head{display:flex;align-items:center;gap:10px;font-size:13px}.hook-sound-head b{font-family:var(--font-display)}.hook-sound-head>span:last-child{color:var(--ink-faint)}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px}.eq i{width:3px;height:4px;border-radius:2px;background:var(--line)}.eq--on i{background:var(--brand);animation:eqBar .9s ease-in-out infinite}.eq--on i:nth-child(2){animation-delay:.12s}.eq--on i:nth-child(3){animation-delay:.24s}.eq--on i:nth-child(4){animation-delay:.36s}.eq--on i:nth-child(5){animation-delay:.48s}.hook-sound ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.hook-sound li{padding:5px 10px;border-radius:99px;background:color-mix(in srgb,var(--brand) 10%,var(--surface));color:var(--ink-soft);font:12px/1.2 var(--font-mono, ui-monospace, monospace)}@media (prefers-reduced-motion:reduce){.eq--on i{animation:none;height:10px}}