/* =====================================================================
   Grace Wang — portfolio
   Technical drawing system. Two themes, chosen by the device or the
   visitor. The one rule: if it's colored, you can click it.
   ===================================================================== */

html[data-theme="dark"]{color-scheme:dark;
  --bg:#0A0A0A;--ink:#EDEDEA;--dim:#8C8C87;--line:rgba(255,255,255,.13);--line2:rgba(255,255,255,.045);
  --panel:rgba(255,255,255,.035);--deco:rgba(237,237,234,.38);--link:#ACE000;--on-link:#0A0A0A}
html[data-theme="light"]{color-scheme:light;
  --bg:#FBFBF8;--ink:#121212;--dim:#6C6C67;--line:rgba(0,0,0,.14);--line2:rgba(0,0,0,.045);
  --panel:rgba(0,0,0,.028);--deco:rgba(18,18,18,.34);--link:#612ACE;--on-link:#FFFFFF}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
table{width:100%;border-collapse:collapse}
::selection{background:var(--link);color:var(--on-link)}

/* ---------- links ---------- */
.lk{color:var(--link);background-image:linear-gradient(var(--link),var(--link));background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;
  transition:background-size .25s cubic-bezier(.2,.8,.2,1),color .2s;padding:0 .08em}
html[data-theme="light"] .lk{background-size:100% 1.5px}
.lk:hover,.lk:focus-visible,a:hover > .lk,a:focus-visible > .lk{background-size:100% 100%;color:var(--on-link);outline:none}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}

/* ---------- sheet ---------- */
.page{position:relative;min-height:100vh;overflow:hidden;padding:30px clamp(18px,4vw,60px) 90px}
.grid{position:absolute;inset:0;z-index:-1;opacity:.75;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px}
.zx{position:absolute;left:14px;right:14px;top:14px;display:flex;pointer-events:none;border-bottom:1px solid var(--line);z-index:-1}
.zx span{flex:1;border-left:1px solid var(--line);font-size:9px;color:var(--dim);padding:2px 0 2px 5px}
.zy{position:absolute;top:14px;bottom:14px;left:14px;display:flex;flex-direction:column;pointer-events:none;border-right:1px solid var(--line);z-index:-1}
.zy span{flex:1;border-top:1px solid var(--line);font-size:9px;color:var(--dim);padding:5px 3px 0}
.in{max-width:1180px;margin:0 auto;padding:0 10px 0 22px}

/* crosshair cursor (mouse only) */
.xh{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;z-index:50}
.xh-h{position:absolute;left:0;right:0;top:0;height:1px;background:var(--deco);opacity:.5}
.xh-v{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--deco);opacity:.5}
.xh-l{position:absolute;left:0;top:0;font-size:10px;color:var(--dim);background:var(--bg);padding:3px 7px;border:1px solid var(--line);white-space:nowrap}
body.fine{cursor:crosshair}
body.fine a,body.fine button,body.fine [data-href]{cursor:pointer}

/* ---------- header ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;letter-spacing:.08em;color:var(--dim);padding-top:16px;text-transform:uppercase}
.top b{color:var(--ink);font-weight:500}
.top nav{display:flex;gap:22px}
.right{display:flex;align-items:center;gap:18px}
.mode{display:inline-flex;border:1px solid var(--line);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:var(--bg)}
.mode button{padding:6px 10px;text-transform:inherit;letter-spacing:inherit;white-space:nowrap;color:var(--link);border-right:1px solid var(--line);transition:background .2s,color .2s}
.mode button:last-child{border-right:none}
.mode button:hover{background:var(--link);color:var(--on-link)}
.mode button[aria-pressed="true"]{background:var(--ink);color:var(--bg);cursor:default}
.mode .sys{opacity:.55;margin-left:5px}

/* ---------- shared type ---------- */
.kicker{font-size:11px;letter-spacing:.14em;color:var(--dim);margin-bottom:24px;display:flex;gap:12px;align-items:center;text-transform:uppercase}
.kicker::before{content:"";width:30px;height:1px;background:var(--ink);flex:none}
.outline{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;line-height:.86;letter-spacing:-.005em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.4px var(--ink);transition:color .6s ease}
.outline:hover{color:var(--line)}
.dek{max-width:58ch;font-size:14px;line-height:1.8;opacity:.85}
.dek b{font-weight:500}
.bal{position:absolute;width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;font-size:10.5px;display:grid;place-items:center;background:var(--bg)}
th{text-align:left;font-weight:500;font-size:10px;letter-spacing:.14em;color:var(--dim);padding:9px 12px;border:1px solid var(--line);background:var(--panel);text-transform:uppercase}
td{padding:13px 12px;border:1px solid var(--line);font-size:12.5px;vertical-align:top}
.spec td{padding:10px 12px;font-size:12px}
.spec td:first-child{width:40%;font-size:10px;letter-spacing:.14em;color:var(--dim);background:var(--panel);text-transform:uppercase}

/* title block */
.tblock{margin:48px 0 0 auto;width:max-content;max-width:100%;display:grid;grid-template-columns:repeat(4,auto);border:1px solid var(--line);font-size:9.5px;letter-spacing:.08em;background:var(--bg);text-transform:uppercase}
.tblock div{padding:8px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--dim)}
.tblock div:nth-child(4n){border-right:none}
.tblock b{display:block;color:var(--ink);font-weight:500;font-size:11px;margin-top:3px;letter-spacing:.03em}
.tblock .ttl{grid-column:1/-1;border-right:none;border-bottom:none;scroll-margin-bottom:40px}
.tblock .ttl:target{animation:ping 1.6s ease-out 1}
@keyframes ping{0%,40%{box-shadow:inset 0 0 0 2px var(--link)}100%{box-shadow:inset 0 0 0 2px transparent}}
.copy{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--link);border:1px solid var(--link);padding:2px 6px;margin:0 2px 0 4px;vertical-align:1px;transition:background .2s,color .2s}
.copy:hover,.copy.ok{background:var(--link);color:var(--on-link)}

/* ---------- HOME ---------- */
.home .trace{position:absolute;right:0;top:120px;width:min(52vw,640px);height:auto;z-index:-1}
.home .trace .w{stroke:var(--deco);stroke-width:1.1;fill:none;opacity:.7}
.home .trace .pad{fill:var(--bg);stroke:var(--deco);stroke-width:1.2}
.home .trace .sig{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:36 964;animation:sig 3.8s linear infinite;opacity:.8}
.home .trace .sig.b{animation-delay:-1.9s;animation-duration:4.6s}
@keyframes sig{to{stroke-dashoffset:-1000}}
.home .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,320px);gap:clamp(24px,4vw,64px);align-items:end;padding-top:clamp(56px,10vh,110px)}
.home .namebox{position:relative;display:inline-block;padding:0 0 46px 46px}
.home h1{font-size:clamp(78px,15vw,220px)}
.dimv{position:absolute;left:10px;top:4px;bottom:50px;border-left:1px solid var(--dim)}
.dimv::before,.dimv::after{content:"";position:absolute;left:-7px;width:13px;height:1px;background:var(--dim)}
.dimv::before{top:0}.dimv::after{bottom:0}
.dimv span{position:absolute;left:0;top:50%;transform:translate(-50%,-50%) rotate(-90deg);background:var(--bg);padding:0 8px;font-size:10px;color:var(--dim);white-space:nowrap}
.dimh{position:absolute;left:46px;right:0;bottom:16px;border-top:1px solid var(--dim)}
.dimh::before,.dimh::after{content:"";position:absolute;top:-7px;width:1px;height:13px;background:var(--dim)}
.dimh::before{left:0}.dimh::after{right:0}
.dimh span{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:var(--bg);padding:0 10px;font-size:10px;color:var(--dim);white-space:nowrap}
.home .b1{top:-8px;right:-30px}.home .b2{top:47%;right:12%}.home .b3{bottom:58px;left:24%}
.notes{border-top:1px solid var(--line);font-size:12px;line-height:1.55;margin-bottom:46px}
.note{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.note i{font-style:normal;width:22px;height:22px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:10px}
.note b{display:block;font-weight:500;letter-spacing:.04em}
.note span{color:var(--dim)}
.home .dek{margin-top:30px}
.bom{margin-top:64px;scroll-margin-top:20px}
.bom-h{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.12em;color:var(--dim);margin-bottom:10px;text-transform:uppercase}
.bom tbody tr{transition:background .2s}
.bom tbody tr:hover{background:var(--panel)}
.bom tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--link)}
.bom td.pn{color:var(--dim)}
.bom td.go{width:44px;text-align:center}
.bom td.go span{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--link);color:var(--link);transition:background .2s,color .2s}
.bom tbody tr:hover td.go span{background:var(--link);color:var(--on-link)}
.peek{position:fixed;left:0;top:0;width:260px;z-index:40;pointer-events:none;opacity:0;transform:translate(24px,-50%) scale(.96);transition:opacity .2s,transform .25s;
  background:var(--bg);border:1px solid var(--line);padding:8px}
.peek.on{opacity:1;transform:translate(24px,-50%) scale(1)}
.peek img{width:100%;aspect-ratio:4/3;object-fit:cover}
.peek .ph{aspect-ratio:4/3;display:grid;place-items:center;color:var(--dim);font-size:10px;letter-spacing:.12em;background:var(--panel)}
.peek figcaption{font-size:9.5px;letter-spacing:.12em;color:var(--dim);margin-top:7px;text-transform:uppercase}
.peek figcaption b{color:var(--ink);font-weight:500}

/* ---------- CASE STUDY ---------- */
.cs .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(28px,4vw,64px);align-items:end;padding-top:clamp(56px,10vh,110px)}
.cs h1{font-size:clamp(56px,10.6vw,160px)}
.cs h1.long{font-size:clamp(48px,8.4vw,128px)}
.cs .dek{margin-top:30px}
.fig{margin-top:72px}
.fig.tight{margin-top:28px}
.frame{position:relative;padding:14px;border:1px solid var(--line)}
.frame i.c{position:absolute;width:16px;height:16px;border-color:var(--ink);border-style:solid;border-width:0}
.frame i.c1{left:-1px;top:-1px;border-top-width:2px;border-left-width:2px}
.frame i.c2{right:-1px;top:-1px;border-top-width:2px;border-right-width:2px}
.frame i.c3{left:-1px;bottom:-1px;border-bottom-width:2px;border-left-width:2px}
.frame i.c4{right:-1px;bottom:-1px;border-bottom-width:2px;border-right-width:2px}
.media{position:relative;overflow:hidden;background:var(--panel)}
.media > img,.media > video{width:100%;height:100%;object-fit:cover}
.film{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.film .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000}
.film.playing video{display:block}
.film.playing .poster,.film.playing .play{display:none}
.film .play{position:absolute;inset:0;display:block}
.film .ring{position:absolute;left:var(--px,50%);top:var(--py,50%);width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--link);display:grid;place-items:center;
  box-shadow:0 0 0 10px color-mix(in srgb,var(--link) 28%,transparent);transition:transform .3s,box-shadow .3s}
.film .ring b{width:0;height:0;border-left:20px solid var(--on-link);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.film .play:hover .ring{transform:scale(1.07);box-shadow:0 0 0 16px color-mix(in srgb,var(--link) 32%,transparent)}
.filmmsg{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font:500 12px/1.4 "Inter",sans-serif;background:rgba(0,0,0,.78);color:#eee;display:none;z-index:2}
.film.err .filmmsg{display:block}
.missing{display:grid!important;place-items:center;min-height:160px;border:1px dashed var(--line);color:var(--dim);font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:16px}
.cap{display:flex;justify-content:space-between;gap:16px;font-size:10.5px;letter-spacing:.12em;color:var(--dim);margin-top:12px;text-transform:uppercase}
.cap b{color:var(--ink);font-weight:500}

.sec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,4vw,60px);padding-top:56px;margin-top:56px;border-top:1px solid var(--line)}
.sh{font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;display:flex;gap:14px;align-items:baseline;line-height:1.5}
.sh span{color:var(--ink);font-weight:600}
.body > p{font-size:15px;line-height:1.85;max-width:62ch;opacity:.88}
.body > p + p{margin-top:1em}
.body p strong{font-weight:500}
.body p em{font-style:italic}
.body .fig:first-child,.body > *:first-child.fig{margin-top:0}
.body .note-s{margin-top:22px;font-size:12px;line-height:1.7;color:var(--dim);max-width:62ch}
.body .note-s b{color:var(--ink);font-weight:500}
.body > table,.body > .perf,.body > .flow,.body > .diagram{margin-top:28px}
.body > table:first-child,.body > .perf:first-child,.body > .flow:first-child,.body > .diagram:first-child{margin-top:0}
.body .statement,.statement{opacity:1;margin-bottom:28px;font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:500;font-size:clamp(30px,4.2vw,58px);line-height:1.02;letter-spacing:-.01em;max-width:22ch}
.body .statement em,.statement em{font-style:normal;color:transparent;-webkit-text-stroke:1.2px var(--ink)}

.perf{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border:1px solid var(--line)}
.perf div{padding:20px 18px 18px;border-right:1px solid var(--line)}
.perf div:last-child{border-right:none}
.perf b{display:block;font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:500;font-size:clamp(40px,4.8vw,62px);line-height:1}
.perf b small{font-size:.4em;color:var(--dim);margin-left:4px}
.perf span{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--dim);margin-top:10px;text-transform:uppercase;line-height:1.5}
.perf .ticks{height:6px;margin-top:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 8px);opacity:.45;width:var(--w,50%)}

.diagram{border:1px solid var(--line);background:var(--panel);padding:22px 18px 10px}
.diagram svg{display:block;width:100%;height:auto;font-family:"IBM Plex Mono",monospace}
.diagram .sm{display:none}
.diagram .node rect{fill:var(--bg);stroke:var(--ink);stroke-width:1.1}
.diagram .node.lead rect{stroke-width:2.4}
.diagram .node text{fill:var(--ink);font-size:13px;letter-spacing:.06em;text-anchor:middle}
.diagram .node text.s{fill:var(--dim);font-size:10px;letter-spacing:.12em}
.diagram .wire{stroke:var(--deco);stroke-width:1.2;fill:none}
.diagram .dot{fill:var(--ink)}
.diagram .pulse{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:24 976;animation:pulse 3.2s linear infinite}
.diagram .p2{animation-delay:-.8s}.diagram .p3{animation-delay:-1.6s}.diagram .p4{animation-delay:-2.4s}
@keyframes pulse{to{stroke-dashoffset:-1000}}
.diagram .lbl{fill:var(--dim);font-size:10px;letter-spacing:.14em}
.dcap{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.12em;color:var(--dim);margin-top:8px;text-transform:uppercase}

/* funnel / process flow */
.flow{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--panel)}
.flow .st{flex:1;padding:18px 16px;position:relative;border-right:1px solid var(--line);min-width:0}
.flow .st:last-child{border-right:none}
.flow .st:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);background:var(--bg);color:var(--dim);font-size:12px;line-height:18px;width:18px;text-align:center;border:1px solid var(--line);border-radius:50%;z-index:1}
.flow b{display:block;font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:500;font-size:clamp(26px,2.8vw,38px);line-height:1}
.flow span{display:block;font-size:10px;letter-spacing:.1em;color:var(--dim);margin-top:8px;text-transform:uppercase;line-height:1.5}

/* galleries */
.gal{display:grid;gap:18px;margin-top:28px}
.gal.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal figure{border:1px solid var(--line);padding:8px;margin:0}
.gal figcaption{font-size:10px;letter-spacing:.12em;color:var(--dim);margin-top:8px;text-transform:uppercase;line-height:1.5}
.gal figcaption b{color:var(--ink);font-weight:500}
.gal .media{aspect-ratio:var(--ar,4/3)}

/* attendee-made products (Infinite Objects) */
.gal-h{margin-top:28px;font-size:10.5px!important;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;opacity:1!important}
.gal-h + .gal{margin-top:12px}
.prod figure{padding:8px 8px 16px}
.prod h4{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:500;font-size:26px;line-height:1;margin:10px 0 0}
.prod .meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.prod .meta dt{color:var(--dim)}
.prod .meta dd{color:var(--ink)}
.prod .pd{font-size:12.5px;line-height:1.7;opacity:.85;margin-top:12px}

/* text beside a phone screen (Girl Scouts) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:clamp(24px,4vw,48px);align-items:start}
.split > div > p{font-size:15px;line-height:1.85;max-width:62ch;opacity:.88}
.split > div > p + p{margin-top:1em}
.split .phone{margin:0}
.frame.sq{max-width:620px}
.gal.g1{grid-template-columns:minmax(0,560px)}
.phone .media{background:none}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:clamp(20px,3vw,40px);margin-top:32px}
.duo .phone{margin:0}

/* three acts (Impossible Alone) */
.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.act{border:1px solid var(--line);padding:8px 8px 18px;display:flex;flex-direction:column}
.act .media{aspect-ratio:4/5}
.act .film{aspect-ratio:4/5}
.act .film .ring{width:64px;height:64px;margin:-32px 0 0 -32px}
.act .film .ring b{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
.act .no{font-size:10px;letter-spacing:.14em;color:var(--dim);margin:14px 8px 0;text-transform:uppercase}
.act h3{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:500;font-size:24px;line-height:1.05;margin:6px 8px 0}
.act .prob{font-size:11px;letter-spacing:.06em;margin:10px 8px 0;padding:7px 9px;border:1px dashed var(--line);color:var(--dim)}
.act .prob b{color:var(--ink);font-weight:500}
.act p{font-size:13px;line-height:1.7;opacity:.85;margin:12px 8px 0}

/* Did You Mean switcher */
.dym{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);gap:clamp(18px,3vw,40px);align-items:start}
.dym .frame .media{aspect-ratio:1/1}
.dym .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.dym .frame img.on{opacity:1}
.dym .list{border-top:1px solid var(--line)}
.dym .list button{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:baseline;width:100%;text-align:left;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13px;transition:background .2s,padding .25s}
.dym .list button .n{color:var(--dim);font-size:11px}
.dym .list button .nm{color:var(--link);font-family:"IBM Plex Sans Condensed",sans-serif;font-size:20px;line-height:1.1}
.dym .list button .ar{color:var(--dim);font-size:11px}
.dym .list button:hover{background:var(--panel);padding-left:10px}
.dym .list button[aria-pressed="true"]{background:var(--link)}
.dym .list button[aria-pressed="true"] .nm,.dym .list button[aria-pressed="true"] .n,.dym .list button[aria-pressed="true"] .ar{color:var(--on-link)}
.dym .desc{margin-top:16px;font-size:12.5px;line-height:1.7;min-height:3.4em}
.dym .desc b{display:block;font-weight:500;font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-bottom:4px}

/* pager */
.pager{display:grid;grid-template-columns:1fr 1fr;margin-top:80px;border:1px solid var(--line)}
.pager > *{padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.pager > * + *{border-left:1px solid var(--line);align-items:flex-end;text-align:right}
.pager span{font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.pager b{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:500;font-size:clamp(20px,2.4vw,30px)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .home .hero,.cs .hero{grid-template-columns:1fr}
  .notes{margin-bottom:0}
  .top nav,.top .mid{display:none}
  .hide-sm{display:none}
  .mode button{padding:6px 8px}
  .mode .sys{display:none}
  .home .b1{right:-10px}
  .home .trace{width:90vw;top:70px;opacity:.45}
  .tblock{grid-template-columns:repeat(2,auto)}
  .tblock div:nth-child(4n){border-right:1px solid var(--line)}
  .tblock div:nth-child(2n){border-right:none}
  .sec{grid-template-columns:1fr;gap:18px}
  .diagram .lg{display:none}.diagram .sm{display:block;max-width:380px;margin:0 auto}
  .gal.g3{grid-template-columns:1fr}
  .perf{grid-template-columns:1fr 1fr}
  .perf div:nth-child(2n){border-right:none}
  .perf div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .perf[style*="--n:3"] div:nth-child(3){grid-column:1/-1;border-right:none}
  .flow{flex-direction:column}
  .flow .st{border-right:none;border-bottom:1px solid var(--line)}
  .flow .st:last-child{border-bottom:none}
  .flow .st:not(:last-child)::after{content:"↓";right:auto;left:16px;top:auto;bottom:-10px;transform:none}
  .acts{grid-template-columns:1fr}
  .act .media,.act .film{aspect-ratio:4/3}
  .dym{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split .phone{max-width:300px}
  .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .film .ring{width:62px;height:62px;margin:-31px 0 0 -31px;box-shadow:0 0 0 6px color-mix(in srgb,var(--link) 28%,transparent)}
  .film .ring b{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
  .cap span:last-child{display:none}
  .peek{display:none}
  .pager b{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
  html{scroll-behavior:auto}
}