*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--floor);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:var(--sh-ring)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}

.shell{max-width:var(--col);margin:0 auto;min-height:100%;background:var(--paper);position:relative;transform-origin:50% 0;transition:transform .38s var(--ease),filter .38s var(--ease),border-radius .38s var(--ease)}
body.sheet-open .shell{transform:scale(.955);border-radius:var(--r-card-lg);overflow:hidden;filter:brightness(.82)}
body.sheet-2 .shell{transform:scale(.93)}
.top{position:sticky;top:0;z-index:var(--z-top);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:calc(8px + env(safe-area-inset-top,0px)) var(--sp-3) var(--sp-2);background:var(--paper);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;min-height:var(--tap)}
.brand img{height:32px;width:auto}
.brand-line{font-size:var(--fs-xs);line-height:var(--lh-tight);color:var(--mute);max-width:7.5em}
.top-right{display:flex;align-items:center;gap:var(--sp-half)}
.icon-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:var(--r-sm);position:relative}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge-count{position:absolute;top:4px;right:2px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-xs);background:var(--pink);color:var(--ink);font-size:var(--fs-xs);font-weight:700;line-height:20px;text-align:center;border:2px solid var(--paper)}
.bump{animation:bump .5s var(--spring)}
@keyframes bump{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.avatar-btn{position:relative;width:var(--tap);height:var(--tap);border-radius:50%;padding:3px;border:2px solid var(--ink);background:var(--pink)}
.avatar-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 88%}
.app{outline:none;min-height:calc(100vh - 61px);padding-bottom:calc(var(--dock-h) + var(--sp-5))}
.app:focus-visible{outline:none;box-shadow:none}

h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:var(--lh-tight);margin:0;text-wrap:balance}
.h-hero{font-size:var(--fs-hero);letter-spacing:.01em}
.h-sec{font-size:var(--fs-xl)}
.h-card{font-size:var(--fs-card)}
p{margin:0}
.mute{color:var(--mute)}
.small{font-size:var(--fs-sm)}
.price{font-weight:700;font-variant-numeric:tabular-nums}

.pad{padding:0 var(--gutter)}
.sec{padding:var(--sp-6) var(--gutter) 0}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.quiet{padding:var(--sp-4);border-radius:var(--r-panel);background:var(--set)}

.steps{display:flex;gap:var(--sp-half);align-items:center;font-size:var(--fs-note);color:var(--mute)}
.steps i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:var(--fs-xs);color:var(--ink)}
.steps i.on{background:var(--pink);border:2px solid var(--ink)}
.steps i.done{opacity:.7}
.steps.labeled span{font-size:var(--fs-note);color:var(--ink);margin:0 4px 0 -2px}

.bar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3) var(--sp-1)}
.bar .grow{flex:1;min-width:0;font-family:var(--font-display);font-size:var(--fs-lg);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .spacer{width:var(--tap);flex:0 0 auto}
.back{width:var(--tap);height:var(--tap);border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex:0 0 auto;text-decoration:none}
.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back.labeled{width:auto;padding:0 14px 0 8px;gap:4px;display:inline-flex;align-items:center;border-radius:var(--r-pill);font-size:var(--fs-ui)}

.btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--btn-h);padding:0 22px;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-btn);text-decoration:none;border:2px solid var(--ink);background:var(--paper);color:var(--ink);text-align:center;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn.pri{background:var(--pink);box-shadow:var(--sh-press)}
.btn.pri:focus-visible{box-shadow:var(--sh-press),var(--sh-ring)}
.btn.pri:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.ghost{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:4px;font-weight:500;min-height:var(--tap)}
.btn.on-stage{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--set);box-shadow:none;border-style:dashed;color:var(--mute);cursor:default}
.btn[aria-busy="true"]{cursor:progress;color:transparent;position:relative}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:3px solid var(--ink);border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.wide{width:100%}
.link{font-size:var(--fs-ui);text-decoration:underline;text-underline-offset:4px;min-height:var(--tap);display:inline-flex;align-items:center}
.on-dark .link,.stage .link{color:var(--paper)}

.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--col);padding:10px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(255,255,255,0),var(--paper) 30%);z-index:var(--z-dock);transition:opacity .25s}
.dock.solid{background:var(--paper);border-top:1px solid var(--line)}
.dock.split{display:flex;gap:var(--sp-2)}
.dock.split>.btn:first-child{flex:0 0 auto}
.dock.split>.btn:last-child{flex:1}
body.sheet-open .dock{visibility:hidden}

.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding:8px 8px 10px;margin:-8px -8px -6px;scrollbar-width:none}
.chip{min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-pill);border:1.5px solid var(--ink);display:inline-flex;align-items:center;gap:var(--sp-half);font-size:var(--fs-ui);white-space:nowrap;background:var(--paper)}
.chip[aria-checked="true"],.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chip[aria-disabled="true"]{border-style:dashed;color:var(--mute)}
.chip.on-stage{color:var(--paper);border-color:var(--paper);background:transparent}
.chip.on-stage[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);font-size:var(--fs-note);font-weight:700;line-height:1.4}
.tag.pink{background:var(--pink)}
.tag.ink{background:var(--ink);color:var(--paper)}

.work{position:relative;border-radius:var(--r-work);background:var(--paper);padding:7px;box-shadow:var(--sh-work);border:1px solid rgba(0,0,0,.08);display:block;text-decoration:none}
.work img{border-radius:var(--r-work-in);width:100%;aspect-ratio:2/3;object-fit:contain;background:var(--set)}
.work.sq img{object-fit:cover}
.work.sq img{aspect-ratio:1/1}
.work .credit{position:absolute;left:14px;bottom:14px;right:14px;display:flex;gap:var(--sp-half);flex-wrap:wrap}
.work.skeleton img{visibility:hidden}
.work.skeleton{background:var(--set)}

.field{display:flex;flex-direction:column;gap:var(--sp-half)}
.field label,.field .label{font-weight:700;font-size:var(--fs-ui)}
.input{min-height:var(--btn-h);border:2px solid var(--ink);border-radius:var(--r-field);padding:0 14px;font-size:var(--fs-lg);font-family:var(--font-body);background:var(--paper);color:var(--ink);width:100%}
.input:focus{outline:3px solid var(--ink);outline-offset:1px;box-shadow:var(--sh-ring)}
.input[aria-invalid="true"]{border-color:var(--bad)}
.otp{letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums}
.err{color:var(--bad);font-size:var(--fs-sm);font-weight:500}
.err:empty{display:none}
.note{font-size:var(--fs-sm);color:var(--mute)}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3);border-radius:var(--r-field);background:var(--set);font-size:var(--fs-ui)}
.check input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--ink);flex:0 0 auto}
.alert{border:2px solid var(--ink);border-left-width:8px;border-left-color:var(--bad);border-radius:var(--r-field);padding:var(--sp-3) 14px;background:var(--paper);display:flex;flex-direction:column;gap:4px}
.alert b{font-size:var(--fs-md)}
.alert.info{border-left-color:var(--ink)}
.devcode{font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3);border:1.5px dashed var(--ink);border-radius:var(--r-sm)}

.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1.5px solid var(--ink);border-radius:var(--r-field);width:100%;text-align:left;min-height:56px;background:var(--paper)}
.toggle-row .sub{display:block;font-size:var(--fs-sm);color:var(--mute)}
.switch{width:52px;height:32px;border-radius:var(--r-panel);background:var(--set);border:2px solid var(--ink);position:relative;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);transition:transform .2s}
.toggle-row[aria-checked="true"] .switch{background:var(--pink)}
.toggle-row[aria-checked="true"] .switch::after{transform:translateX(20px)}
.guarantee{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-ui)}
.guarantee svg{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.8}

.slots{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.slot{position:relative;aspect-ratio:3/4;border-radius:var(--r-panel);border:2px dashed var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-half);text-align:center;font-size:var(--fs-ui);overflow:hidden;background:var(--paper)}
.slot.filled{border-style:solid}
.slot.bad{border-color:var(--bad)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .scan{position:absolute;left:0;right:0;height:38%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.22));top:-40%;animation:scan 1.1s var(--ease) infinite}
@keyframes scan{to{top:100%}}
.slot .res{position:absolute;left:8px;right:8px;bottom:8px;display:flex;justify-content:center}
.slot .plus{font-size:var(--fs-2xl);line-height:1}
.strip{display:flex;gap:10px;overflow-x:auto;padding:4px var(--gutter) 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ph{flex:0 0 92px;height:122px;border-radius:var(--r-field);overflow:hidden;position:relative;border:2px solid transparent;scroll-snap-align:start;background:var(--set)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px var(--pink)}
.ph .ok{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);display:grid;place-items:center}
.ph .ok svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:3}
.ph.add{display:grid;place-items:center;border:2px dashed var(--ink);background:var(--paper);font-size:var(--fs-sm);text-align:center}
.ph.dim img{opacity:.45}
.ph .tag{position:absolute;left:4px;bottom:4px;font-size:var(--fs-xs);padding:1px 6px}
.who{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:2px solid var(--ink);border-radius:var(--r-panel)}
.who img,.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 88%;background:var(--pink);border:2px solid var(--ink);flex:0 0 auto}

.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-scrim);opacity:0;transition:opacity .3s}
.scrim.on{opacity:1}
.sheets{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);pointer-events:none}
.sheet{position:fixed;left:50%;bottom:var(--kb);width:100%;max-width:var(--col);max-height:92vh;max-height:calc(var(--vvh) * .92);display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-sheet) var(--r-sheet) 0 0;border:2px solid var(--ink);border-bottom:0;transform:translate(-50%,105%);transition:transform var(--t-sheet) var(--ease);pointer-events:auto;box-shadow:var(--sh-sheet)}
.sheet.on{transform:translate(-50%,0)}
.sheet.lvl2{z-index:2}
.sheet.dragging{transition:none}
.sheet.drawer{left:max(0px,calc(50% - var(--col) / 2));top:0;bottom:0;max-height:none;width:min(84vw,340px);max-height:none;height:100%;border-radius:0 var(--r-sheet) var(--r-sheet) 0;border:2px solid var(--ink);border-left:0;transform:translateX(-105%);padding-top:env(safe-area-inset-top,0px)}
.sheet.drawer.on{transform:none}
.sheet.drawer .grab{display:none}
.sheet.drawer .sheet-head{padding-top:var(--sp-3)}
.grab{padding:10px 0 4px;display:grid;place-items:center;touch-action:none;cursor:grab;min-height:30px}
.grab span{width:44px;height:5px;border-radius:var(--r-hair);background:var(--line-strong)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px var(--gutter) 10px}
.sheet-head h2{font-size:var(--fs-card)}
.sheet-body{overflow-y:auto;padding:4px var(--gutter) var(--gutter);display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.sheet-body>*{flex-shrink:0}
.sheet-foot{padding:10px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--paper)}
.x{width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.x svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}
.lines>div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.lines>div:last-child{border:0}
.citem{display:flex;gap:var(--sp-3);align-items:center}
.citem>img{width:60px;height:80px;object-fit:contain;border-radius:var(--r-xs);border:1px solid var(--line);background:var(--set)}
.citem .txt{flex:1;min-width:0}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:var(--tap);height:var(--tap);border-radius:50%;border:1.5px solid var(--ink);font-size:var(--fs-card)}
.qty span{min-width:22px;text-align:center;font-weight:700}
.todo{display:flex;flex-direction:column;gap:10px}
.todo a,.todo button{display:flex;gap:var(--sp-3);align-items:center;padding:10px;border:1.5px solid var(--ink);border-radius:var(--r-field);text-align:left;text-decoration:none;width:100%}
.todo img{width:54px;height:80px;object-fit:cover;border-radius:var(--r-xs);flex:0 0 auto;background:var(--set)}
.todo .grp{font-size:var(--fs-note);color:var(--mute);margin:10px 0 2px}

.stage{position:fixed;inset:0;z-index:var(--z-stage);background:var(--ink);color:var(--paper);opacity:0;transition:opacity var(--t-stage) var(--ease);display:flex;flex-direction:column;align-items:center;overflow-y:auto}
.stage.on{opacity:1}
.stage.leaving{transition-duration:.3s;opacity:0}
.stage-in{width:100%;max-width:var(--col);min-height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) var(--sp-5) calc(24px + env(safe-area-inset-bottom,0px));gap:var(--sp-4);position:relative}
.spot{position:absolute;inset:0;background:radial-gradient(60% 42% at 50% 34%,rgba(255,255,255,.14),rgba(255,255,255,0) 70%);pointer-events:none}
.stage-bar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:var(--tap);z-index:1}
.stage-bar .steps{color:var(--on-stage)}
.stage-bar .steps i{border-color:var(--paper);color:var(--paper)}
.stage-bar .steps i.on{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.stage .back{border-color:var(--paper);color:var(--paper)}
.stage :focus-visible,.lb :focus-visible{outline-color:var(--paper);box-shadow:var(--sh-ring)}
.film{width:66%;max-width:300px;position:relative;z-index:1;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.film:not(.developing):not(.previewing):not(.failed){cursor:zoom-in}
.film .work{box-shadow:0 30px 60px -20px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.12)}
.film .work img{transition:filter 2.4s var(--ease)}
.film.developing .work img{filter:blur(18px) grayscale(1) contrast(.6) brightness(1.2)}
.film .orig{position:absolute;inset:7px;border-radius:var(--r-work-in);overflow:hidden;clip-path:circle(0 at var(--px,50%) var(--py,50%));transition:clip-path .45s var(--ease)}
.film .orig img{width:100%;height:100%;object-fit:cover}
.film.peek .orig{clip-path:circle(150% at var(--px,50%) var(--py,50%))}
.film .orig-tag{position:absolute;top:14px;left:14px;opacity:0;transition:opacity .2s;z-index:2}
.film.peek .orig-tag{opacity:1}
.progress{width:72%;max-width:300px;height:4px;border-radius:var(--r-hair);background:rgba(255,255,255,.18);overflow:hidden;z-index:1}
.progress span{display:block;height:100%;width:0;background:var(--pink);transition:width .3s linear}
.progress.failed span{background:var(--on-stage-line)}
.stage-note{font-size:var(--fs-sm);color:var(--on-stage-mute);text-align:center;z-index:1}
.credits{text-align:center;display:flex;flex-direction:column;gap:4px;z-index:1}
.credits .role{font-size:var(--fs-note);color:var(--on-stage-mute);letter-spacing:.08em}
.credits .name{font-family:var(--font-display);font-size:var(--fs-stage);line-height:1.15}
.credits .meta{font-size:var(--fs-ui);color:var(--on-stage)}
.credits>*{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.credits.in>*{opacity:1;transform:none}
.credits.in>.owner{opacity:.75}
.credits.in>*:nth-child(2){transition-delay:.12s}.credits.in>*:nth-child(3){transition-delay:.24s}.credits.in>*:nth-child(4){transition-delay:.36s}
.stage-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:auto;z-index:1}
.stage-price{font-size:var(--fs-ui);text-align:center;color:var(--on-stage)}

.idcard-wrap{perspective:1200px;width:92%;max-width:360px;z-index:1;margin-top:auto}
.idcard{position:relative;transform-style:preserve-3d;transition:transform .8s var(--ease);aspect-ratio:1.42/1;cursor:pointer}
.idcard.flip{transform:rotateY(180deg)}
.idcard.rise{animation:rise .9s var(--spring) both}
@keyframes rise{from{transform:translateY(120%) rotate(-10deg) scale(.7);opacity:0}to{transform:none;opacity:1}}
.idface{position:absolute;inset:0;border-radius:var(--r-card-lg);background:var(--paper);color:var(--ink);backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:14px;display:grid;grid-template-columns:38% 1fr;gap:var(--sp-3);border:2px solid var(--ink);overflow:hidden}
.idface.rear{transform:rotateY(180deg);display:flex;flex-direction:column;gap:var(--sp-3);background:var(--pink)}
.idphoto{border-radius:var(--r-sm);overflow:hidden;background:var(--set);position:relative}
.idphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 82%;animation:develop 2.2s var(--ease) both}
@keyframes develop{from{filter:blur(10px) grayscale(1) brightness(1.6)}to{filter:none}}
.idinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.idinfo .k{font-size:var(--fs-xs);color:var(--mute)}
.idinfo .nm{font-family:var(--font-display);font-size:var(--fs-2xl);line-height:1.1;overflow-wrap:anywhere}
.idinfo .no{font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}
.idinfo .logo{margin-top:auto;height:26px;width:auto;align-self:flex-start}
.stamp{position:absolute;right:12px;bottom:12px;width:60px;height:60px;z-index:3;border-radius:50%;border:3px solid var(--pink);display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-card);color:var(--ink);transform:rotate(-14deg) scale(0);opacity:0;background:rgba(255,255,255,.82)}
.stamp.hit{animation:stamp .45s var(--spring) forwards}
@keyframes stamp{0%{transform:rotate(-14deg) scale(2.2);opacity:0}100%{transform:rotate(-14deg) scale(1);opacity:1}}

.pgal{background:var(--set)}
.pgal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.pgal-track::-webkit-scrollbar{display:none}
.pslide{flex:0 0 100%;scroll-snap-align:center;position:relative;border:0;background:transparent;padding:0;cursor:zoom-in}
.pslide:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.pslide-cap{position:absolute;left:12px;bottom:12px}
.pgal-foot{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-2) var(--gutter) 10px;background:var(--paper)}
.pgal-dots{display:flex;gap:var(--sp-half);align-items:center}
.pgal-dots i{width:8px;height:8px;border-radius:var(--r-hair);background:var(--line-strong);transition:width .2s}
.pgal-dots i.on{background:var(--ink);width:20px}
.mock{position:relative;height:min(60vh,440px);min-height:320px;display:grid;place-items:center;overflow:hidden;background:var(--set)}
.mock>.scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mock .composite{position:relative;width:min(88%,380px);aspect-ratio:1/1}
.mock .composite>img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mock .print{position:absolute;overflow:hidden}
.mock .print img{width:100%;height:100%;object-fit:contain;object-position:50% 0;mix-blend-mode:multiply}
.mock.closeup{background:repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 2px,rgba(0,0,0,0) 2px 5px),var(--paper)}
.mock.closeup img{height:125%;width:auto;max-width:none;mix-blend-mode:multiply;transform:rotate(-3deg)}
.mock.worn{background:var(--floor)}
.mock.worn .composite{height:100%;width:auto;aspect-ratio:1/1;max-width:100%}
.mock.worn .composite>img{object-fit:cover;mix-blend-mode:normal}
.lb{position:fixed;inset:0;z-index:var(--z-lightbox);background:var(--ink);color:var(--paper);display:flex;flex-direction:column;opacity:0;transition:opacity .25s;touch-action:none}
.lb.on{opacity:1}
.lb-bars{display:flex;gap:4px;padding:calc(10px + env(safe-area-inset-top,0px)) var(--sp-3) 6px}
.lb-bars i{flex:1;height:3px;background:var(--on-stage-line);border-radius:var(--r-hair);overflow:hidden}
.lb-bars b{display:block;height:100%;width:0;background:var(--paper)}
.lb-bars i.done b{width:100%}
.lb-bars i.cur b{animation:lbfill var(--lb-interval) linear forwards}
.lb.paused .lb-bars i.cur b{animation-play-state:paused}
@keyframes lbfill{to{width:100%}}
.lb-top{display:flex;align-items:center;gap:4px;padding:0 6px 0 var(--gutter)}
.lb-count{flex:1;font-variant-numeric:tabular-nums;font-size:var(--fs-ui)}
.lb-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;color:var(--paper);border-radius:50%}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.lb-btn:focus-visible,.lb-half:focus-visible{outline:3px solid var(--paper);outline-offset:-3px}
.lb-stage{position:relative;flex:1;min-height:0}
.lb-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.lb-slide.on{opacity:1}
.lb-stage{overflow:hidden}
.lb-slide>*{transform-origin:center}
.lb.zoomed .lb-half{pointer-events:none}
.lb.zoomed .lb-slide.on>*{cursor:grab}
.lb-slide>*.snap{transition:transform .22s var(--ease)}
.lb-zoomfab{position:absolute;right:var(--sp-4);bottom:var(--sp-4);z-index:2;width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:var(--r-pill);border:1.5px solid var(--paper);background:var(--ink);color:var(--paper)}
.lb-zoomfab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.lb-zoomfab[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.lb-slide>*.snap{transition:none}}
.lb-slide .art-view img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-drag:none}
.lb-slide .mock{height:100%;max-height:none;min-height:0}
.lb-half{position:absolute;top:0;bottom:0;width:32%}
.lb-half.prev{left:0}.lb-half.next{right:0}
.lb-cap{text-align:center;padding:var(--sp-3) var(--gutter) 2px}
.lb-hint{text-align:center;font-size:var(--fs-note);color:var(--on-stage-mute);padding:2px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px))}

.wall{background:var(--set);padding:18px 0 0;position:relative;transition:transform .35s var(--ease)}
.wall-head{padding:0 var(--gutter) 10px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;transition:opacity .25s}
.wall-head .small{text-align:right}
.count{font-family:var(--font-display);font-size:var(--fs-md)}
.count b{font-size:var(--fs-count);font-weight:400}
.wall-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:0 var(--gutter) 4px}
.navbtn{width:var(--tap);height:var(--tap);border-radius:50%;border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center}
.navbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.navbtn.nx svg{transform:scaleX(-1)}
.navbtn[aria-disabled="true"]{opacity:.35}
.wpos{font-variant-numeric:tabular-nums;font-size:var(--fs-ui);min-width:4ch;text-align:center}
.track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px calc(50% - 84px) 8px;scrollbar-width:none;position:relative}
.track:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.rail{position:absolute;left:0;width:var(--railw,100%);top:14px;height:2px;background:rgba(0,0,0,.25)}
.frame{flex:0 0 168px;border-radius:var(--r-work);scroll-snap-align:center;position:relative;transition:transform .35s var(--ease),opacity .35s,filter .35s}
.frame::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:16px;background:rgba(0,0,0,.35)}
.frame .work{padding:6px}
.frame .lbl{font-size:var(--fs-note);text-align:center;margin-top:var(--sp-2);color:var(--mute)}
.frame .printed{display:inline-block;margin-left:var(--sp-2);padding:0 7px;background:var(--floor);border-radius:var(--r-hair);color:var(--ink);font-size:var(--fs-xs);line-height:18px}
.frame.center{transform:translateY(-4px) scale(1.04)}
.frame.new{animation:dropin .9s var(--spring) both}
@keyframes dropin{from{transform:translateY(-130%) rotate(8deg);opacity:0}to{transform:none;opacity:1}}
.floor{height:90px;position:relative;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--floor);overflow:hidden}
.walker{position:absolute;bottom:10px;left:50%;height:58px;width:auto;--wx:0px;transform:translateX(calc(-50% + var(--wx)));transition:transform .45s var(--spring),left .6s var(--ease)}
.walker.flip{scale:-1 1}
.wall-chips{padding:var(--sp-3) var(--gutter) 0}

.fx{position:fixed;left:50%;top:var(--toast-top);transform:translateX(-50%);z-index:var(--z-fx);pointer-events:none;width:min(92%,400px);display:flex;flex-direction:column;gap:var(--sp-2);align-items:center}
.toast{background:var(--ink);color:var(--paper);padding:10px var(--sp-4);border-radius:var(--r-pill);font-size:var(--fs-ui);animation:toast 2.6s var(--ease) forwards;text-align:center}
@keyframes toast{0%{opacity:0;transform:translateY(-10px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}
.flyer{position:fixed;z-index:var(--z-fx);pointer-events:none;border-radius:var(--r-xs);overflow:hidden;box-shadow:var(--sh-fly)}
.flyer img{width:100%;height:100%;object-fit:cover}
.ready-pill{position:fixed;left:50%;transform:translateX(-50%);top:var(--toast-top);z-index:var(--z-fx);white-space:nowrap;background:var(--pink);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-pill);min-height:48px;padding:0 20px;font-weight:700;box-shadow:var(--sh-press)}

::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-base)}
::view-transition-group(work){animation-duration:var(--t-work);animation-timing-function:var(--ease)}
.fade-in{animation:fadein var(--t-base) var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.12s!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .film .work img{filter:none!important}
  .toast{animation:none!important;opacity:1}
  .walker,.lb-slide{transition:none}
}
@media (min-width:431px){.shell{box-shadow:0 0 0 1px rgba(0,0,0,.06)}}

html.shot *,html.shot *::before,html.shot *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}

.fold{border:1.5px solid var(--ink);border-radius:var(--r-field);padding:0 var(--sp-3);background:var(--paper)}
.fold summary{min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-weight:700;cursor:pointer;list-style:none;padding:var(--sp-2) 0}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"＋";font-weight:400;flex:0 0 auto}
.fold[open] summary::after{content:"－"}
.fold .stack-s{display:flex;flex-direction:column;gap:var(--sp-2);padding-bottom:var(--sp-3)}
.folds{display:flex;flex-direction:column;gap:var(--sp-2)}

.rows{list-style:none;margin:0;padding:0;border:1.5px solid var(--ink);border-radius:var(--r-panel);overflow:hidden;background:var(--paper)}
.rows>li+li{border-top:1px solid var(--line)}
.rowlink{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:60px;padding:var(--sp-2) var(--sp-4);text-decoration:none;text-align:left;color:var(--ink)}
.rowlink .grow1{flex:1;min-width:0;display:flex;flex-direction:column}
.rowlink .sub{font-size:var(--fs-sm);color:var(--mute)}
.rowlink .val{font-variant-numeric:tabular-nums;font-size:var(--fs-ui)}
.rowlink svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.rowlink:focus-visible{outline-offset:-3px}

.btn.bad{border-color:var(--bad);color:var(--bad);background:var(--paper)}

.banner{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--col);z-index:var(--z-banner);background:var(--paper);border:2px solid var(--ink);border-bottom:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--sh-sheet);padding:var(--sp-4) var(--gutter) calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--sp-3)}
.banner .row{align-items:flex-start}
.banner .btns{display:flex;align-items:center;gap:var(--sp-3)}
.banner .btns .btn{flex:1}
.banner .btns .link{flex:0 0 auto;min-height:var(--tap)}
.banner .btns .btn{padding:0 var(--sp-3)}
body.sheet-open .banner{visibility:hidden}
.banner .link{min-height:0;display:inline;font-size:var(--fs-sm)}
body.bare .banner{display:none}

.prose{display:flex;flex-direction:column;gap:var(--sp-3);line-height:1.75;max-width:34em}
.prose h2{font-size:var(--fs-xl);margin-top:var(--sp-4)}
.prose h3{font-family:var(--font-body);font-weight:700;font-size:var(--fs-md);margin-top:var(--sp-2)}
.prose ul,.prose ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:var(--sp-1)}
.prose a{text-underline-offset:3px}
.tbd{color:var(--mute);border-left:4px solid var(--line-strong);padding-left:var(--sp-3)}

.tldr{background:var(--set);border-radius:var(--r-panel);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.tldr h2{font-size:var(--fs-card);margin:0}

.track-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);font-size:var(--fs-note);text-align:center}
.track-steps li{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);color:var(--mute);position:relative}
.track-steps li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--mute);background:var(--paper)}
.track-steps li.done{color:var(--ink)}
.track-steps li.done::before{background:var(--ink);border-color:var(--ink)}
.track-steps li.on{color:var(--ink);font-weight:700}
.track-steps li.on::before{background:var(--pink);border-color:var(--ink)}

.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.ph-grid .ph{flex:none;width:100%;height:auto;aspect-ratio:3/4}
.ph-grid .ph img{position:absolute;inset:0}
.ph .tags{position:absolute;left:4px;bottom:4px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ph .tags .tag{position:static}

.frame-empty{position:relative;width:40%;max-width:170px;aspect-ratio:2/3;margin:0 auto var(--sp-5);border-radius:var(--r-work);border:2px dashed var(--line-strong);background:var(--set)}
.frame-empty img{position:absolute;width:58%;height:auto;right:-14%;bottom:-6%}
.frame-empty.sleep img{right:auto;left:50%;bottom:16%;transform:translateX(-50%) rotate(-8deg);opacity:.9}


.draft{display:flex;flex-direction:column;gap:2px;border:2px dashed var(--ink);border-radius:var(--r-field);padding:var(--sp-3);font-size:var(--fs-sm);background:var(--paper)}
.idface *{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.idface.front,.idface.rear{transition:visibility 0s .4s}
.idcard.flip .idface.front,.idcard:not(.flip) .idface.rear{visibility:hidden}
.avatar-btn img{position:relative}
.avatar-btn.drawing::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--pink) 0 35%,var(--paper) 35% 100%);animation:dnSpin 1s linear infinite}
@keyframes dnSpin{to{transform:rotate(1turn)}}
.has-new{position:relative}
.has-new::after{content:"";position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--pink);border:2px solid var(--ink)}
.tn-dot{display:inline-block;width:10px;height:10px;margin-left:6px;border-radius:50%;vertical-align:middle}
.tn-dot.drawing{border:2px solid var(--line);border-top-color:var(--pink);animation:dnSpin .9s linear infinite}
.tn-dot.new{background:var(--pink);border:2px solid var(--ink)}
@media (prefers-reduced-motion:reduce){.avatar-btn.drawing::before,.tn-dot.drawing{animation:none}}
.draw-notice{position:fixed;left:8px;right:8px;top:calc(8px + env(safe-area-inset-top,0px));z-index:var(--z-fx);max-width:calc(var(--col) - 16px);margin:0 auto;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--sh-press);transform:translateY(calc(-100% - 24px));transition:transform .3s var(--ease)}
.draw-notice.in{transform:none}
.dn-thumb{flex:none;width:44px;height:44px;border-radius:var(--r-sm);overflow:hidden;background:var(--line)}
.dn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dn-thumb.blur{background:radial-gradient(circle,var(--line),var(--ink))}
.dn-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.dn-txt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dn-txt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-txt b{font-size:var(--fs-ui)}
.dn-txt small{font-size:var(--fs-note);color:var(--mute)}
.draw-notice .btn.sm{flex:none;white-space:nowrap;min-height:40px;padding:0 var(--sp-3)}
@media (prefers-reduced-motion:reduce){.draw-notice{transition:none}}
.frame.drawing .work{position:relative;aspect-ratio:2/3;display:grid;place-items:center;overflow:hidden}
.frame.drawing .dw-blur{position:absolute;inset:6px;border-radius:var(--r-work-in);overflow:hidden;background:radial-gradient(circle,var(--line),var(--ink));animation:dwPulse 1.6s ease-in-out infinite}
.frame.drawing .dw-blur img{width:100%;height:100%;object-fit:cover;filter:blur(6px)}
.frame.drawing .dw-tag{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-pill);padding:2px 10px;font-size:var(--fs-note);font-weight:700}
@keyframes dwPulse{50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.frame.drawing .dw-blur{animation:none}}
.wall-first{display:flex;justify-content:center;padding-top:var(--sp-6)}
img.on-dark{background:var(--ink)}
.tn-me.drawing,.tn-me.has-new{position:relative;overflow:visible!important;padding:3px!important}
.tn-me.drawing img,.tn-me.has-new img{position:relative}
.tn-me.drawing::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--pink) 0 35%,var(--paper) 35% 100%);animation:dnSpin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.tn-me.drawing::before{animation:none}}