.cs{--bg:#fff;--fg:#15170f;--muted:#5e6254;--line:#e5e7de;--soft:#f4f5ef;--accent:#4d6b00;--lime:#cbff00;--frame:#0e100b;--display:"Instrument Serif", Georgia, "Times New Roman", serif;--body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;background:var(--bg);color:var(--fg);font-family:var(--body);padding:0 20px;font-size:17px;line-height:1.6}.cs .wrap{flex-direction:column;gap:96px;max-width:1080px;margin:0 auto;padding-block:56px 96px;display:flex}.cs h1,.cs h2,.cs h3{font-family:var(--display);text-wrap:balance;margin:0;font-weight:400;line-height:1.08}.cs h1{letter-spacing:-.01em;font-size:clamp(44px,7vw,82px)}.cs h2{font-size:clamp(32px,4.4vw,48px)}.cs h3{font-size:26px}.cs p{max-width:62ch;margin:0}.cs .eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-size:12px;font-weight:700}.cs section{flex-direction:column;gap:28px;display:flex}.cs .lede{color:var(--muted);max-width:58ch;font-size:20px}.cs .muted{color:var(--muted)}.cs .shot{flex-direction:column;gap:12px;min-width:0;margin:0;display:flex}.cs .shot .frame{background:var(--frame);border-radius:34px;padding:6px;box-shadow:0 28px 56px -30px #1418088c}.cs .shot img{aspect-ratio:640/1391;object-fit:cover;object-position:top;border-radius:28px;width:100%;display:block}.cs .shot figcaption{color:var(--muted);flex-direction:column;gap:2px;font-size:14px;line-height:1.45;display:flex}.cs .shot figcaption b{color:var(--fg);font-size:15px}.cs .hero{grid-template-columns:1.1fr .9fr;align-items:center;gap:48px;display:grid}.cs .hero-text{flex-direction:column;gap:22px;min-width:0;display:flex}.cs .meta{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:6px 0 0;padding-top:22px;display:grid}.cs .meta dt{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:12px}.cs .meta dd{margin:2px 0 0;font-weight:600}.cs .hero-shots{grid-template-columns:1fr 1fr;align-items:start;gap:18px;display:grid}.cs .hero-shots .shot:nth-child(2){margin-top:56px}.cs .two{grid-template-columns:1fr 1fr;gap:40px;display:grid}.cs .two>div{flex-direction:column;gap:16px;min-width:0;display:flex}.cs .principles{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;display:grid}.cs .principles div{border-top:2px solid var(--fg);flex-direction:column;gap:8px;padding-top:16px;display:flex}.cs .principles h3{font-size:24px}.cs .principles p{color:var(--muted);font-size:15.5px}.cs .tablebox{border:1px solid var(--line);border-radius:14px;overflow-x:auto}.cs table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}.cs th,.cs td{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:14px 18px}.cs th{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--soft);font-size:12px;font-weight:600}.cs tr:last-child td{border-bottom:0}.cs td:first-child{font-weight:600}.cs .split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:56px;display:grid}.cs .split.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.cs .split>.txt h3{font-size:30px}.cs .split>.txt{flex-direction:column;gap:18px;min-width:0;display:flex}.cs .pair{grid-template-columns:1fr 1fr;align-items:start;gap:18px;display:grid}.cs .single{justify-self:center;width:100%;max-width:300px}.cs .anno{border-top:1px solid var(--line);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.cs .anno li{border-bottom:1px solid var(--line);grid-template-columns:28px 1fr;gap:12px;padding:12px 0;font-size:15.5px;display:grid}.cs .anno li span{background:var(--fg);width:24px;height:24px;color:var(--bg);border-radius:50%;place-items:center;margin-top:1px;font-size:12px;font-weight:700;display:grid}.cs .anno b{font-weight:600}.cs .row4{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;display:grid}.cs .row3{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;display:grid}.cs .tag{letter-spacing:.06em;text-transform:uppercase;background:var(--soft);color:var(--accent);border:1px solid var(--line);border-radius:999px;width:max-content;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}.cs .scope{border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;display:grid}.cs .scope div{border-bottom:1px solid var(--line);flex-direction:column;gap:4px;padding:16px 0;display:flex}.cs .scope b{font-size:16px}.cs .scope span{color:var(--muted);font-size:14.5px;line-height:1.5}.cs .reflect{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.cs .reflect div{background:var(--soft);border-radius:16px;flex-direction:column;gap:10px;padding:24px;display:flex}.cs .reflect p{font-size:15.5px}@media (width<=900px){.cs .hero,.cs .split,.cs .split.rev,.cs .two{grid-template-columns:1fr}.cs .split.rev>.txt{order:-1}.cs .row4{grid-template-columns:repeat(2,minmax(0,1fr))}.cs .principles,.cs .scope{grid-template-columns:1fr}.cs .hero-shots{max-width:560px}}@media (width<=560px){.cs{font-size:16px}.cs .row3{grid-template-columns:1fr 1fr}.cs .reflect{grid-template-columns:1fr}.cs .hero-shots .shot:nth-child(2){margin-top:32px}.cs .pair,.cs .row3,.cs .row4{gap:12px}.cs .shot .frame{border-radius:24px;padding:4px}.cs .shot img{border-radius:20px}}.cs .feature{border-top:1px solid var(--line);flex-direction:column;gap:18px;padding-top:28px;display:flex}.cs .feature-head{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:baseline;gap:32px;display:grid}.cs .feature-head h3{font-size:30px}.cs .feature-head p{color:var(--muted);font-size:16px}.cs .features{flex-direction:column;gap:56px;display:flex}.cs .modes3{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;display:grid}.cs .mode-col{flex-direction:column;gap:14px;min-width:0;display:flex}.cs .mode-col h3{font-size:28px}.cs .mode-col p{color:var(--muted);font-size:15.5px}.cs .mode-col .pair{gap:12px}@media (width<=900px){.cs .modes3{grid-template-columns:1fr}.cs .feature-head{grid-template-columns:1fr;gap:6px}.cs .mode-col .pair{max-width:520px}}.cs .shot.todo .frame{box-shadow:none;border:2px dashed var(--line);background:0 0;padding:4px}.cs .shot.todo .ph{aspect-ratio:640/1391;text-align:center;color:var(--muted);background:var(--soft);border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:16px;font-size:13px;line-height:1.4;display:flex}.cs .shot.todo .ph b{color:var(--fg);font-size:14px}.cs .shot.todo .ph span{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:11px;font-weight:700}.cs .flow{grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:14px;display:grid}.cs .step{border:1px solid var(--line);background:var(--bg);border-radius:14px;flex-direction:column;gap:8px;min-width:0;padding:16px;display:flex;position:relative}.cs .step .n{letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-size:11px;font-weight:700}.cs .step b{font-size:16px}.cs .step ul{color:var(--muted);flex-direction:column;gap:3px;margin:0;padding-left:16px;font-size:14px;display:flex}.cs .step:not(:last-child):after{content:"→";color:var(--muted);background:var(--bg);font-size:16px;line-height:1;position:absolute;top:50%;right:-13px;transform:translateY(-50%)}.cs .step.key{border-color:var(--accent)}.cs .decision{border-top:1px solid var(--line);grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:center;gap:40px;padding-top:28px;display:grid}.cs .decision .txt{flex-direction:column;gap:12px;min-width:0;display:flex}.cs .decision h3{font-size:30px}.cs .kv2{grid-template-columns:110px 1fr;gap:8px 16px;margin:0;font-size:15.5px;display:grid}.cs .kv2 dt{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px;font-size:12px}.cs .kv2 dd{margin:0}.cs .gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;display:grid}.cs .compare{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);align-items:end;gap:24px;display:grid}.cs .desk-ph{aspect-ratio:16/10;border:2px dashed var(--line);background:var(--soft);color:var(--muted);text-align:center;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:16px;font-size:14px;display:flex}.cs .desk-ph span{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:11px;font-weight:700}.cs .desk-ph b{color:var(--fg)}@media (width<=900px){.cs .flow{grid-template-columns:1fr}.cs .step:not(:last-child):after{content:"↓";inset:auto auto -14px 50%;transform:translate(-50%)}.cs .decision{grid-template-columns:1fr;gap:20px}.cs .decision .shot{max-width:260px}.cs .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.cs .compare{grid-template-columns:1fr}.cs .compare .shot{max-width:240px}}.cs .desk-frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 28px 56px -30px #1418088c}.cs .desk-frame img{width:100%;display:block}.cs .compare .shot:first-child{max-width:none}.cs .hero{grid-template-columns:1fr!important}.cs .hero-text{max-width:820px}.cs .cover{background:#0f110c;border-radius:20px;margin:-48px 0 0;overflow:hidden}.cs .cover img{width:100%;height:auto;display:block}@media (width<=560px){.cs .cover{border-radius:14px;margin-top:-56px}}.cs .desk-mock{margin:0}.cs .desk-mock img{width:100%;height:auto;display:block}.cs .callouts{--w:300px;width:100%;max-width:760px;position:relative}.cs .callouts .phone-c{width:var(--w);position:relative}.cs .callouts .phone-c .shot{margin:0}.cs .pin{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);background:var(--lime);color:#0e100b;width:22px;height:22px;font:700 11px/22px var(--body);text-align:center;z-index:2;border-radius:50%;margin:-11px 0 0 -11px;position:absolute;box-shadow:0 0 0 3px #0e100bd9}.cs .co{top:calc(var(--y) * 1%);left:calc(var(--w) * var(--x) / 100);pointer-events:none;align-items:center;display:flex;position:absolute;right:0;transform:translateY(-50%)}.cs .co .ln{height:1px;width:calc(var(--w) * (100 - var(--x)) / 100 + 28px);background:var(--muted);opacity:.7;flex:none}.cs .co .ln:after{content:"";background:var(--muted);border-radius:50%;width:5px;height:5px;margin:-2px 0 0 auto;display:block}.cs .co .lbl{white-space:nowrap;padding-left:12px;font-size:14.5px;line-height:1.35}.cs .co .lbl b{font-weight:600}.cs .co .n{display:none}@media (width<=860px){.cs .callouts{--w:min(300px,100%)}.cs .callouts .phone-c{margin:0 auto}.cs .co{border-bottom:1px solid var(--line);grid-template-columns:28px 1fr;gap:10px;padding:10px 0;display:grid;position:static;transform:none}.cs .co .ln{display:none}.cs .co .lbl{white-space:normal;padding:0}.cs .co .n{background:var(--fg);width:22px;height:22px;color:var(--bg);border-radius:50%;place-items:center;font-size:11px;font-weight:700;display:grid}.cs .callouts .list{border-top:1px solid var(--line);margin-top:20px}}.cs .anno-block{flex-direction:column;gap:14px;display:flex}.cs .anno-block h3{font-size:30px}.cs .sm{flex-direction:column;gap:14px;margin-top:28px;display:flex}.cs .sm-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;display:flex}.cs .sm-head h3{font-size:30px}.cs .sm-legend{color:var(--muted);gap:16px;font-size:13px;display:flex}.cs .sm-legend i{vertical-align:-2px;border-radius:3px;width:12px;height:12px;margin-right:6px;display:inline-block}.cs .sm-legend .k1{border:1.5px solid var(--accent)}.cs .sm-legend .k2{background:var(--soft);border:1px dashed var(--muted)}.cs .sm-scroll{border:1px solid var(--line);border-radius:16px;padding-bottom:8px;overflow-x:auto}.cs .sm-tree{--c:var(--muted);min-width:1060px;padding:28px 20px 32px}.cs .sm-tree ul{margin:0;padding:0;list-style:none}.cs .node{border:1px solid var(--line);background:var(--bg);border-radius:9px;max-width:190px;padding:7px 11px;font-size:13px;line-height:1.3;display:inline-block}.cs .node.root{color:#141a00;background:#cf0;border-color:#cf0;max-width:none;padding:9px 16px;font-size:14px;font-weight:700}.cs .node.root small{color:#4f6300;font-weight:500}.cs .node.tab{border-color:var(--fg);font-size:14px;font-weight:700}.cs .node.key{border:1.5px solid var(--accent);color:var(--accent);font-weight:700}.cs .node small{color:var(--muted);font-size:11.5px;font-weight:400;display:block}.cs .node.shared{background:var(--soft);border-style:dashed}.cs .lv0{flex-direction:column;align-items:center;display:flex}.cs .lv0>.node{position:relative}.cs .lv0>.node:after{content:"";border-left:1px solid var(--c);height:18px;position:absolute;top:100%;left:50%}.cs .tabs{grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;width:100%;margin-top:18px;display:grid}.cs .tabs>li{flex-direction:column;align-items:flex-start;padding:18px 8px 0;display:flex;position:relative}.cs .tabs>li:before{content:"";border-top:1px solid var(--c);position:absolute;top:0;left:0;right:0}.cs .tabs>li:first-child:before{left:22px}.cs .tabs>li:last-child:before{width:22px;right:auto}.cs .tabs>li:after{content:"";border-left:1px solid var(--c);height:18px;position:absolute;top:0;left:22px}.cs .stack{flex-direction:column;gap:7px;margin:0 0 0 22px;padding:10px 0 0;display:flex;position:relative}.cs .stack>li{padding-left:16px;position:relative}.cs .stack>li:before{content:"";border-left:1px solid var(--c);position:absolute;top:0;bottom:-7px;left:0}.cs .stack>li:last-child:before{height:17px;bottom:auto}.cs .stack>li:after{content:"";border-top:1px solid var(--c);width:16px;position:absolute;top:17px;left:0}.cs .stack>li:first-child:before{top:-10px}.cs .stack .stack{margin-left:18px}.cs .sm-note{color:var(--muted);font-size:13px}.cs .ds{flex-direction:column;gap:18px;margin-top:40px;display:flex}.cs .ds h3{font-size:30px}.cs .ds figure{flex-direction:column;gap:10px;margin:0;display:flex}.cs .ds figure img{border:1px solid var(--line);border-radius:16px;width:100%;height:auto;display:block}.cs .ds figcaption{color:var(--muted);font-size:14px}.cs .ds figcaption b{color:var(--fg)}.cs .kd{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:24px 20px;display:grid}.cs .kd-card{flex-direction:column;gap:10px;min-width:0;display:flex}.cs .kd-card h3{margin-top:6px;font-size:22px}.cs .kd-ba{grid-template-columns:62px 1fr;gap:8px;margin:0;font-size:14px;line-height:1.45;display:grid}.cs .kd-ba span{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:2px;font-size:11px}.cs .kd-why{color:var(--muted);border-left:2px solid var(--accent);margin:2px 0 0;padding-left:10px;font-size:14px;line-height:1.45}@media (width<=900px){.cs .kd{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=480px){.cs .kd{grid-template-columns:1fr}.cs .kd-card .shot{max-width:260px}}.cs .cr td:first-child{white-space:nowrap}.cs .cr-take{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.cs .cr-take div{border-top:2px solid var(--fg);flex-direction:column;gap:6px;padding-top:14px;display:flex}.cs .cr-take b{font-size:16px}.cs .cr-take span{color:var(--muted);font-size:14.5px;line-height:1.5}@media (width<=760px){.cs .cr-take{grid-template-columns:1fr}}.cs .se-block{border-top:1px solid var(--line);flex-direction:column;gap:18px;padding-top:28px;display:flex}.cs .se-head{flex-direction:column;gap:8px;display:flex}.cs .se-head h3{font-size:30px}.cs .se-row{align-items:flex-start;gap:28px;display:flex}.cs .se-signup{flex:none;width:240px}.cs .se-arrow{color:var(--muted);flex:none;align-self:center;font-size:28px}.cs .se-row .callouts{flex:1}.cs .pf{justify-content:space-between;align-items:flex-start;width:660px;max-width:100%;display:flex;position:relative}.cs .pf .shot{flex:none;width:260px}.cs .pf .frame{padding:6px}.cs .pf-hl{border:2px solid #cf0;border-radius:8px;width:47.12px;height:18.326px;position:absolute;top:147.218px;left:188.28px;box-shadow:0 0 0 4px #ccff002e}.cs .pf-arrow{pointer-events:none;width:660px;height:560px;position:absolute;top:0;left:0;overflow:visible}@media (width<=1000px){.cs .se-row{flex-direction:column;align-items:center}.cs .se-arrow{transform:rotate(90deg)}}@media (width<=700px){.cs .pf{flex-direction:column;align-items:center;gap:24px;width:100%}.cs .pf-arrow,.cs .pf-hl{display:none}}.cs .lessons{flex-direction:column;gap:8px;margin:0;padding-left:18px;font-size:15.5px;display:flex}.cs .arrowed{position:relative}.cs .arrowed figcaption{margin-top:30px}.cs .flow-svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.cs .flow-svg .ln,.cs .flow-svg .ring{fill:none;stroke:#cf0;stroke-width:2px}.cs .flow-svg .tag rect{fill:#cf0}.cs .flow-svg .tag text{fill:#141a00;font:600 11px var(--body);text-transform:none;letter-spacing:0}.cs{--display:var(--font-sans);--body:var(--font-sans);--bg:var(--color-bg);--fg:var(--color-text);--muted:var(--color-text-muted);--line:var(--color-tint-strong);--soft:var(--color-surface);background:0 0}.cs .eyebrow{font-family:var(--body);margin:0}.cs h1,.cs h2,.cs h3{letter-spacing:var(--tracking-display)}.cs h1{font-size:clamp(28px,4.2vw,46px);line-height:1.12}.cs h2{font-size:24px;line-height:1.15}.cs h3,.cs .principles h3,.cs .split>.txt h3,.cs .feature-head h3,.cs .mode-col h3,.cs .decision h3,.cs .anno-block h3,.cs .sm-head h3,.cs .ds h3,.cs .kd-card h3,.cs .se-head h3{font-size:20px}@media (width>=48rem){.cs h2{font-size:28px}}.cs p,.cs .lede,.cs .feature-head p,.cs .reflect p,.cs .kd-ba,.cs .kd-why,.cs .lessons{color:var(--fg);font-size:17px}.cs .meta dd{font-weight:400}@media (width>=901px){.cs .kd{grid-template-columns:repeat(2,minmax(0,347px));column-gap:40px}}.cs .toc.toc--bar{margin:-48px -20px;display:block}.cs .toc.toc--sidebar{display:none}@media (width>=80rem){.cs{padding-left:190px}.cs .toc.toc--bar{display:none}.cs .toc.toc--sidebar{left:32px;top:calc(var(--nav-height) + 40px);z-index:30;width:140px;display:block;position:fixed}}.cs [id]{scroll-margin-top:calc(var(--nav-height) + 72px)}.cs .back{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;text-decoration:none;display:inline-block}.cs .back:hover{color:var(--fg)}.cs .back--side{display:none}@media (width>=80rem){.cs .back--side{left:32px;top:calc(var(--nav-height) + 8px);z-index:30;opacity:0;visibility:hidden;margin:0;transition:opacity .2s,visibility .2s;display:inline-block;position:fixed}.cs .back--side.is-visible{opacity:1;visibility:visible}}