/* fonts are self-hosted (OFL, licenses next to the files) */
@font-face{font-family:"Geologica";src:url("../fonts/Geologica.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

/* Layout: one light sheet. Emblem opens, a loose feed of 9:16 and 1:1 works follows on a 21-column
   Fibonacci grid (golden lines at 8/21 and 13/21), text lives at the edges, the about block is a
   connect-the-dots emblem, and the page ends on a tekhelet field with Isaiah 6:8. */
:root{
  --paper:#F4F5F6;      /* cool photocopy paper */
  --ink:#0E0F12;        /* toner black, same as the emblem */
  --muted:#6A6D75;
  --line:#CFD2D8;
  --tone:#E3E5E9;       /* placeholder fill */
  --tone-2:#D8DBE1;
  --dot:rgba(14,15,18,.09);
  --tekhelet:#2433D6;   /* the one accent */
  --on-accent:#F4F5F6;

  --f-sans:"Geologica","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --s-label:12px;
  --s-body:15px;
  --s-lede:clamp(18px,1.6vw,23px);
  --s-big:clamp(30px,5.2vw,78px);
  --s-about:clamp(20px,1.9vw,28px);

  --gut:clamp(16px,1.6vw,28px);
  /* side margins never go under the iPhone notch in landscape (viewport-fit=cover) */
  --gut-l:max(var(--gut),env(safe-area-inset-left,0px));
  --gut-r:max(var(--gut),env(safe-area-inset-right,0px));
  --col-gap:clamp(10px,1.2vw,20px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* cursors in tekhelet with a paper outline, so they stay visible on the blue finale too */
html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2 L3 19 L7.5 14.8 L10.6 21.5 L13.4 20.2 L10.4 13.6 L16.6 13.6 Z' fill='#2433D6' stroke='#F4F5F6' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto}
a,button,[role="button"],.stage,.redact,.handle,.v-zone,.phi-hit{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='#2433D6' stroke='#F4F5F6' stroke-width='1.6'/%3E%3C/svg%3E") 12 12,pointer}
.board{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v8M12 14v8M2 12h8M14 12h8' stroke='#F4F5F6' stroke-width='3.6' stroke-linecap='square'/%3E%3Cpath d='M12 2v8M12 14v8M2 12h8M14 12h8' stroke='#2433D6' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") 12 12,crosshair}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:var(--s-body);line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left}
:focus-visible{outline:2px solid var(--tekhelet);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:var(--s-label);line-height:1.4;letter-spacing:0}
.muted{color:var(--muted)}
.wrap{padding-inline:var(--gut-l) var(--gut-r)}

/* top bar: brand | nav | language | scroll */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);align-items:center;
  padding:12px var(--gut-r) 10px var(--gut-l)}
.brand{font-weight:600;text-decoration:none;font-size:15px;letter-spacing:.01em;grid-column:1}
.bar nav{grid-column:2;display:flex;gap:clamp(14px,1.8vw,28px);flex-wrap:nowrap;white-space:nowrap}
.bar nav a{text-decoration:none}
.bar nav a:hover,.brand:hover{color:var(--tekhelet)}
.bar-r{grid-column:3 / span 2;display:flex;justify-content:space-between;align-items:center;gap:12px}
.lang{border-bottom:1px solid currentColor;line-height:1.2;white-space:nowrap}
.lang:hover{color:var(--tekhelet)}
.pct{display:flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums;min-width:4.5em;justify-content:flex-end}
.phi{color:var(--tekhelet);font-family:var(--f-sans);font-size:15px}
.lang-m{display:none}
@media (min-width:761px) and (max-width:900px){.bar-r{justify-content:flex-end;gap:clamp(16px,2.4vw,28px)}}
@media (max-width:760px){
  .bar{grid-template-columns:1fr auto;row-gap:8px}
  .bar nav{grid-column:1 / -1;grid-row:2;gap:16px;align-items:baseline}
  .bar-r{grid-column:2;grid-row:1}
  .bar-r .lang{display:none}
  .lang-m{display:inline-block;margin-left:auto}
}
/* the narrowest phones: the second row cannot hold nav and language, so the language takes the first row and the scroll % steps aside when there is no room */
@media (max-width:379px){.bar-r .lang{display:inline-block}.bar .lang-m{display:none}}
@media (max-width:345px){.bar-r .pct{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);padding-block:clamp(28px,5vw,72px) clamp(40px,6vw,96px);align-items:end}
.emblem-box{position:relative;grid-column:2 / span 2;grid-row:1;justify-self:center;width:min(100%,560px)}
.emblem{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
/* tap the phi on the forehead and it turns tekhelet; tap again to return */
.phi-hit{position:absolute;left:calc(100% * 351 / 808);top:calc(100% * 160 / 795);width:calc(100% * 106 / 808);aspect-ratio:106 / 156;-webkit-tap-highlight-color:transparent}
.phi-blue{position:absolute;inset:0;background:var(--tekhelet);-webkit-mask:url("../img/phi.webp") center / 100% 100% no-repeat;mask:url("../img/phi.webp") center / 100% 100% no-repeat;opacity:0;transition:opacity .25s}
.phi-hit[aria-pressed="true"] .phi-blue{opacity:1}
@property --r{syntax:"<length>";inherits:false;initial-value:6px}
.print{-webkit-mask-image:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px));mask-image:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px));
  -webkit-mask-size:8px 8px;mask-size:8px 8px;animation:print 1.5s cubic-bezier(.3,.1,.2,1) forwards}
@keyframes print{from{--r:0px}to{--r:6px}}
.hero-l{grid-column:1;grid-row:1;display:grid;gap:14px;max-width:34ch}
.hero-l .lede{font-size:var(--s-lede);font-weight:600;line-height:1.2;text-wrap:balance}
.hero-l p{margin:0;text-wrap:pretty}
.hero-r{grid-column:4;grid-row:1;justify-self:end;text-align:right;display:grid;gap:4px}
.dirs{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dirs li{display:flex;justify-content:flex-end;gap:10px;align-items:baseline}
.dirs .phi{font-size:13px}
/* hand-drawn marks (handmade/integrate.py): the page colours the drawing through a mask */
.dirs .phi.hand{font-size:18px}
.phi.hand{display:inline-block;width:.7em;height:1em;vertical-align:-.32em;color:transparent;background:var(--tekhelet);
  -webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat}
html.hand-cursors{cursor:-webkit-image-set(url(../../media/handmade/cursor_arrow.png) 1x,url(../../media/handmade/cursor_arrow@2x.png) 2x) 8 8,auto;cursor:image-set(url(../../media/handmade/cursor_arrow.png) 1x,url(../../media/handmade/cursor_arrow@2x.png) 2x) 8 8,auto}
html.hand-cursors :is(a,button,[role="button"],.stage,.redact,.handle,.v-zone,.phi-hit){cursor:-webkit-image-set(url(../../media/handmade/cursor_ring.png) 1x,url(../../media/handmade/cursor_ring@2x.png) 2x) 16 16,pointer;cursor:image-set(url(../../media/handmade/cursor_ring.png) 1x,url(../../media/handmade/cursor_ring@2x.png) 2x) 16 16,pointer}
html.hand-cursors .board{cursor:-webkit-image-set(url(../../media/handmade/cursor_cross.png) 1x,url(../../media/handmade/cursor_cross@2x.png) 2x) 16 16,crosshair;cursor:image-set(url(../../media/handmade/cursor_cross.png) 1x,url(../../media/handmade/cursor_cross@2x.png) 2x) 16 16,crosshair}
.redact:focus-visible{outline-offset:2px}
/* SCP-style redaction: a black bar covers the line for five seconds */
.rd-t.on{background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:var(--s-label);padding:1px 6px;line-height:1.5}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;row-gap:28px}
  .emblem-box{grid-column:1;width:min(100%,380px)}
  .hero-l{grid-column:1;grid-row:2}
  .hero-r{grid-column:1;grid-row:3;justify-self:start;text-align:left}
  .dirs li{justify-content:flex-start}
}

/* section heads */
.sec-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);border-top:1px solid var(--ink);padding-block:10px 0;align-items:baseline}
.sec-head .ctl{grid-column:4;display:flex;justify-content:space-between;gap:12px}
.seg{display:flex;gap:14px}
.seg button{color:var(--muted)}
.seg button[aria-pressed="true"]{color:var(--ink);border-bottom:1px solid var(--ink)}
.seg button:hover,.guides-btn:hover{color:var(--tekhelet)}
.guides-btn{color:var(--muted)}
/* small mono controls get a larger invisible hit area (24 px and more), the look stays the same */
.seg button,.guides-btn,.dots-head button{position:relative}
.seg button::after,.guides-btn::after,.dots-head button::after{content:"";position:absolute;inset:-5px -3px}
.guides-btn[aria-pressed="true"]{color:var(--tekhelet)}
@media (max-width:760px){.sec-head{grid-template-columns:1fr auto}.sec-head .ctl{grid-column:2;gap:16px}.sec-head .count{display:none}}

/* work: 21-column grid, two works per row. Each row pins one edge to a golden line
   (8/21 or 13/21); everything else comes from the golden sequence frac(n x 0.618). */
.grid{position:relative;display:grid;grid-template-columns:repeat(21,minmax(0,1fr));column-gap:0;row-gap:clamp(40px,6.18vw,110px);
  padding-block:clamp(24px,3vw,44px) clamp(60px,8vw,120px);align-items:start}
.tile{display:grid;gap:8px;grid-column:var(--cd) / span var(--sd);grid-row:var(--rd);margin-top:calc(var(--qd) * 15vw);width:100%;position:relative}
.guide{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--tekhelet);z-index:2;pointer-events:none;opacity:0;transition:opacity .25s}
.guide span{position:absolute;top:8px;left:6px;color:var(--tekhelet);white-space:nowrap}
.guide.g1{left:calc(100% * 8 / 21)}.guide.g2{left:calc(100% * 13 / 21)}
.grid.show-guides .guide{opacity:1}
@media (max-width:760px){
  .grid{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:8px;row-gap:28px}
  .tile{grid-column:var(--cm) / span var(--sm);grid-row:var(--rm);margin-top:calc(var(--qm) * 22vw)}
  .guide.g1{left:calc((100% + 8px) * 3 / 8 - 4px)}.guide.g2{left:calc((100% + 8px) * 5 / 8 - 4px)}
}
.ph{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:var(--ar);background-color:var(--tone);
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.6px);background-size:7px 7px;overflow:hidden}
.ph-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--tekhelet);transform:scaleX(0);transform-origin:left}
.tile:hover .ph,.tile:focus-visible .ph{background-color:var(--tone-2)}
/* real works: no placeholder fill; cutouts are white-backed video multiplied into the page colour */
.ph.real,.tile:hover .ph.real{background:none}
.ph.real img,.ph.real video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph.cut img,.ph.cut video{object-fit:contain}
.mult{mix-blend-mode:multiply}
.v-media .ph.real img,.v-media .ph.real video{object-fit:contain}
#v-sound{border-bottom:1px solid currentColor}
.cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;align-items:baseline}
.cap-t{min-width:0}
.tile:hover .cap-t{color:var(--tekhelet)}
@media (max-width:760px){
  .cap{font-size:13px;line-height:1.3}.cap .mono{display:none}
}

/* list view */
.list{padding-block:clamp(16px,2vw,28px) clamp(60px,8vw,120px)}
.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);width:100%;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row:hover{color:var(--tekhelet)}
.row .r-meta{display:flex;justify-content:space-between;gap:10px}
.row .r-kind{color:var(--muted)}
.row:hover .r-kind{color:inherit}
@media (max-width:760px){.row{grid-template-columns:auto 1fr auto}.row .r-kind{display:none}}
.float{position:fixed;left:0;top:0;width:150px;pointer-events:none;z-index:30;opacity:0;transition:opacity .15s}
.float.on{opacity:1}
@media (hover:none){.float{display:none}}

/* about: connect-the-dots emblem on the left, text at the right edge */
.about{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;padding-block:28px clamp(60px,8vw,120px);align-items:start}
.dots{grid-column:1 / span 2;grid-row:1 / span 2;display:grid;gap:10px;width:min(100%,560px)}
.dots-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.dots-head button{border-bottom:1px solid currentColor}
.dots-head button:hover{color:var(--tekhelet)}
.dots-state{font-variant-numeric:tabular-nums}
.dots-state.done{color:var(--tekhelet)}
.board{position:relative;width:100%;aspect-ratio:808 / 795;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transform-style:preserve-3d;transform:perspective(1600px) rotateY(0deg);transition:transform .9s cubic-bezier(.5,0,.2,1)}
.board svg,.board canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.board svg{overflow:visible}
.board canvas{pointer-events:none}
.l-shown path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.phi-mark{position:absolute;left:calc(100% * 351 / 808);top:calc(100% * 160 / 795);width:calc(100% * 106 / 808);height:auto;pointer-events:none}
/* the card flips around its vertical axis; the back shows the photo cut out, swaying from the feet */
.board.flipped{transform:perspective(1600px) rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg);display:block;width:100%;padding:0;visibility:hidden}
.board.flipped .face.back{visibility:visible}
/* Safari lets canvas and svg show through backface-visibility, so each face also hides at the half-turn */
.face{transition:visibility 0s .45s}
.board.flipped .face.front{visibility:hidden}
.sway{position:absolute;left:50%;bottom:0;height:100%;aspect-ratio:1121 / 1500;transform:translateX(-50%)}
.sway img{width:100%;height:100%;display:block;transform-origin:50% 100%;animation:sway 2.8s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2.6deg)}to{transform:rotate(2.6deg)}}
.phi-mark.can-flip{pointer-events:auto}
.phi-mark.can-flip:hover{opacity:.75}
.dot circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.dot text{font-family:var(--f-mono);fill:var(--ink)}
.dot.hit circle{fill:var(--ink)}
.dot.hit text{fill:var(--muted)}
.dot.next circle{fill:var(--tekhelet);stroke:var(--tekhelet)}
.dot.next text{fill:var(--tekhelet)}
.about-r{grid-column:3 / span 2;grid-row:1;align-self:stretch;display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);padding-top:clamp(18px,2.2vw,30px)}
.about .sign{display:block;align-self:flex-start;height:clamp(30px,2.8vw,42px);width:auto;max-width:60%;margin:0 0 0 -2px}
.about .txt{font-size:var(--s-about);font-weight:300;line-height:1.28;letter-spacing:-.01em;max-width:32ch;margin:0;text-wrap:pretty}
.about .cta{align-self:flex-start;text-decoration:none;border-bottom:1px solid currentColor;line-height:1.2}
.about .cta:hover{color:var(--tekhelet)}
/* the two lists sit on the bottom edge of the dot board, so both columns end on one line */
.lists{margin-top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);border-top:1px solid var(--line);padding-top:14px}
.about .col{display:grid;gap:10px;align-content:start}
.about .col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.about .col li{text-wrap:pretty;display:grid;grid-template-columns:12px minmax(0,1fr);align-items:baseline;line-height:1.35}
.about .col li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tekhelet);transform:translateY(-.2em)}
@media (max-width:760px){
  .about{grid-template-columns:1fr 1fr}
  .dots{grid-column:1 / -1;grid-row:auto}
  .about-r{grid-column:1 / -1;grid-row:auto;padding-top:0}
  .lists{margin-top:8px}
}

/* contact */
.contact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);row-gap:18px;padding-block:28px clamp(60px,8vw,110px)}
.mail{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.mail .addr{font-size:var(--s-big);font-weight:800;line-height:1;letter-spacing:-.02em;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.copy{border-bottom:1px solid currentColor}
.copy:hover{color:var(--tekhelet)}
.handles{grid-column:1 / -1;display:flex;gap:28px;flex-wrap:wrap}
.handle{border-bottom:1px dotted currentColor}
.handles .handle:hover{color:var(--tekhelet)}
.f-foot .handle:hover{opacity:.7}
.h-net{color:var(--muted)}
.f-foot .h-net{color:inherit}

/* finale */
.finale{background:var(--tekhelet);color:var(--on-accent);padding:18px var(--gut-r) calc(18px + env(safe-area-inset-bottom,0px)) var(--gut-l);display:grid;grid-template-rows:auto 1fr auto auto;min-height:80vh;row-gap:14px}
.f-top,.f-bot,.f-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.f-bot{position:relative;font-variant-numeric:tabular-nums}
.found{display:flex;gap:16px}
#f-eggs{opacity:.72}#f-eggs.got{opacity:1}
.cool{position:absolute;left:0;right:0;top:-8px;height:1px;background:var(--on-accent);transform:scaleX(0);transform-origin:left}
.cool.run{transform:scaleX(1);transition:transform 2s linear}
.f-foot{border-top:1px solid rgba(244,245,246,.45);border-top-color:color-mix(in srgb,var(--on-accent) 45%,transparent);padding-top:12px}
.f-foot .links{display:flex;gap:22px;flex-wrap:wrap}
.stage{position:relative;display:grid;align-content:center;min-height:44vh}
.stage:focus-visible{outline:2px solid var(--on-accent);outline-offset:6px}
/* the pull zone: a fixed box in the middle, so a line that grows or moves never steals the trigger */
.pull{position:absolute;left:30%;right:30%;top:20%;bottom:20%;z-index:1}
.phrase{font-size:clamp(44px,9.4vw,150px);font-weight:800;line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance;overflow-wrap:anywhere;max-width:14ch;-webkit-user-select:none;user-select:none}
.phrase .d6,.phrase .d7{display:inline-block;animation:bob .5s ease-in-out infinite alternate}
.phrase .d7{animation-delay:-.5s}
@keyframes bob{from{transform:translateY(-7%)}to{transform:translateY(7%)}}
.phrase.huge{font-size:min(74vh,80vw);white-space:nowrap;line-height:.78;letter-spacing:-.07em;max-width:none;overflow-wrap:normal}
.phrase[dir="rtl"]{justify-self:end;text-align:right}
.f-bot .t-mob{display:none}
@media (hover:none){.f-bot .t-desk{display:none}.f-bot .t-mob{display:inline}}

/* viewer */
.viewer{position:fixed;inset:0;z-index:50;overscroll-behavior:contain;background:var(--paper);display:grid;grid-template-rows:auto 1fr;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.v-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);padding:12px var(--gut-r) 10px var(--gut-l);border-bottom:1px solid var(--ink);align-items:baseline}
.v-top .v-t{grid-column:2 / span 2}
.v-top .v-r{display:flex;justify-content:space-between;gap:12px}
.v-top button{border-bottom:1px solid currentColor}
.v-top button:hover{color:var(--tekhelet)}
.v-body{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(220px,300px);min-height:0}
/* text about the work sits at the right edge, low, like the rest of the site's captions */
.v-info{display:grid;gap:14px;align-content:end;padding:clamp(14px,2.4vw,36px) var(--gut-r) clamp(18px,3vw,44px) 0;min-width:0}
.v-info p{margin:0;max-width:34ch;white-space:pre-line;text-wrap:pretty}
.v-role{display:grid;gap:4px}
.v-rail{overflow-y:auto;padding:14px 0 14px var(--gut-l);display:grid;gap:10px;align-content:start;scrollbar-width:none}
.v-rail button{display:block;width:56px;opacity:.45}
.v-rail button[aria-current="true"]{opacity:1;outline:1px solid var(--ink);outline-offset:3px}
.v-rail button:hover{opacity:1}
.v-stage{position:relative;min-height:0;container-type:size;display:grid;place-items:center;padding:clamp(14px,2.4vw,36px)}
.v-media{width:min(100%,(100vh - 160px) * var(--arn));width:min(100cqw,100cqh * var(--arn));aspect-ratio:var(--ar)}
.v-media .ph{height:100%}
.v-zone{position:absolute;top:0;bottom:0;width:50%;z-index:1}
.v-zone.l{left:0}.v-zone.r{right:0}
@media (max-width:760px){
  .v-top{grid-template-columns:1fr auto}.v-top .v-t{grid-column:1;grid-row:2}.v-top .v-code{grid-column:1}.v-top .v-r{grid-column:2;grid-row:1}
  .v-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.v-rail{display:none}
  .v-info{padding:12px var(--gut-r) 16px var(--gut-l);gap:8px;border-top:1px solid var(--line)}
}
body.lock{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .print{animation:none;-webkit-mask-image:none;mask-image:none}
  .board,.face{transition:none}.sway img{animation:none}
  .cool.run{transition:none}
  .phrase .d6,.phrase .d7{animation:none}
}