@font-face{font-family:Geist;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-400.ttf) format('truetype')}
@font-face{font-family:Geist;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-500.ttf) format('truetype')}
@font-face{font-family:Geist;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/geist-700.ttf) format('truetype')}

/* Layout: the Figma language on one page. One centred column of sections, each
   reorderable and hideable; every text, image order and spacing comes from #ia-state.
   Each artifact opens a centred modal over a blurred page. Edit mode saves new versions. */
:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --mute:#f4f4f4;
  --pill:#efefef;
  --line:#e6e6e6;
  --sub:#666666;
  --accent:#ff5b00;
  --edit:#2f6bff;
  --display:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  /* spacing tokens, overwritten from state */
  --top:96px;--section:130px;--grid-gap:40px;--grid-max:1080px;--cols:3;--label:20px;--stmt:32px;--measure:671px;--radius:2px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#grid .card:focus-visible,[data-open]:focus-visible{outline:2px solid var(--edit)!important;outline-offset:5px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.wrap{padding-left:var(--gl);padding-right:var(--gr)}

/* ---------- Type ---------- */
.statement{max-width:var(--measure);margin:0 auto;text-align:center;font-weight:700;font-size:min(var(--stmt),7vw);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.statement.small{max-width:513px;font-size:clamp(16px,1.5vw,18px);line-height:1.2;letter-spacing:-.01em;font-weight:500}
.caption{margin:0;max-width:300px;text-align:center;font-family:var(--text);font-size:15px;line-height:1.3;text-wrap:balance}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:22px;padding:8px 14px;font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1;text-decoration:none;white-space:nowrap;transition:opacity .15s ease,color .15s ease}
.btn:hover{opacity:.86}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{background:var(--pill);color:color-mix(in srgb,var(--ink) 40%,transparent);font-weight:400;font-size:clamp(15px,1.3vw,18px)}
.btn-ghost:hover{color:var(--ink)}
.cta{display:flex;flex-direction:column;align-items:center;gap:20px}
.carousel .pager{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding-inline:20px;pointer-events:none}
.carousel .pager[hidden]{display:none}
.pager .menu-btn{width:40px;height:40px;padding:0;justify-content:center;pointer-events:auto;opacity:0;transition:opacity .18s ease}
.pager svg{width:7px;height:12px}
.carousel:hover .pager [data-d="1"],.carousel.lft .pager [data-d="-1"]{opacity:1}
.carousel.lft .pager [data-d="1"]{opacity:0}
.pager button:focus-visible{opacity:1}
@media (hover:none){.pager button{opacity:1}}
.mark{display:inline-flex;align-items:center;justify-content:center;border:2px solid currentColor;border-radius:999px;font-weight:700;letter-spacing:-.04em;line-height:1;padding:.18em .32em .22em;font-size:16px;color:var(--ink);text-decoration:none}

/* ---------- Nav ---------- */
.nav{position:relative;z-index:20;padding-block:16px;background:transparent}
.nav.sticky{position:sticky;top:env(safe-area-inset-top,0px);background:none;pointer-events:none}
.nav.sticky .mark,.nav.sticky .menu-wrap{pointer-events:auto}
.nav-in{max-width:800px;margin-inline:auto;display:flex;justify-content:space-between;align-items:center}
.nav .mark{font-size:19px}
.menu-wrap{position:relative}
.menu-btn{display:inline-flex;align-items:center;gap:12px;padding:12px;border:0;border-radius:12px;background:rgba(222,222,222,.83);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--sub);font-family:var(--text);font-size:16px;line-height:1}
.menu-btn svg{width:15px;height:11px}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--paper);border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.1);display:flex;flex-direction:column}
.menu button,.menu a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-radius:8px;background:none;color:var(--ink);text-decoration:none;font-weight:500;letter-spacing:-.01em;text-align:left;font-size:15px}
.menu button:hover,.menu a:hover{background:var(--mute)}
.menu button{justify-content:flex-start;align-items:center}
.menu .ic{width:20px;height:20px;flex:none}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 6px}

/* ---------- Page column ---------- */
main{display:flex;flex-direction:column;gap:var(--section);padding-block:var(--top) 0}
.sec{position:relative}
.stack{display:flex;flex-direction:column;align-items:center;gap:24px}

/* ---------- Artifact cards ---------- */
.card{position:relative;margin:0;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:#fafafa;--c:var(--accent);border:0;padding:0;text-align:left;display:block}
.card img{width:100%;height:100%;object-fit:cover}
.card .n{position:absolute;z-index:50;font-weight:700;font-size:var(--label);letter-spacing:-.035em;line-height:1.05;color:var(--c);transition:opacity .5s ease}
.card .ic{position:absolute;z-index:50;left:14px;top:14px;width:calc(var(--label) * 1.7);height:calc(var(--label) * 1.7);color:var(--c);transition:opacity .5s ease}
.ic{display:block;color:var(--c,var(--a,currentColor))}
.card .n{right:14px;bottom:12px;text-align:right}
.card .mark{position:absolute;left:14px;bottom:13px;font-size:calc(var(--label) * .5);border-width:1.5px;color:var(--c);z-index:50;transition:opacity .5s ease}
.card .flip{position:absolute;inset:0;opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1)}
.card .flip.on{opacity:1}
.card.photo .ic,.card.photo .n,.card.photo .mark{opacity:0}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--grid-gap);width:100%;max-width:var(--grid-max);margin-inline:auto}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

/* ---------- Process + features ---------- */
.process{max-width:1014px;width:100%;margin-inline:auto;border-radius:12px}
.fcards{display:grid;grid-template-columns:repeat(3,minmax(0,360px));gap:23px;justify-content:center;width:100%}
.fcard{background:var(--mute);border-radius:10px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:48px;text-align:center}
.fcard h3{margin:0;font-size:24px;line-height:1.05;letter-spacing:-.04em;font-weight:700}
.fcard img{width:100px;height:100px;object-fit:cover}
.fcard p{margin:0;font-family:var(--text);font-size:16px;line-height:1.3}
@media (max-width:900px){.fcards{grid-template-columns:minmax(0,420px)}.fcard{gap:28px}}
.rule{border:0;border-top:1px solid var(--line);margin:0;width:100%}

/* ---------- Giant footer ---------- */
.stage{position:relative;margin-inline:auto;width:100%;container-type:inline-size}
.stage>.piece{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto}
.giant{aspect-ratio:1728/610}
.giant .title{position:absolute;left:50%;transform:translateX(-50%);width:max-content;top:var(--t);margin:0;font-weight:700;letter-spacing:-.06em;line-height:.9;white-space:nowrap;font-size:13cqw}
.giant .tag{position:absolute;right:var(--r);top:var(--t);margin:0;font-weight:700;font-size:2.8cqw;letter-spacing:-.04em;line-height:1.05}
.giant .mark{position:absolute;left:var(--l);top:var(--t);font-size:3.2cqw;border-width:.22cqw}
.giant .note{position:absolute;left:var(--l);top:var(--t);margin:0;font-family:var(--text);font-size:max(10px,.75cqw)}
.giant .fx{z-index:1}
footer{overflow:hidden;margin-top:var(--section)}

/* ---------- Modal ---------- */
dialog.sheet{--pad:clamp(20px,3vw,40px);border:0;padding:0;margin:auto;width:min(1040px,calc(100vw - 48px));max-width:none;height:min(860px,calc(100svh - 48px));max-height:none;border-radius:16px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.04)}
dialog.sheet::backdrop{background:rgba(245,245,245,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media (max-width:640px){dialog.sheet{width:calc(100vw - 20px);height:calc(100svh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:14px}}
dialog.sheet[open]{animation:rise .4s cubic-bezier(.2,.8,.2,1)}
dialog.sheet.unf[open]{animation:none}
dialog.sheet[open]::backdrop{animation:cvfade .45s ease}
dialog.sheet.closing::backdrop{opacity:0;transition:opacity .18s ease}
.sh-ghost{position:absolute!important;z-index:20;pointer-events:none;margin:0!important;outline:none!important}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.sheet-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:64px}
.sheet-bar{position:sticky;top:0;z-index:5;padding:14px var(--pad);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;justify-content:flex-end;gap:8px}
.sheet-body{display:flex;flex-direction:column;align-items:center;gap:clamp(48px,6vw,80px);padding:8px var(--pad) 0}
.ptitle{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ptitle .ic{width:34px;height:34px;color:var(--a);margin-bottom:2px}
.ptitle h2{margin:0;font-size:32px;line-height:1.05;letter-spacing:-.04em;font-weight:700}
.ptitle .no{color:var(--a,#f96e09);font-weight:500;font-size:17px;letter-spacing:-.05em;line-height:.9}
.ptitle .mark{font-size:11px;border-width:1.5px}
.carousel{position:relative;display:flex;flex-direction:column;gap:22px;width:calc(100% + 2 * var(--pad));margin-inline:calc(-1 * var(--pad))}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:16px}
.rail::-webkit-scrollbar{display:none}
.rail{cursor:grab}
.rail.dragging{cursor:grabbing;scroll-snap-type:none!important;user-select:none;-webkit-user-select:none}
.rail img{-webkit-user-drag:none}
.rail .card{flex:none;width:min(340px,72vw);scroll-snap-align:center}




/* ---------- Modal: hero collage + story ---------- */
.mhero{position:relative;width:100%;max-width:900px;aspect-ratio:1028/587;container-type:inline-size}
.mhero .piece{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto;z-index:1;rotate:var(--r,0deg)}
.mhero .main{z-index:20!important}
.mhero .pcard{aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--radius) * .6);box-shadow:0 6px 18px rgba(0,0,0,.12);background:#fafafa}
.proc svg{display:block;width:100%;height:auto;overflow:visible}
.kword{width:100%;height:100%;cursor:default}
.kword canvas{display:block;width:100%;height:100%}
.mhero .pword{height:var(--h)}
.mhero .pword .rs{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:var(--edit);border:2px solid #fff;border-radius:3px;cursor:nwse-resize;z-index:2}
.patterns{display:flex;flex-direction:column;align-items:center;gap:clamp(40px,5vw,72px);--a:var(--accent)}
.prow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,4vw,56px)}
.prow .proc{width:var(--pw)}
.pword-main{width:min(100%,var(--grid-max));height:clamp(90px,14vw,200px)}
.pw-input{border:1px dashed var(--edit);border-radius:6px;padding:4px 8px;font:inherit;font-family:var(--text);font-size:13px;text-align:center}
.proc.word-old{background:var(--a);color:color-mix(in srgb,var(--a) 30%,#fff);font-weight:700;letter-spacing:-.06em;line-height:.95;padding:.02em .12em .1em;white-space:nowrap;text-align:center;font-size:var(--fs)}
.proc.word span{display:inline-block;animation:bob 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.12s)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.08em)}}
body.editing .mhero .piece{cursor:grab;touch-action:none}
body.editing .mhero .piece:hover{outline:1px dashed var(--edit);outline-offset:3px}
body.editing .mhero .piece.sel{outline:2px solid var(--edit);outline-offset:3px}
.ptool{position:absolute;z-index:40;display:flex;gap:4px;align-items:center;background:#fff;border-radius:8px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.15);font-family:var(--text);font-size:12px;transform:translate(-50%,calc(-100% - 10px))}
.ptool input{border:1px solid var(--line);border-radius:5px;padding:3px 6px;width:90px;font-size:12px}
.ptool .num{display:flex;align-items:center;gap:3px;color:var(--sub)}
.ptool .num input{width:68px;font-variant-numeric:tabular-nums}
.ptool .sep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.ptool{width:max-content;max-width:min(620px,calc(100% - 8px));flex-wrap:wrap;justify-content:center}
.picker{position:absolute;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,92%);max-height:80%;overflow:auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);padding:14px;font-family:var(--text);font-size:13px;display:flex;flex-direction:column;gap:10px}
.picker .pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.picker .pk{border:0;border-radius:8px;background:#f6f6f6;aspect-ratio:1;padding:8px;display:grid;place-items:center;color:var(--a)}
.picker .pk:hover{box-shadow:0 0 0 2px var(--edit)}
.picker .pk img,.picker .pk svg{max-width:100%;max-height:100%;object-fit:contain}
.picker .pk-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mhero .main{aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
.mhero.plain{aspect-ratio:auto;display:flex;justify-content:center}
.mhero.plain .main{position:static;width:min(420px,80%)}
.story{max-width:min(620px,100%);margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:1.13em;text-align:center;font-weight:700;font-size:clamp(20px,2.4vw,30px);line-height:1.13;letter-spacing:-.04em;text-wrap:balance}
.story p{margin:0}
.story .sketch{width:min(200px,50%);margin-bottom:.6em}
body.editing #mSketch{cursor:pointer;outline:1px dashed var(--edit);outline-offset:4px}

/* ---------- Artifact settings drawer (edit mode, not part of the page) ---------- */
.sdrawer{position:absolute;top:66px;right:0;bottom:0;z-index:30;border-top:1px solid var(--line);width:min(360px,100%);overflow-y:auto;background:#fff;border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(0,0,0,.08);padding:16px;display:flex;flex-direction:column;gap:14px;font-family:var(--text);font-size:13px}
.sdrawer .dr-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sdrawer .dr-head b{font-family:var(--display);font-size:15px;letter-spacing:-.02em}
.sdrawer .imged-head{flex-direction:column;align-items:flex-start}
.sdrawer .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;width:100%}
.sdrawer .fields label{display:flex;flex-direction:column;gap:4px}
.sdrawer .fields input[type=text],.sdrawer .fields select{width:100%}
.sdrawer .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sdrawer .thumb,.sdrawer .thumb img{width:100%}
.sdrawer .thumb img{height:auto;aspect-ratio:4/5}
.sdrawer .note{color:var(--sub);line-height:1.4}
#drawerBtn.on{background:var(--edit);color:#fff}

/* ---------- Entry animation: words rise out of a mask, blocks fade up, once each ---------- */
html.anim .rv{opacity:0;transform:translateY(14px)}
html.anim .rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wm>span{display:inline-block}
html.anim .split .wm>span{transform:translateY(105%)}
html.anim .split.in .wm>span{transform:none;transition:transform .8s cubic-bezier(.2,.75,.15,1) calc(var(--d,0s) + var(--i) * 28ms)}
/* long text: words grouped by line, each line rises quickly, top to bottom */
html.anim .story.in .split.lines .wm>span{transform:none;transition:transform .5s cubic-bezier(.2,.75,.15,1) calc(var(--i) * 60ms)}
html.anim .nav{opacity:0}
html.anim .nav.in{opacity:1;transition:opacity .8s ease .1s}
@media (prefers-reduced-motion:reduce){html.anim .rv,html.anim .split .wm>span,html.anim .nav{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- Mouse trail ---------- */
#trail{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden}
#party{position:fixed;inset:0;width:100vw;height:100vh;z-index:15;pointer-events:none}
.trail-img{position:absolute;left:0;top:0;width:var(--tw,180px);aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.08);will-change:transform,opacity;
  transform:translate(-50%,-50%) scale(.4);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.25,1.2),opacity .2s ease}
.trail-img.in{transform:translate(-50%,-50%) scale(1);opacity:1}
.trail-proc{aspect-ratio:auto;box-shadow:none;border-radius:0;rotate:var(--rot,0deg)}
.trail-proc svg{display:block;width:100%;height:auto;overflow:visible}
.trail-img.out{transform:translate(-50%,-50%) scale(.2);opacity:0;transition:transform .5s cubic-bezier(.6,0,.8,.4),opacity .5s ease}
.panel select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:#fff;font-size:13px}

/* ---------- Edit mode ---------- */
.ed-fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border-radius:999px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.2);font-family:var(--text);font-size:13px}
.ed-fab button{border:0;border-radius:999px;padding:8px 13px;background:#262626;color:#fff;font-size:13px}
.ed-fab button.primary{background:var(--edit)}
.ed-fab button:disabled{opacity:.45;cursor:default}
.ed-fab .lbl{padding:0 6px 0 8px;opacity:.75}
body.editing [data-k]{outline:1px dashed transparent;outline-offset:3px;border-radius:2px;cursor:text;transition:outline-color .15s}
body.editing [data-k]:hover{outline-color:color-mix(in srgb,var(--edit) 55%,transparent)}
body.editing [data-k]:focus{outline:2px solid var(--edit);outline-offset:3px}
body.editing .sec{outline:1px dashed color-mix(in srgb,var(--edit) 30%,transparent);outline-offset:14px;border-radius:4px}
.secbar{position:absolute;top:-30px;right:-6px;z-index:15;display:none;gap:4px;font-family:var(--text);font-size:12px}
body.editing .secbar{display:flex}
.secbar span{align-self:center;color:var(--edit);margin-right:4px}
.chip{border:0;border-radius:6px;padding:4px 8px;background:var(--edit);color:#fff;font-size:12px;line-height:1.2}
.chip.ghost{background:#eef2ff;color:var(--edit)}
body.editing #grid .card{cursor:grab;outline:1px dashed color-mix(in srgb,var(--edit) 40%,transparent);outline-offset:4px}
body.editing #grid .card.dragging{opacity:.35}
body.editing #grid .card.over{outline:2px solid var(--edit)}
.panel{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:61;width:min(320px,calc(100vw - 32px));max-height:min(70svh,640px);overflow:auto;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);padding:16px;font-family:var(--text);font-size:13px;display:flex;flex-direction:column;gap:12px}
.panel h4{margin:0;font-family:var(--display);font-size:15px;letter-spacing:-.02em}
.panel label{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.panel label input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--edit)}
.panel output{font-variant-numeric:tabular-nums;color:var(--sub)}
.panel .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.panel hr{border:0;border-top:1px solid var(--line);margin:2px 0}
.imged{width:100%;display:flex;flex-direction:column;gap:10px;font-family:var(--text);font-size:13px}
.imged-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;color:var(--sub)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}
.thumb{position:relative;width:92px;border-radius:6px;background:#fafafa;box-shadow:0 0 0 1px var(--line);cursor:grab;user-select:none}
.thumb img{width:92px;height:115px;object-fit:cover;border-radius:6px 6px 0 0;pointer-events:none}
.thumb .tb{display:flex;justify-content:space-between;padding:4px}
.thumb .tb button{border:0;background:none;padding:2px 5px;border-radius:4px;font-size:13px;line-height:1}
.thumb .tb button:hover{background:var(--mute)}
.thumb .cover{position:absolute;left:5px;top:5px;background:var(--edit);color:#fff;border-radius:4px;padding:1px 5px;font-size:10px}
.thumb.dragging{opacity:.35}
.thumb.over{box-shadow:0 0 0 2px var(--edit)}
.thumbs.removed .thumb{opacity:.6;cursor:default}
.fields{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-family:var(--text);font-size:13px;color:var(--sub)}
.fields input[type=text]{border:1px solid var(--line);border-radius:6px;padding:5px 8px;width:110px}
.fields input[type=color]{width:34px;height:26px;border:0;padding:0;background:none}
.fields select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:#fff}
.panel .tog{display:flex;justify-content:space-between;align-items:center}
.panel .tog input{accent-color:var(--edit);width:16px;height:16px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;background:var(--ink);color:#fff;padding:10px 14px;border-radius:999px;font-family:var(--text);font-size:13px}
body.editing .fcard img{cursor:pointer}
/* ---------- Process board (FigJam-style canvas) ---------- */
.proc-open{position:relative;display:block;width:100%;max-width:1014px;margin-inline:auto;padding:0;border:0;background:none;cursor:pointer;border-radius:12px}
.proc-open .po-pill{position:absolute;right:14px;bottom:14px;opacity:0;transition:opacity .18s ease;font-size:15px;padding:10px 12px;gap:8px}
.proc-open:hover .po-pill,.proc-open:focus-visible .po-pill{opacity:1}
@media (hover:none){.proc-open .po-pill{opacity:1}}
dialog.cvs{border:0;padding:0;margin:auto;width:min(1040px,calc(100vw - 48px));height:min(860px,calc(100svh - 48px));max-width:none;max-height:none;border-radius:16px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05)}
dialog.cvs::backdrop{background:rgba(245,245,245,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
dialog.cvs[open]::backdrop{animation:cvfade .45s ease}
@keyframes cvfade{from{opacity:0}}
dialog.cvs.closing::backdrop{opacity:0;transition:opacity .18s ease}
.cvs-ghost{position:absolute;z-index:6;pointer-events:none;border-radius:12px}
.cvs-view{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:var(--paper)}
.cvs-view.panning{cursor:grabbing}
.cvs-board{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.cvs-links{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.cvs-links path{fill:none;stroke:#9a9a96;stroke-width:1.4;stroke-dasharray:4 5}
.cvs-links circle{fill:#9a9a96}
.cvs-links .lk-t rect{fill:#fff;stroke:#e2e2de}
.cvs-links .lk-t text{font:500 12px var(--text);fill:#6a6a66;letter-spacing:-.01em}
.ci{position:absolute;left:0;top:0;transform:rotate(var(--r,0deg));cursor:grab;user-select:none;-webkit-user-select:none;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,filter .18s ease}
.ci img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.ci.lift{cursor:grabbing;transform:rotate(0deg) scale(1.03);filter:drop-shadow(0 18px 30px rgba(0,0,0,.14))}
.ci-photo{background:#fff;padding:10px 10px 0;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04)}
.ci-photo img{border-radius:3px}
.ci-cap{display:flex;gap:8px;align-items:baseline;padding:9px 2px 10px;font:500 12px/1.3 var(--text);color:#77776f;letter-spacing:-.01em}
.ci-cap b{color:var(--a,#222);font-weight:600;flex:none}
.ci-note{background:color-mix(in srgb,var(--a) 22%,#fff);color:color-mix(in srgb,var(--a) 45%,#111);padding:16px 16px 20px;border-radius:4px;font:600 19px/1.15 var(--display);letter-spacing:-.035em;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ci-note::before{content:"";position:absolute;left:50%;top:-8px;width:52px;height:16px;transform:translateX(-50%) rotate(-2deg);background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.ci-tag{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:#fff;border-radius:999px;padding:6px 11px 6px 9px;font:500 13px var(--text);color:#55554f;box-shadow:0 0 0 1px rgba(0,0,0,.07)}
.ci-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--a)}
.ci-label{display:flex;align-items:baseline;gap:12px;font:700 56px/1 var(--display);letter-spacing:-.05em;color:var(--ink);cursor:grab}
.ci-label small{font:500 16px var(--text);color:var(--a,#999);letter-spacing:0}
.ci-proc .proc{width:100%}
.ci-word{height:var(--h)}
.ci-word .kword{width:100%;height:100%}
.ci .det{position:absolute;left:calc(100% + 12px);top:6px;width:200px;padding:10px 12px;border-radius:10px;background:#111;color:#fff;font:500 13px/1.35 var(--text);letter-spacing:-.01em;opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease;pointer-events:none;z-index:2}
.ci.lift .det{opacity:1;transform:none}
.ci .rm{position:absolute;right:-10px;top:-10px;width:24px;height:24px;border-radius:50%;border:0;background:#111;color:#fff;font-size:14px;line-height:1;display:none;cursor:pointer;z-index:3}
body.editing .ci:hover .rm{display:block}
body.editing .ci{outline:1px dashed color-mix(in srgb,var(--edit) 35%,transparent);outline-offset:4px}
.cvs-head{position:absolute;left:16px;top:16px;z-index:4;max-width:min(420px,calc(100% - 140px));padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 8px 30px rgba(0,0,0,.06)}
.cvs-head h2{margin:0;font:700 32px/1 var(--display);letter-spacing:-.05em}
.cvs-head p{margin:8px 0 0;font:400 15px/1.35 var(--text);color:var(--sub);text-wrap:pretty}
.cvs-close{position:absolute;right:16px;top:16px;z-index:4}
.cvs-tools{position:absolute;right:16px;bottom:16px;z-index:4;display:flex;gap:6px;align-items:center}
.cvs-tools .menu-btn{padding:10px 12px;font-size:14px}
.cvs-tools output{min-width:48px;text-align:center;font:500 13px var(--text);color:var(--sub)}
.cvs-hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;font:500 13px var(--text);color:#77776f;white-space:nowrap;pointer-events:none;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
@media (max-width:640px){dialog.cvs{width:calc(100vw - 20px);height:calc(100svh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:14px}.cvs-head h2{font-size:24px}.cvs-hint{display:none}}
/* ---------- Icon to object ---------- */
.map{display:flex;flex-direction:column;align-items:center;gap:clamp(32px,4vw,56px)}
.mgrid{--k:.33;width:100%;max-width:var(--gridMax,1004px);display:grid;grid-template-columns:repeat(6,1fr);gap:28px 12px}
.mcol{display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;font:inherit;color:var(--c);cursor:pointer;text-align:center}
.mno{font:500 17px var(--display);letter-spacing:-.02em;margin-bottom:28px}
.mic,.mobj{display:block;width:calc(var(--w) * var(--k) * 1px);max-width:100%;height:auto;-webkit-user-drag:none}
.mbox{display:flex;align-items:center;justify-content:center;width:100%}
.mbox.i{height:calc(190px * var(--k))}
.mbox.o{height:calc(275px * var(--k))}
.mlab{display:block;margin-top:22px;font:500 17px/1.2 var(--display);letter-spacing:-.01em;width:min-content;min-width:3em}
.mdots{width:2px;height:clamp(64px,8vw,112px);margin:26px 0;background:radial-gradient(circle,#4a4a4a .9px,transparent 1.1px) center top/2px 10px repeat-y}
@media (max-width:860px){.mgrid{grid-template-columns:repeat(3,1fr);gap:56px 12px;--k:.3}}
@media (max-width:480px){.mgrid{--k:.26}.mlab,.mno{font-size:15px}.mdots{height:56px;margin:18px 0}}

.action-dialog{border:1px solid #e6e6e6;border-radius:16px;padding:32px;max-width:min(440px,90vw);color:var(--ink);font-family:var(--display)}
.action-dialog::backdrop{background:#0004;backdrop-filter:blur(8px)}
.action-dialog h2{margin:0 0 12px;font-size:28px;letter-spacing:-.03em}
.action-dialog p{line-height:1.5;margin:0 0 24px}
@media(max-width:540px){.mgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 12px}.map .mlab{font-size:13px}.map .mcol{min-width:0}.story:not(:has(.sketch)){padding-inline:20px}.ed-fab{max-width:95vw;flex-wrap:wrap}}