.problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:40px}.problem-cell{background:var(--paper);padding:32px;display:flex;flex-direction:column;gap:10px}.problem-quote{font-family:var(--serif);font-size:22px;line-height:1.3;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}.problem-context{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-4);text-transform:uppercase}.dsar-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}.dsar-link{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--hairline);background:var(--paper);text-decoration:none;color:inherit;transition:border-color .2s ease}.dsar-link:hover{border-color:var(--ink)}.dsar-link-meta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}.dsar-link-title{font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--ink)}.section.surface-ink{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink);position:relative;overflow:hidden}.section.surface-ink .kicker{color:#68cdb7;background:#ffffff0a}.section.surface-ink .section-title{color:var(--paper)}.section.surface-ink .section-title em{color:#68cdb7}.section.surface-ink .section-lede{color:#b9b7b4}.section.surface-ink .compare-tabs{border-color:#ffffff1a}.section.surface-ink .compare-tab{color:#73716e;background:#0a0907;border-color:#ffffff14;position:relative}.section.surface-ink .compare-tab .tab-name{color:#b9b7b4}.section.surface-ink .compare-tab:hover{background:#171614}.section.surface-ink .compare-tab:hover .tab-name{color:var(--paper)}.section.surface-ink .compare-tab.active{background:#1c1a18;border-color:#ffffff29;border-bottom-color:#1c1a18}.section.surface-ink .compare-tab.active:before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:#68cdb7}.section.surface-ink .compare-tab.active .tab-name{color:var(--paper)}.section.surface-ink .compare-tab .tab-kicker{color:#656360}.section.surface-ink .compare-tab.active .tab-kicker{color:#4cdfc4}.section.surface-ink .compare-pane{background:#1c1a18;border:1px solid rgba(255,255,255,.08);border-top-color:#ffffff29}.section.surface-ink .compare-time-num{color:var(--paper)}.section.surface-ink .compare-time-num.warn{color:oklch(.82 .18 32)}.section.surface-ink .compare-time-num.good{color:#4cdfc4}.section.surface-ink .compare-time-unit{color:#a09e9b}.section.surface-ink .compare-step{border-color:#ffffff1a}.section.surface-ink .compare-step-num{color:#73716e}.section.surface-ink .compare-step-text,.section.surface-ink .compare-step.bad .compare-step-text,.section.surface-ink .compare-step.good .compare-step-text{color:#e6e4e1}.section.surface-ink .compare-step-time{color:#afaeaa;font-weight:500}.section.surface-ink .compare-step.bad .compare-step-time{color:oklch(.78 .16 32)}.section.surface-ink .compare-step.good .compare-step-time{color:#5cddc4}.section.surface-ink .page{position:relative;z-index:2}.bleed-num{position:absolute;font-family:var(--serif);font-style:italic;font-weight:400;color:#171614;font-size:clamp(320px,44vw,640px);line-height:.78;letter-spacing:-.045em;pointer-events:none;user-select:none;z-index:1;top:38%;right:-3vw;transform:translateY(-30%)}.bleed-num .unit{font-family:var(--mono);font-style:normal;font-size:.06em;letter-spacing:.22em;text-transform:uppercase;color:#4e4d4a;display:block;margin-top:.5em;margin-left:.08em}.compare{margin-top:40px;border:1px solid var(--hairline-strong);border-radius:4px;overflow:hidden;background:var(--paper)}.compare-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hairline);background:var(--paper-2)}.compare-tab{background:transparent;border:none;cursor:pointer;padding:18px 24px;text-align:left;font-family:var(--sans);font-size:14px;color:var(--ink-3);display:flex;flex-direction:column;gap:4px;transition:background .15s ease,color .15s ease;border-right:1px solid var(--hairline);position:relative}.compare-tab:last-child{border-right:none}.compare-tab .tab-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}.compare-tab .tab-name{font-family:var(--serif);font-size:22px;line-height:1.1;letter-spacing:-.015em;color:var(--ink-3)}.compare-tab.active{background:var(--paper);color:var(--ink)}.compare-tab.active .tab-name{color:var(--ink)}.compare-tab.active .tab-kicker{color:var(--accent-deep)}.compare-tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}.compare-pane{padding:36px 40px 40px;display:none}.compare-pane.active{display:block}.compare-time{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}.compare-time-num{font-family:var(--serif);font-size:56px;line-height:1;letter-spacing:-.025em;color:var(--ink);white-space:nowrap}.compare-time-num.warn{color:#932d1c}.compare-time-num.good{color:var(--accent-deep)}.compare-time-unit{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}.compare-step-list{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:8px}.compare-step{display:grid;grid-template-columns:28px 1fr auto;gap:14px;padding:14px 0;align-items:baseline;border-top:1px solid var(--hairline)}.compare-step:first-child{border-top:none}.compare-step-num{font-family:var(--mono);font-size:11px;color:var(--ink-4);letter-spacing:.06em}.compare-step-text{font-size:14.5px;color:var(--ink-2);line-height:1.5}.compare-step-time{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}.compare-step.bad .compare-step-text{color:var(--ink-3)}.compare-step.bad .compare-step-time{color:#ac5343}.compare-step.good .compare-step-time{color:var(--accent-deep)}.compare-time-num[data-time-counter]{transition:opacity .4s ease}@media(max-width:720px){.problem-grid,.dsar-links{grid-template-columns:1fr}.compare-tab .tab-name{font-size:18px}}@media(max-width:1000px){.compare-pane{padding:28px}.demo{grid-template-columns:1fr}.demo-side{padding:24px}}@media(max-width:760px){.demo-thumbs{grid-template-columns:repeat(2,1fr)}}.demo{margin-top:40px;border:1px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--paper);display:grid;grid-template-columns:360px 1fr}.demo-side{background:var(--ink);color:var(--paper);padding:28px 28px 24px;display:flex;flex-direction:column;gap:18px}.demo-side .kicker{color:#669c8f;margin-bottom:0}.demo-side-title{font-family:var(--serif);font-size:24px;line-height:1.2;letter-spacing:-.015em;color:var(--paper)}.demo-search{display:flex;flex-direction:column;gap:8px}.demo-search-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a19f91}.demo-search-input{height:42px;padding:0 14px;background:#12120f;color:var(--paper);border:1px solid oklch(.28 .005 100);border-radius:4px;font-family:var(--sans);font-size:14px;outline:none}.demo-search-input:focus{border-color:var(--accent)}.demo-search-input::placeholder{color:#72726e}.demo-suggestions{display:flex;flex-wrap:wrap;gap:6px}.demo-chip{font-family:var(--sans);font-size:12px;padding:5px 10px;border-radius:99px;border:1px solid oklch(.32 .005 100);background:transparent;color:#cececa;cursor:pointer;transition:all .12s ease}.demo-chip:hover{border-color:var(--accent);color:var(--paper)}.demo-stats{margin-top:auto;padding-top:18px;border-top:1px solid oklch(.22 .005 100);display:grid;grid-template-columns:1fr 1fr;gap:14px}.demo-stat-key{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#878683;margin-bottom:3px}.demo-stat-val{font-family:var(--serif);font-size:22px;line-height:1;color:var(--paper);letter-spacing:-.01em}.demo-stat-val em{color:#54b9a5;font-style:normal}.demo-results{background:var(--paper-2);padding:24px 28px;display:flex;flex-direction:column;gap:14px;min-height:380px}.demo-status{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--hairline)}.demo-status .live:before{content:"";display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--accent);margin-right:6px;vertical-align:middle;animation:blink 1.4s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.demo-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.demo-thumb{position:relative;aspect-ratio:1/1;background:var(--paper);border-radius:3px;overflow:hidden;border:1px solid var(--hairline);transform:translateY(8px);opacity:0;animation:thumb-in .5s cubic-bezier(.2,.8,.2,1) forwards}.demo-thumb:nth-child(1){animation-delay:.2s}.demo-thumb:nth-child(2){animation-delay:.32s}.demo-thumb:nth-child(3){animation-delay:.44s}.demo-thumb:nth-child(4){animation-delay:.56s}.demo-thumb:nth-child(5){animation-delay:.68s}.demo-thumb:nth-child(6){animation-delay:.78s}.demo-thumb:nth-child(7){animation-delay:.88s}.demo-thumb:nth-child(8){animation-delay:.98s}@keyframes thumb-in{to{transform:translateY(0);opacity:1}}.demo-thumb-meta{position:absolute;left:4px;bottom:4px;right:4px;font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:var(--ink-3);background:#faf9f7d9;padding:2px 4px;border-radius:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bbox{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 1px #0000002e;border-radius:1px}.bbox.match{border-color:var(--accent-deep);box-shadow:0 0 0 1px #00000040,0 0 0 4px oklch(.55 .12 178 / .18);animation:bbox-pulse 2.4s ease-in-out infinite}@keyframes bbox-pulse{0%,to{box-shadow:0 0 0 1px #00000040,0 0 0 4px oklch(.55 .12 178 / .18)}50%{box-shadow:0 0 0 1px #00000040,0 0 0 6px oklch(.55 .12 178 / .3)}}.bbox-label{position:absolute;top:-20px;left:-2px;background:var(--accent);color:var(--paper);font-family:var(--mono);font-size:10px;font-weight:500;padding:2px 6px;border-radius:2px 2px 0 0;white-space:nowrap}.bbox.match .bbox-label{background:var(--accent-deep)}.demo-thumb .bbox{border-width:1.5px}.demo-thumb .bbox-label{font-size:8.5px;padding:1px 4px;top:-14px}.demo-empty{grid-column:1 / -1;flex:1;display:grid;place-items:center;font-family:var(--serif);font-style:italic;color:var(--ink-3);font-size:16px;text-align:center;padding:48px 32px;min-height:200px;max-width:480px;margin:0 auto}
