/* Layout: one phone-width column. Playful collectible-game look kept minimal: light page, white panels,
   ink outlines with crisp "toy" shadows on controls, one sunny yellow accent; each challenge card carries its own pattern.
   Single light theme by choice. */
:root{
  color-scheme:light;
  --bg:#F3F2EE; --surface:#FFFFFF; --surface-2:#F7F6F2; --surface-3:#EBEAE4;
  --ink:#161616; --ink-2:#4A4945; --muted:#8C8A83; --line:#E4E2DB; --line-2:#CFCCC3;
  --yellow:#FFD23F; --yellow-soft:#FFF3C4;
  --red:#F2473B; --red-soft:#FFE4E0;
  --ok:#20A35B; --ok-soft:#DEF5E7;
  --stone:#A6A199; --stone-hi:#D4D0C9; --stone-lo:#78736C;
  --dia:#38B4E6; --dia-hi:#C6EEFF; --dia-lo:#127FB3;
  --m-gold:#FFC83D; --m-silver:#CDD2DA; --m-bronze:#E8A06A;
  --overlay:rgba(22,22,22,.46); --scrim:rgba(22,22,22,.62);
  --pop:0 2px 0 var(--ink); --pop-lg:0 3px 0 var(--ink);
  --a0:#FFD6A3; --a1:#BDE2FF; --a2:#FFC4D8; --a3:#C8EFBD; --a4:#E0D1FF; --a5:#FFEEA0; --a6:#B5ECE3; --a7:#FFCFC0;
  --f-body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-display:"Black Han Sans","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --col:520px;
  /* card design fallback until a challenge sets its own */
  --d-b1:#FFD84D; --d-b2:#FFCA3A; --d-ac:#FF6A3D; --d-ac2:#FF9466; --d-on:#161616; --d-acon:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lock,html.lock body{overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;border-radius:8px}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3,h4{margin:0;line-height:1.3;text-wrap:balance}
p{margin:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i.fill{fill:currentColor;stroke:none}
.gem{width:18px;height:18px;flex:none}
.stone .g1{fill:var(--stone)} .stone .g2{fill:var(--stone-hi)} .stone .g3{fill:var(--stone-lo)}
.dia .g1{fill:var(--dia)} .dia .g2{fill:var(--dia-hi)} .dia .g3{fill:var(--dia-lo)} .dia .g4{fill:none;stroke:var(--dia-lo);stroke-width:.8}
.center{text-align:center}
.muted{color:var(--muted)}
.sm{font-size:13px}

/* ---------- frame ---------- */
.app{max-width:var(--col);margin-inline:auto;min-height:100vh;background:var(--bg);padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
@media (min-width:560px){.app{box-shadow:0 0 0 1px var(--line)}}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.top{background:var(--surface)}
.top.boss{box-shadow:inset 0 4px 0 var(--yellow)}
.top-in{padding-block:12px 14px;display:flex;flex-direction:column;gap:12px}
.top-row{display:flex;align-items:center;gap:10px;min-height:38px}
.brand{display:inline-flex;align-items:center;gap:6px;flex:none;line-height:1}
.brand-word{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:17px;letter-spacing:.03em;padding:5px 8px 4px;border-radius:8px;background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.brand small{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--muted)}
.seg{display:inline-flex;flex:none;background:var(--surface);border-radius:12px;padding:3px;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.seg button{height:28px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:900;color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--yellow)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.me-btn{flex:none;border-radius:50%;box-shadow:var(--pop)}
.pub-btn{height:34px;padding:0 12px;border-radius:11px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:900;display:inline-flex;align-items:center;gap:5px;box-shadow:inset 0 0 0 2px var(--ink),var(--pop);white-space:nowrap}
.pub-btn .i{width:16px;height:16px;color:var(--ok);stroke-width:2.6}
.pub-btn.on{background:var(--yellow);color:var(--ink)}
.pub-btn .n{min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:var(--yellow);font-size:11px;display:inline-grid;place-items:center;padding:0 5px}
.pub-btn:disabled{cursor:default}
.pub-chip{height:32px;padding:0 11px;border-radius:10px;background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:900;white-space:nowrap;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.ch-row{display:flex;align-items:center;gap:8px;min-width:0}
.ch-switch{display:flex;align-items:center;gap:3px;min-width:0;flex:0 1 auto;text-align:left;padding:2px 0}
.ch-title{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:18px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ch-switch .i{width:18px;height:18px;stroke-width:2.6}
.ch-count{flex:none;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.wallet{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.coin{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 9px 0 5px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink),var(--pop);font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:14px;line-height:1;font-variant-numeric:tabular-nums}
.coin .gem{width:17px;height:17px}
.coin{position:relative}
.coin.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
.coin.bump::after{content:"";position:absolute;inset:-3px;border-radius:999px;box-shadow:0 0 0 3px var(--yellow),0 0 0 4.5px var(--ink);pointer-events:none;animation:coinRing .5s ease-out forwards}
@keyframes bump{40%{transform:scale(1.25)}}
@keyframes coinRing{from{opacity:1;transform:scale(.92)}to{opacity:0;transform:scale(1.5)}}
.set-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:11px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink),var(--pop);font-size:13px;font-weight:900;flex:none}
.set-btn .i{width:17px;height:17px}
.prog{display:flex;align-items:center;gap:10px}
.bar{flex:1;height:14px;border-radius:999px;background:var(--surface);position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px var(--ink)}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--d-ac);transition:width .6s cubic-bezier(.2,.8,.3,1)}
.bar i.on{min-width:14px;box-shadow:inset 0 0 0 2px var(--ink),inset 0 4px 0 2px rgba(255,255,255,.35)}
.prog-pct{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:17px;line-height:1;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.prog-meta{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);box-shadow:0 -1px 0 var(--line),0 2px 0 var(--ink)}
.tabs-in{display:flex}
.tab{flex:1;height:48px;font-size:14.5px;font-weight:700;color:var(--muted);position:relative}
.tab[aria-selected="true"]{color:var(--ink);font-weight:900}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:5px;border-radius:5px 5px 0 0;background:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--ink)}

.main{padding-block:18px 28px;display:flex;flex-direction:column;gap:16px}
.subseg{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:14px;padding:4px;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.subseg button{height:36px;border-radius:10px;font-size:14px;font-weight:900;color:var(--muted)}
.subseg button[aria-selected="true"]{background:var(--ink);color:var(--yellow)}

/* ---------- buttons, chips, fields ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border-radius:13px;font-size:15px;font-weight:900;white-space:nowrap;text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn.primary{background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),var(--pop-lg)}
.btn.line{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),var(--pop-lg)}
.btn.primary:active:not(:disabled),.btn.line:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--ink),0 1px 0 var(--ink)}
.btn.dark{background:var(--ink);color:#FFFFFF}
.btn.text{color:var(--ink-2);padding:0 10px;height:40px;font-weight:700}
.btn.danger{background:var(--red);color:#FFFFFF;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.btn.danger-line{background:var(--surface);color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.btn.big{height:56px;width:100%;border-radius:15px}
.btn.big.primary,.btn.big.line{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:19px;letter-spacing:.01em}
.btn.sm{height:36px;padding:0 13px;font-size:13.5px;border-radius:11px}
.btn.block{width:100%}
.btn:disabled{background:var(--surface-3);color:var(--muted);box-shadow:inset 0 0 0 2px var(--line-2);cursor:not-allowed;transform:none}
.btn .gem{width:22px;height:22px}
.icon-btn{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;color:var(--ink);flex:none}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn.line{background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.icon-btn.sm{width:32px;height:32px;border-radius:10px}
.link-btn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:900;color:var(--ink);height:36px;padding:0 2px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.link-btn .i{width:18px;height:18px}
.ghost-add{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 2px;color:var(--ink);font-weight:900;font-size:14px;align-self:flex-start}
.ghost-add .i{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.chip .i{width:14px;height:14px}
.chip.ok{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 1.5px var(--ok)}
.chip.hot{background:var(--yellow)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.field{display:flex;flex-direction:column;gap:8px}
.field>span{font-size:13px;font-weight:900;color:var(--ink)}
.field.sub{padding:0 4px 4px 36px}
.field small,.hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.inp,.ta{width:100%;border:0;background:var(--surface);border-radius:12px;font-size:16px;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2);transition:box-shadow .15s}
.inp{height:50px;padding:0 14px}
.ta{padding:13px 14px;min-height:110px;resize:vertical;line-height:1.6}
.inp:focus,.ta:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.inp::placeholder,.ta::placeholder{color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;height:38px;padding:0 12px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:14px;font-weight:700;color:var(--ink)}
.opt[aria-checked="true"]{background:var(--yellow);font-weight:900;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.radio-list{display:flex;flex-direction:column;gap:8px}
.radio{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;text-align:left;padding:13px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);width:100%}
.radio .dot{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink);margin-top:1px;display:grid;place-items:center;background:var(--surface)}
.radio[aria-checked="true"]{background:var(--yellow-soft);box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.radio[aria-checked="true"] .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)}
.radio b{display:block;font-size:14.5px;font-weight:900}
.radio small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.switch{width:46px;height:28px;border-radius:999px;background:var(--line-2);position:relative;flex:none;transition:background .15s;box-shadow:inset 0 0 0 2px var(--ink)}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink);transition:transform .18s}
.switch[aria-checked="true"]{background:var(--yellow)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.toggle-row b{font-size:14.5px;display:block;font-weight:900}
.toggle-row small{font-size:12.5px;color:var(--muted)}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:13px;color:var(--ink-2);line-height:1.5}
.notice .i{width:17px;height:17px;margin-top:1px}
.notice.warn{background:var(--yellow-soft);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.empty{text-align:center;padding:40px 12px;color:var(--muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty .i{width:30px;height:30px;color:var(--line-2)}

/* ---------- avatars ---------- */
.av{border-radius:50%;flex:none;display:inline-grid;place-items:center;font-weight:900;color:var(--ink);overflow:hidden;background:var(--a0);line-height:1;outline:1.5px solid var(--ink);outline-offset:-1.5px}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.t0{background:var(--a0)} .av.t1{background:var(--a1)} .av.t2{background:var(--a2)} .av.t3{background:var(--a3)}
.av.t4{background:var(--a4)} .av.t5{background:var(--a5)} .av.t6{background:var(--a6)} .av.t7{background:var(--a7)}
.av.boss{background:var(--ink);color:var(--yellow)}

/* ---------- card patterns (original designs; sizes in cqw of the nearest card/tile) ---------- */
.pbg{background-color:var(--d-b1)}
.mini>i,.ch-thumb>i{--pz:2.6}
.sw-chip>i{--pz:3}
.ptn>i{--pz:3.6}
.pack-bg{--pz:1.5}
.ex-body{--pz:1.7}
.pt-sunburst{background:radial-gradient(120% 85% at 50% 30%,rgba(255,255,255,.42),rgba(255,255,255,0) 58%),repeating-conic-gradient(from -3.75deg at 50% 30%,var(--d-b1) 0 7.5deg,var(--d-b2) 7.5deg 15deg)}
.pt-dots{background:radial-gradient(circle,var(--d-b2) 0 32%,rgba(0,0,0,0) 34%) 0 0/calc(4.6cqw*var(--pz,1)) calc(4.6cqw*var(--pz,1)),var(--d-b1)}
.pt-checker{background:conic-gradient(var(--d-b2) 0 25%,var(--d-b1) 0 50%,var(--d-b2) 0 75%,var(--d-b1) 0) 0 0/calc(7cqw*var(--pz,1)) calc(7cqw*var(--pz,1))}
.pt-stripe{background:repeating-linear-gradient(135deg,var(--d-b1) 0 calc(2.6cqw*var(--pz,1)),var(--d-b2) calc(2.6cqw*var(--pz,1)) calc(5.2cqw*var(--pz,1)))}
.pt-wave{background:radial-gradient(circle at 50% 0,rgba(0,0,0,0) 0 38%,var(--d-b2) 40% 56%,rgba(0,0,0,0) 58%) 0 0/calc(8cqw*var(--pz,1)) calc(5cqw*var(--pz,1)),var(--d-b1)}
.pt-stars{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='white'%3E%3Cpath d='M20 8l2 8 8 2-8 2-2 8-2-8-8-2 8-2z' opacity='.9'/%3E%3Cpath d='M72 46l1.5 6 6.5 1.5-6.5 1.5-1.5 6-1.5-6-6.5-1.5 6.5-1.5z' opacity='.75'/%3E%3Cpath d='M30 66l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' opacity='.8'/%3E%3Ccircle cx='48' cy='20' r='1.6' opacity='.7'/%3E%3Ccircle cx='86' cy='14' r='1.2' opacity='.6'/%3E%3Ccircle cx='12' cy='62' r='1.4' opacity='.6'/%3E%3Ccircle cx='44' cy='84' r='2' opacity='.5'/%3E%3Ccircle cx='90' cy='86' r='1.5' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0/calc(26cqw*var(--pz,1)) calc(26cqw*var(--pz,1)),radial-gradient(120% 90% at 50% 0,var(--d-b2),var(--d-b1) 70%)}
.pt-grid{background:linear-gradient(var(--d-b2) calc(.35cqw*var(--pz,1)),rgba(0,0,0,0) calc(.35cqw*var(--pz,1))) 0 0/calc(5cqw*var(--pz,1)) calc(5cqw*var(--pz,1)),linear-gradient(90deg,var(--d-b2) calc(.35cqw*var(--pz,1)),rgba(0,0,0,0) calc(.35cqw*var(--pz,1))) 0 0/calc(5cqw*var(--pz,1)) calc(5cqw*var(--pz,1)),var(--d-b1)}
.pt-holo{background:linear-gradient(125deg,var(--d-b2) 0%,var(--d-b1) 20%,#FFFFFF 36%,var(--d-b2) 50%,var(--d-b1) 66%,#FFFFFF 82%,var(--d-b2) 100%)}

/* ---------- challenge card: 63:88 ---------- */
.tcard{position:relative;display:block;width:100%;max-width:360px;margin-inline:auto;aspect-ratio:63/88;container-type:inline-size;border-radius:4.4%/3.15%;overflow:hidden;isolation:isolate;background:#FFFFFF;box-shadow:0 0 0 2px var(--ink),0 4px 0 2px var(--ink),0 22px 30px -18px rgba(0,0,0,.5)}
.tc-frame{position:absolute;inset:0;display:flex;padding:3.4cqw;background:#FFFFFF}
.tc-body{position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:1.6cqw;padding:2.4cqw 2.6cqw 2.6cqw;border-radius:2.2cqw;overflow:hidden;box-shadow:inset 0 0 0 .55cqw var(--ink)}
.tcard.shine::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 45%,rgba(255,255,255,0) 58%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:soft-light;animation:sheen 5s ease-in-out 1s infinite}
@keyframes sheen{0%{background-position:130% 0}42%,100%{background-position:-70% 0}}
.tc-head{flex:none;display:flex;flex-direction:column;gap:.9cqw;padding:0 .4cqw}
.tc-hl{display:flex;align-items:center;gap:2cqw;min-width:0}
.tc-day{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:3.3cqw;line-height:1;letter-spacing:.03em;padding:1.2cqw 2.2cqw 1cqw;border-radius:1.4cqw;background:var(--ink);color:#FFFFFF}
.tc-gain{margin-left:auto;display:inline-flex;align-items:center;gap:.6cqw;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:3.9cqw;line-height:1;color:var(--d-on)}
.tc-gain .gem{width:5.2cqw;height:5.2cqw}
.tc-title{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:6cqw;line-height:1.18;color:var(--d-on);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-art{position:relative;flex:none;display:block;height:60cqw;margin:.8cqw .9cqw 0;border-radius:1.4cqw;overflow:hidden;background:var(--d-ac);color:#FFFFFF;text-decoration:none;box-shadow:0 0 0 1cqw #FFFFFF,0 0 0 1.55cqw var(--ink)}
.tc-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph{position:absolute;inset:0;background:radial-gradient(circle at 50% 56%,rgba(255,255,255,.5),rgba(255,255,255,0) 46%),repeating-conic-gradient(from 0deg at 50% 56%,var(--d-ac) 0 9deg,var(--d-ac2) 9deg 18deg)}
.ph-num{position:absolute;left:0;right:0;top:52%;transform:translateY(-50%) rotate(-5deg);text-align:center;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:26cqw;line-height:1;color:#FFFFFF;-webkit-text-stroke:1.1cqw var(--ink);paint-order:stroke fill;text-shadow:1.3cqw 1.5cqw 0 var(--ink)}
.tc-vlabel{position:absolute;left:2.6cqw;bottom:2.6cqw;z-index:2;display:inline-flex;align-items:center;gap:1cqw;font-size:3.1cqw;font-weight:900;line-height:1;padding:1.5cqw 2.6cqw 1.5cqw 2.2cqw;border-radius:999px;background:#FFFFFF;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 .5cqw var(--ink),0 .7cqw 0 var(--ink)}
.tc-vlabel .i{width:3.3cqw;height:3.3cqw}
.tc-vlabel .i.fill{width:2.8cqw;height:2.8cqw}
/* video only: a small screen with a play button */
.tc-screen{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(110% 90% at 50% 40%,#3B3B3B,#151515 70%)}
.tc-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 .45cqw,rgba(255,255,255,0) .45cqw 1.15cqw);pointer-events:none}
.tc-vplay{position:relative;width:19cqw;height:19cqw;margin-top:-3cqw;border-radius:50%;display:grid;place-items:center;background:var(--d-ac);color:var(--d-acon);box-shadow:inset 0 0 0 .7cqw var(--ink),0 0 0 1.2cqw #FFFFFF,0 0 0 1.8cqw var(--ink),0 1.6cqw 0 1.8cqw var(--ink);transition:transform .15s}
.tc-vplay .i{width:8cqw;height:8cqw;margin-left:1cqw}
a.tc-art:hover .tc-vplay{transform:scale(1.06)}
.tc-vbar{position:absolute;left:4.4cqw;right:4.4cqw;bottom:4cqw;height:1.3cqw;border-radius:1cqw;background:rgba(255,255,255,.26)}
.tc-vbar i{position:absolute;left:0;top:0;bottom:0;width:32%;border-radius:inherit;background:var(--d-ac)}
.tc-vbar i::after{content:"";position:absolute;right:-1.6cqw;top:50%;width:3.2cqw;height:3.2cqw;margin-top:-1.6cqw;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 .45cqw var(--ink)}
.tc-text{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.2cqw;margin-top:1.4cqw;padding:2cqw 2.6cqw 2.2cqw;border-radius:1.8cqw;background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 .5cqw var(--ink);overflow:hidden}
.tc-todo{flex:none;display:flex;flex-direction:column}
.tc-todo-h{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:3.6cqw;line-height:1.3;margin-bottom:.5cqw;color:var(--ink)}
.tc-check{display:flex;align-items:center;gap:1.8cqw;width:100%;min-height:6.4cqw;padding:.3cqw 0;text-align:left;font-size:3.5cqw;font-weight:700;line-height:1.3;color:var(--ink)}
.tc-check:focus-visible{outline-offset:-1px}
.tc-box{width:4.4cqw;height:4.4cqw;flex:none;border-radius:1.1cqw;display:grid;place-items:center;background:#FFFFFF;box-shadow:inset 0 0 0 .5cqw var(--ink);color:transparent;transition:background .15s}
.tc-box .i{width:3.4cqw;height:3.4cqw;stroke-width:3.8}
.tc-check[aria-checked="true"] .tc-box{background:var(--d-ac);color:var(--d-acon)}
.tc-check.pop .tc-box{animation:boxPop .36s cubic-bezier(.3,1.7,.5,1)}
@keyframes boxPop{50%{transform:scale(1.35)}}
.tc-ct{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-check[aria-checked="true"] .tc-ct{color:var(--muted);text-decoration:line-through;text-decoration-thickness:.35cqw}
.tc-desc{position:relative;flex:1;min-height:6cqw;overflow:hidden;cursor:pointer;padding-top:1.2cqw;border-top:.3cqw dashed rgba(22,22,22,.25);font-size:3.05cqw;line-height:1.5;color:var(--ink-2)}
.tc-todo+.tc-desc{margin-top:.2cqw}
.tc-text>.tc-desc:first-child{border-top:0;padding-top:0}
.tc-dtext{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.tc-more{display:none;font-size:3cqw;font-weight:900;color:var(--ink);line-height:1.5;text-decoration:underline;text-underline-offset:.5cqw}
.tc-desc.over .tc-more{display:block}
.tc-desc.over.one .tc-more{position:absolute;right:0;top:1.2cqw;padding-left:12cqw;background:linear-gradient(90deg,rgba(255,255,255,0),#FFFFFF 40%)}
/* the boss's last card: gold foil, a diamond in the picture window, the boss's signature under the message */
.ph.fin{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.75),rgba(255,255,255,0) 44%),repeating-conic-gradient(from 0deg at 50% 50%,#FFD23F 0 9deg,#FFE58C 9deg 18deg)}
.fin-gem{position:absolute;left:50%;top:50%;width:34cqw;height:34cqw;margin:-17cqw 0 0 -17cqw;animation:finBob 2.6s ease-in-out infinite}
.fin-gem .gem{width:100%;height:100%;filter:drop-shadow(1.2cqw 1.6cqw 0 var(--ink))}
@keyframes finBob{50%{transform:translateY(-2.4cqw) rotate(-4deg)}}
.fin-spark{position:absolute;width:7cqw;height:7cqw;background:#FFFFFF;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:finTwinkle 1.8s ease-in-out infinite}
.fin-spark.s1{left:18%;top:20%}
.fin-spark.s2{right:16%;top:30%;width:5cqw;height:5cqw;animation-delay:.6s}
.fin-spark.s3{left:26%;bottom:16%;width:4.4cqw;height:4.4cqw;animation-delay:1.1s}
@keyframes finTwinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.4}50%{transform:scale(1) rotate(45deg);opacity:1}}
.tcard.finale .tc-day{background:var(--ink);color:var(--yellow)}
.tcard.finale .tc-gain .gem{width:5.4cqw;height:5.4cqw}
.tc-sign{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:1.6cqw;margin-top:auto;padding-top:1.4cqw;font-size:3.3cqw;font-weight:900;color:var(--ink)}
.tc-sign .av{width:6.4cqw!important;height:6.4cqw!important;font-size:3cqw!important}
.tc-sign span::before{content:"— "}
.tc-seal{position:absolute;z-index:5;right:3cqw;top:24cqw;width:34cqw;aspect-ratio:1;display:grid;place-content:center;text-align:center;color:var(--ink);transform:rotate(-12deg)}
.tc-seal svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(.8cqw 1.2cqw 0 var(--ink))}
.tc-seal b{position:relative;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:7.4cqw;line-height:1}
.tc-seal small{position:relative;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:3.2cqw;margin-top:.8cqw}
.tcard.stamping .tc-seal{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{0%{transform:rotate(-12deg) scale(2.2);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:1}}
.tcard.flip-out{animation:flipOut .33s ease-in forwards}
.tcard.flip-in,.pack-stage.flip-in{animation:flipIn .45s cubic-bezier(.2,.8,.3,1)}
@keyframes flipOut{to{transform:perspective(1200px) rotateY(90deg) scale(.95)}}
@keyframes flipIn{from{transform:perspective(1200px) rotateY(-90deg) scale(.95)}}
.clear-hint{text-align:center;font-size:14px;font-weight:900}
.fly-stone{position:fixed;left:0;top:0;z-index:90;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 5px 0 rgba(22,22,22,.9))}
.fly-stone.ghost{z-index:89;filter:none}
.fly-stone.is-dia{filter:drop-shadow(0 5px 0 rgba(22,22,22,.9)) drop-shadow(0 0 18px rgba(56,180,230,.55))}
.gem-flash{position:fixed;z-index:89;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 4px #FFFFFF,0 0 0 7px var(--dia),0 0 40px 10px rgba(56,180,230,.45);animation:gemFlash .62s ease-out forwards}
@keyframes gemFlash{from{transform:scale(.3);opacity:1}to{transform:scale(5);opacity:0}}
.confetti{position:fixed;inset:0;z-index:97;pointer-events:none}

/* mini cards (week strip, rows) */
.ws{display:flex;flex-direction:column;gap:8px}
.ws-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ws-head b{font-size:14px;font-weight:900}
.ws-nav{display:flex;gap:4px;margin-left:6px}
.ws-nav .icon-btn{width:30px;height:30px;border-radius:9px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ws-nav .icon-btn .i{width:16px;height:16px}
.ws-nav .icon-btn:disabled{opacity:.3;cursor:default}
.ws-head span{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.ws-cards{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:4px 0 10px}
.mini.viewing::after{content:"";position:absolute;left:50%;bottom:-11px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--ink)}
/* deck: one card per screen, swiped sideways; it runs into the side gutters so card edges are never cut */
.deck{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:28px;margin:-4px -16px -12px;padding:4px 16px 24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.deck::-webkit-scrollbar{display:none}
.deck-slide{min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.deck-foot{display:flex;flex-direction:column}
.deck-foot:empty{display:none}
.mini{position:relative;display:block;aspect-ratio:63/88;max-width:100%;border-radius:6px;background:#FFFFFF;container-type:inline-size;box-shadow:0 0 0 1.5px var(--ink),0 2px 0 1.5px var(--ink);transition:transform .15s}
.mini>i{position:absolute;inset:9%;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(22,22,22,.55)}
.mini>b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:64%;padding:5% 4% 4%;border-radius:999px;background:#FFFFFF;box-shadow:0 0 0 1.5px var(--ink);font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:30cqw;line-height:1;text-align:center;color:var(--ink)}
.mini .ok{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#FFFFFF;display:grid;place-items:center;box-shadow:0 0 0 1.5px var(--ink)}
.mini .ok .i{width:11px;height:11px;stroke-width:3.6}
.mini.current{transform:translateY(-4px);box-shadow:0 0 0 2.5px var(--ink),0 4px 0 2.5px var(--ink)}
.mini.locked{display:grid;place-items:center;color:var(--muted);background:repeating-linear-gradient(135deg,#E6E4DD 0 4px,#F0EFEA 4px 8px)}
.mini.locked .i{width:14px;height:14px}
.mini.sm{width:30px;flex:none;border-radius:5px}
.mini.sm>b{font-size:34cqw}
.mini.sm .i{width:12px;height:12px}
.mini.sm .ok{width:14px;height:14px;top:-5px;right:-5px}
.mini.sm .ok .i{width:9px;height:9px}
.mini.sm.current{transform:none;box-shadow:0 0 0 2.5px var(--ink)}
.mini.dim{opacity:.45}
.mini.xs{width:16px;flex:none;border-radius:3px;box-shadow:0 0 0 1.5px var(--ink)}

/* ---------- card pack: one silhouette with serrated tear edges (top right, bottom left) clips the face;
   the same outline is drawn as the edge stroke and, offset, as the toy shadow ---------- */
.pack-stage{position:relative;display:grid;place-items:center;padding:14px 0 20px;min-height:350px}
.pack{position:relative;width:min(220px,60vw);aspect-ratio:5/7.1;container-type:inline-size;isolation:isolate}
.pack-floor{position:absolute;left:2%;right:2%;bottom:-11%;height:13%;z-index:-2;border-radius:50%;background:radial-gradient(closest-side,rgba(22,22,22,.26),rgba(22,22,22,0));pointer-events:none}
.pack-shade{position:absolute;inset:0;z-index:-1;width:100%;height:100%;transform:translateY(5px);fill:var(--ink);pointer-events:none}
.pack-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;-webkit-clip-path:polygon(0% 3.52%,0.17% 2.61%,0.67% 1.76%,1.46% 1.03%,2.5% 0.47%,3.71% 0.12%,5% 0%,54% 0%,55.92% 1.69%,57.83% 0%,59.75% 1.69%,61.67% 0%,63.58% 1.69%,65.5% 0%,67.42% 1.69%,69.33% 0%,71.25% 1.69%,73.17% 0%,75.08% 1.69%,77% 0%,78.92% 1.69%,80.83% 0%,82.75% 1.69%,84.67% 0%,86.58% 1.69%,88.5% 0%,90.42% 1.69%,92.33% 0%,94.25% 1.69%,96.17% 0%,98.08% 1.69%,100% 0%,100% 96.48%,99.83% 97.39%,99.33% 98.24%,98.54% 98.97%,97.5% 99.53%,96.29% 99.88%,95% 100%,46% 100%,44.08% 98.31%,42.17% 100%,40.25% 98.31%,38.33% 100%,36.42% 98.31%,34.5% 100%,32.58% 98.31%,30.67% 100%,28.75% 98.31%,26.83% 100%,24.92% 98.31%,23% 100%,21.08% 98.31%,19.17% 100%,17.25% 98.31%,15.33% 100%,13.42% 98.31%,11.5% 100%,9.58% 98.31%,7.67% 100%,5.75% 98.31%,3.83% 100%,1.92% 98.31%,0% 100%);clip-path:polygon(0% 3.52%,0.17% 2.61%,0.67% 1.76%,1.46% 1.03%,2.5% 0.47%,3.71% 0.12%,5% 0%,54% 0%,55.92% 1.69%,57.83% 0%,59.75% 1.69%,61.67% 0%,63.58% 1.69%,65.5% 0%,67.42% 1.69%,69.33% 0%,71.25% 1.69%,73.17% 0%,75.08% 1.69%,77% 0%,78.92% 1.69%,80.83% 0%,82.75% 1.69%,84.67% 0%,86.58% 1.69%,88.5% 0%,90.42% 1.69%,92.33% 0%,94.25% 1.69%,96.17% 0%,98.08% 1.69%,100% 0%,100% 96.48%,99.83% 97.39%,99.33% 98.24%,98.54% 98.97%,97.5% 99.53%,96.29% 99.88%,95% 100%,46% 100%,44.08% 98.31%,42.17% 100%,40.25% 98.31%,38.33% 100%,36.42% 98.31%,34.5% 100%,32.58% 98.31%,30.67% 100%,28.75% 98.31%,26.83% 100%,24.92% 98.31%,23% 100%,21.08% 98.31%,19.17% 100%,17.25% 98.31%,15.33% 100%,13.42% 98.31%,11.5% 100%,9.58% 98.31%,7.67% 100%,5.75% 98.31%,3.83% 100%,1.92% 98.31%,0% 100%)}
.pack-face::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 44%,rgba(255,255,255,0) 56%);background-size:240% 100%;animation:packSheen 3.6s ease-in-out infinite;pointer-events:none}
@keyframes packSheen{from{background-position:130% 0}to{background-position:-130% 0}}
.pack-edge{position:absolute;inset:0;z-index:4;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.pack-bg{position:absolute;inset:0}
.pack-photo{position:absolute;inset:0;overflow:hidden;background:var(--surface-3)}
.pack-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* crimped seal behind each serrated edge */
.pack-crimp{position:absolute;z-index:2;width:46%;height:8cqw;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 .8cqw,rgba(255,255,255,.12) .8cqw 1.6cqw)}
.pack-crimp.tr{top:0;right:0}
.pack-crimp.bl{bottom:0;left:0}
/* the strip that tears off when the pack is opened */
.pack-flap{position:absolute;top:0;right:0;z-index:5;width:46%;height:8cqw;opacity:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 .8cqw,rgba(255,255,255,.12) .8cqw 1.6cqw),var(--d-b1);-webkit-clip-path:polygon(0% 0%,4.17% 30%,8.33% 0%,12.5% 30%,16.67% 0%,20.83% 30%,25% 0%,29.17% 30%,33.33% 0%,37.5% 30%,41.67% 0%,45.83% 30%,50% 0%,54.17% 30%,58.33% 0%,62.5% 30%,66.67% 0%,70.83% 30%,75% 0%,79.17% 30%,83.33% 0%,87.5% 30%,91.67% 0%,95.83% 30%,100% 0%,100% 100%,0% 100%);clip-path:polygon(0% 0%,4.17% 30%,8.33% 0%,12.5% 30%,16.67% 0%,20.83% 30%,25% 0%,29.17% 30%,33.33% 0%,37.5% 30%,41.67% 0%,45.83% 30%,50% 0%,54.17% 30%,58.33% 0%,62.5% 30%,66.67% 0%,70.83% 30%,75% 0%,79.17% 30%,83.33% 0%,87.5% 30%,91.67% 0%,95.83% 30%,100% 0%,100% 100%,0% 100%)}
.pack-body{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:13cqw 9cqw}
.pack-label{display:flex;flex-direction:column;align-items:center;width:100%;padding:7.5cqw 6cqw 8cqw;border-radius:6cqw;background:#FFFFFF;box-shadow:0 0 0 1.1cqw var(--ink),0 2.2cqw 0 1.1cqw var(--ink);text-align:center;transform:rotate(-3deg)}
.pack-mono{flex:none;width:12cqw;height:12cqw;margin-bottom:5.5cqw;border-radius:50%;display:grid;place-items:center;background:var(--yellow);box-shadow:inset 0 0 0 .9cqw var(--ink);font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:6.6cqw;line-height:1;color:var(--ink)}
.pack-title{max-width:100%;margin-bottom:5.5cqw;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:8.4cqw;line-height:1.22;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pack-name{display:inline-flex;align-items:center;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:4.4cqw;line-height:1;padding:1.7cqw 3.2cqw 1.4cqw;border-radius:999px;background:var(--ink);color:var(--yellow);white-space:nowrap}
.pack-boss{max-width:100%;margin-top:2.4cqw;font-size:4cqw;font-weight:700;line-height:1.2;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pack-mark{position:absolute;z-index:1;bottom:7.5cqw;left:0;right:0;text-align:center;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:3.8cqw;line-height:1;letter-spacing:.06em;color:var(--d-on);opacity:.55}
.pack.has-photo .pack-mark{color:#FFFFFF;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;left:50%;top:50%;width:46px;aspect-ratio:63/88;margin:-34px 0 0 -23px;border-radius:5px;opacity:0;background:#FFFFFF;box-shadow:0 0 0 2px var(--ink),0 3px 0 2px var(--ink),inset 0 0 0 4px #FFFFFF,inset 0 0 0 30px var(--d-b1)}
.pack-stage.tearing .pack-crimp.tr{opacity:0}
.pack-stage.tearing .pack-flap{transform-origin:0 100%;animation:flapOff .62s cubic-bezier(.45,0,.3,1) forwards}
.pack-stage.tearing .pack{animation:packOut .45s .45s ease-in forwards}
.pack-stage.tearing .burst i{animation:burst .7s calc(.5s + var(--k) * 50ms) cubic-bezier(.2,.85,.25,1) forwards}
@keyframes flapOff{0%{opacity:1;transform:none}35%{opacity:1;transform:translate(4px,-5px) rotate(9deg)}100%{opacity:0;transform:translate(46px,-74px) rotate(30deg)}}
@keyframes packOut{to{transform:translateY(46px) scale(.9);opacity:0}}
@keyframes burst{0%{opacity:0;transform:translateY(30px) scale(.5)}40%{opacity:1}100%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.pack-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.pack-cta p{text-align:center;font-size:13px;font-weight:700;color:var(--muted)}

/* ---------- finish: the boss's last card, then the finish screen ---------- */
.fin-arrive{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:17px;color:var(--ink);animation:finIn .5s cubic-bezier(.2,1.4,.4,1)}
.fin-arrive .i{width:20px;height:20px}
@keyframes finIn{from{transform:translateY(8px) scale(.94);opacity:0}}
.fin-note{text-align:center;font-size:13px;font-weight:700;color:var(--muted);margin-top:-6px}
.finish-bar{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink),var(--pop-lg)}
.finish-bar .big-gem{width:54px;height:54px;flex:none;filter:drop-shadow(0 3px 0 var(--ink))}
.finish-bar h2{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:24px;line-height:1.15}
.finish-bar p{font-size:13px;color:var(--ink-2);margin-top:3px}
.fin-label{font-size:13px;font-weight:900;color:var(--muted);margin-bottom:-6px}
.fin-box{display:flex;flex-direction:column;gap:6px;padding:12px 8px 8px;border-radius:16px;background:linear-gradient(135deg,#FFF6CF,#FFFFFF 60%);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fin-box-h{display:flex;align-items:center;gap:6px;padding:0 8px;font-size:13px;font-weight:900;color:var(--ink)}
.fin-box-h .gem{width:17px;height:17px}
.fin-mini{display:grid;place-items:center;background:linear-gradient(135deg,#FFE48A,#FFC93C)}
.fin-mini .gem{width:17px;height:17px}
/* ---------- finish ---------- */
.finish{background:var(--surface);border-radius:18px;padding:30px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-shadow:inset 0 0 0 2px var(--ink),var(--pop-lg)}
.finish .big-gem{width:88px;height:88px;filter:drop-shadow(0 4px 0 var(--ink))}
.finish h2{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:30px}
.finish p{color:var(--ink-2);font-size:14.5px}
.merge{position:relative;width:200px;height:170px;margin:4px auto}
.merge .gem{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px}
.merge .s{animation:mergeIn 1s calc(var(--k) * 40ms) cubic-bezier(.6,0,.4,1) forwards;transform:translate(var(--x),var(--y))}
.merge .d{width:92px;height:92px;margin:-46px 0 0 -46px;transform:scale(0);animation:gemPop .6s 1.15s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes mergeIn{80%{opacity:1}100%{transform:translate(0,0) scale(.3);opacity:0}}
@keyframes gemPop{to{transform:scale(1)}}
.fin-title{text-align:center;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:30px}

/* ---------- modules (curriculum, boss card list) ---------- */
.mod{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.mod-head{display:flex;align-items:center;gap:6px;min-height:54px;padding:0 8px 0 0}
.mod-toggle{flex:1;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 0 0 16px;text-align:left;min-width:0}
.mod-toggle .t{font-weight:900;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-toggle .c{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:13px;line-height:1;color:var(--ink);background:var(--yellow-soft);padding:4px 7px 3px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mod-toggle .i{margin-left:auto;margin-right:8px;color:var(--ink);transition:transform .2s}
.mod.open .mod-toggle .i{transform:rotate(180deg)}
.mod-rows{display:none;padding:0 8px 8px}
.mod.open .mod-rows{display:block}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;border-radius:12px;text-align:left}
.row:hover{background:var(--surface-2)}
.row.is-current{background:var(--yellow-soft);box-shadow:inset 0 0 0 1.5px var(--ink)}
.row.is-sel{background:var(--yellow-soft)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-day{font-size:11.5px;font-weight:900;color:var(--muted);letter-spacing:.03em}
.row.is-current .row-day{color:var(--ink)}
.row-title{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.locked .row-title{color:var(--muted);font-weight:500}
.row-flags{display:flex;gap:4px;color:var(--muted);flex:none}
.row-flags .i{width:16px;height:16px}
.row-flags .rw{color:var(--ink)}
.row>.i{color:var(--line-2);width:18px;height:18px}
.doc-ic{width:30px;height:42px;flex:none;border-radius:6px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;color:var(--ink)}
.doc-ic.read{background:var(--ok-soft);color:var(--ok)}
.doc-ic .i{width:16px;height:16px}
.add-row{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;padding:0 10px;border-radius:12px;color:var(--ink);font-size:14px;font-weight:900}
.add-row:hover{background:var(--surface-2)}
.add-card{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:14px;border:2px dashed var(--ink);color:var(--ink);font-weight:900;font-size:14.5px;width:100%;background:transparent}
.add-card:hover{background:var(--yellow-soft)}

/* ---------- community ---------- */
.composer{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border-radius:16px;width:100%;text-align:left;color:var(--muted);font-size:14.5px;font-weight:500;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.composer .pen{margin-left:auto;width:34px;height:34px;border-radius:11px;background:var(--yellow);color:var(--ink);display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.composer .pen .i{width:17px;height:17px}
.composer .cam{margin-left:auto;color:var(--muted);display:grid;place-items:center}
.composer .cam .i{width:20px;height:20px}
.composer .cam+.pen{margin-left:0}
/* photos in a post: 1 wide, 2 side by side, 3 one tall + two, 4 a square grid */
.post-photos{display:grid;gap:3px;border-radius:14px;overflow:hidden;outline:1.5px solid var(--ink);outline-offset:-1.5px;background:var(--ink)}
.post-photos.n1 .pp{aspect-ratio:4/3}
.post-photos.n2,.post-photos.n4{grid-template-columns:1fr 1fr}
.post-photos.n2 .pp,.post-photos.n4 .pp{aspect-ratio:1}
.post-photos.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}
.post-photos.n3 .pp:first-child{grid-row:1/3}
.pp{position:relative;display:block;width:100%;min-height:0;overflow:hidden;background:var(--surface-3)}
.pp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pp:focus-visible{outline-offset:-4px}
/* tags */
.mention{display:inline;padding:0 3px;margin:0 1px;border-radius:5px;background:var(--yellow-soft);box-shadow:inset 0 -2px 0 var(--yellow);color:var(--ink);font:inherit;font-weight:900;line-height:inherit;vertical-align:baseline}
button.mention{cursor:pointer}
.cp-write{position:relative}
.mention-box{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:8;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink);max-height:228px;overflow-y:auto}
.mention-box[hidden]{display:none}
.reply-box{position:relative}
.reply-box .mention-box{top:auto;bottom:calc(100% + 8px);left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px))}
.mention-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:9px;font-size:14.5px;font-weight:700;text-align:left;color:var(--ink)}
.mention-opt:hover,.mention-opt:focus-visible{background:var(--yellow-soft)}
.mention-opt>span:nth-child(2){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-btn{flex:none;width:44px;height:44px;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:18px;align-self:flex-end;margin-bottom:2px}
/* compose: photos and tools */
.cp-photos{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 2px}
.cp-photos::-webkit-scrollbar{display:none}
.cp-ph{position:relative;flex:none;width:78px;height:78px;border-radius:12px;overflow:hidden;outline:1.5px solid var(--ink);outline-offset:-1.5px}
.cp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cp-ph-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(22,22,22,.82);color:#FFFFFF}
.cp-ph-x .i{width:13px;height:13px;stroke-width:2.8}
.cp-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-4px}
.cp-tool{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink),0 2px 0 var(--ink);font-size:13.5px;font-weight:900;color:var(--ink);cursor:pointer}
.cp-tool .i{width:17px;height:17px}
.cp-count{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.cats{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px}
.cats::-webkit-scrollbar{display:none}
.cat{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink);flex:none}
.cat[aria-pressed="true"]{background:var(--yellow);font-weight:900;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.feed{display:flex;flex-direction:column;gap:10px}
.post{background:var(--surface);border-radius:16px;padding:14px 16px 10px;display:flex;flex-direction:column;gap:9px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.post.flat{box-shadow:none;padding:4px 0 8px;border-radius:0;background:transparent}
.post-head{display:flex;align-items:center;gap:10px;min-width:0}
.post-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.post-name{display:flex;align-items:center;gap:6px;font-weight:900;font-size:14.5px;min-width:0}
.post-name>span:first-child,.post-name>.who-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.who-av{flex:none;border-radius:50%;display:inline-flex}
.who-name{font:inherit;font-weight:900;color:inherit;text-align:left}
.who-name:hover{text-decoration:underline;text-underline-offset:2px}
.badge-boss{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:10px;letter-spacing:.06em;background:var(--ink);color:var(--yellow);padding:3px 6px 2px;border-radius:5px;flex:none}
.tag-ex{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);border-radius:5px;padding:1px 5px;flex:none}
.post-sub{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:500}
.pcat{display:inline-flex;align-items:center;font-size:11.5px;font-weight:900;padding:2px 7px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.2px var(--ink);color:var(--ink)}
.pcat.cat-notice{background:var(--yellow)}
.post-pin{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:900;color:var(--ink);background:var(--yellow-soft);padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1.2px var(--ink);align-self:flex-start}
.post-pin .i{width:13px;height:13px}
.post-text{font-size:15px;line-height:1.65;white-space:pre-line;overflow-wrap:anywhere}
.post-text.clip{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.card-ref{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:32px;padding:0 12px 0 8px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1.2px var(--ink);color:var(--ink);font-size:12.5px;font-weight:700;max-width:100%}
.card-ref span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-acts{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;color:var(--ink);border-top:1px solid var(--line);padding-top:6px}
.pa{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:900;height:34px;padding:0 9px;border-radius:9px;font-variant-numeric:tabular-nums}
.pa:hover{background:var(--surface-2)}
.pa .i{width:18px;height:18px}
.pa.liked{color:var(--red)}
.pa.liked .i{fill:currentColor}
.stack{display:inline-flex;align-items:center;margin-left:4px}
.stack .av{box-shadow:0 0 0 2px var(--surface);margin-left:-7px;font-size:10px!important}
.stack .av:first-child{margin-left:0}
.pa-last{font-size:12px;font-weight:500;color:var(--muted);margin-left:6px;white-space:nowrap}
.post-more{margin-left:auto}
.reply{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.reply-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.reply-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reply-box{display:flex;gap:10px;align-items:flex-end}
.reply-box .ta{flex:1;min-width:0;min-height:48px;height:48px;padding-block:12px;resize:none}
.menu{position:absolute;z-index:6;min-width:172px;background:var(--surface);border-radius:14px;box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink);padding:6px;display:flex;flex-direction:column}
.menu button{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:9px;font-size:14px;font-weight:700;text-align:left;white-space:nowrap}
.menu button:hover{background:var(--surface-2)}
.menu .danger{color:var(--red)}
.menu .i{width:17px;height:17px}
.rel{position:relative}

/* ---------- leaderboard ---------- */
.lb-me{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--ink);color:#FFFFFF;border-radius:16px;padding:15px 18px;box-shadow:0 3px 0 rgba(22,22,22,.25)}
.lb-me .rk{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:38px;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}
.lb-me .rk small{font-family:var(--f-body);font-size:13px;font-weight:900;margin-left:2px}
.lb-me-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lb-me-info b{font-size:15px;font-weight:900}
.lb-me-info span{font-size:12.5px;font-weight:500;opacity:.75}
.lb-me .av{outline-color:#FFFFFF}
.lb-me.out{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.lb-me.out .lb-me-info span{color:var(--muted);opacity:1}
.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:8px;background:var(--surface);border-radius:16px;padding:18px 12px 0;box-shadow:inset 0 0 0 1.5px var(--line-2);overflow:hidden}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;width:100%}
.pod-av{position:relative}
.pod-medal{position:absolute;right:-6px;bottom:-4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:13px;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 2px var(--surface)}
.pod.r1 .pod-medal{background:var(--m-gold)} .pod.r2 .pod-medal{background:var(--m-silver)} .pod.r3 .pod-medal{background:var(--m-bronze)}
.pod-name{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:900;max-width:100%}
.pod-name>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pod-score{display:flex;gap:8px;font-size:12px;font-weight:900;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pod-score span{display:inline-flex;align-items:center;gap:3px}
.pod-score .gem{width:15px;height:15px}
.pod-step{width:100%;margin-top:4px;border-radius:12px 12px 0 0;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:30px;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pod.r1 .pod-step{height:86px;background:var(--m-gold)}
.pod.r2 .pod-step{height:62px;background:var(--m-silver)}
.pod.r3 .pod-step{height:46px;background:var(--m-bronze)}
.lb-list{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line-2);padding:4px 0}
.lb-row{display:grid;grid-template-columns:26px 34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 14px;width:100%;text-align:left}
.lb-row:hover{background:var(--surface-2)}
.lb-row+.lb-row{box-shadow:0 -1px 0 var(--line)}
.lb-row.me{background:var(--yellow-soft)}
.rank{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:17px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-name{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:6px;min-width:0}
.lb-name>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-score{display:grid;grid-template-columns:repeat(2,minmax(46px,auto));gap:8px;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:15px;font-variant-numeric:tabular-nums}
.lb-score span{display:inline-flex;align-items:center;gap:4px}
.zero{opacity:.35}
.lb-note{font-size:12.5px;color:var(--muted);text-align:center;font-weight:500}
.me-tag{font-size:10.5px;font-weight:900;color:var(--yellow);background:var(--ink);padding:1px 6px;border-radius:5px;flex:none}

/* ---------- about ---------- */
.media{display:flex;flex-direction:column;gap:10px}
.md-main{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--surface-3);box-shadow:inset 0 0 0 2px var(--ink)}
.md-main>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.md-video{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#FFFFFF;font-size:14px;font-weight:900;text-decoration:none}
.md-play{width:56px;height:56px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--ink)}
.md-play .i{width:24px;height:24px;margin-left:3px}
.md-video>span:last-child{display:inline-flex;align-items:center;gap:6px}
.md-video .i{width:16px;height:16px}
.md-tools{position:absolute;right:10px;bottom:10px;z-index:1;display:flex;gap:6px}
.md-tools .btn{padding:0 11px}
.md-tools .btn[aria-label]{width:36px;padding:0}
.md-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:3px 3px 6px;margin:0 -3px}
.md-thumbs::-webkit-scrollbar{display:none}
.md-th{position:relative;flex:none;width:68px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.md-th img{width:100%;height:100%;object-fit:cover;display:block}
.md-th.on{outline:2.5px solid var(--ink);outline-offset:1px}
.md-th-v{position:absolute;inset:0;display:grid;place-items:center;background:var(--ink);color:#FFFFFF}
.md-th-v .i{width:18px;height:18px}
.md-first{position:absolute;left:4px;top:4px;font-size:9.5px;font-weight:900;background:var(--yellow);color:var(--ink);padding:1px 5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--ink)}
.md-th.add{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.md-vid{display:flex;align-items:center;gap:6px}
.md-vid .inp{height:42px;flex:1;min-width:0;font-size:15px}
.media-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;aspect-ratio:16/9;max-width:100%;border-radius:16px;border:2px dashed var(--line-2);background:var(--surface-2);padding:18px;cursor:pointer;color:var(--ink-2)}
.media-drop>.i{width:26px;height:26px;color:var(--ink)}
.media-drop b{font-size:15.5px;font-weight:900;color:var(--ink)}
.media-drop span{font-size:13px;line-height:1.5}
.media-drop .btn{margin-top:8px}
.ab-head{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.ab-h1{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:27px;line-height:1.2}
.ab-sub{font-size:15.5px;color:var(--ink-2)}
.boss-card{display:flex;gap:14px;align-items:center;background:var(--surface);border-radius:16px;padding:14px 16px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.bc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bc-main b{font-size:15px;font-weight:900;display:flex;align-items:center;gap:6px}
.bc-main p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.prose{font-size:15px;line-height:1.75;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.prose.box{background:var(--surface);border-radius:16px;padding:16px 18px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.about-cta{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;flex-direction:column;gap:6px}
.ab-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ab-bar-t{font-size:13px;font-weight:900;color:var(--muted)}
.ab-edit{display:flex;flex-direction:column;gap:2px;padding:0 2px}
.ab-in{width:100%;border:0;background:transparent;padding:6px 0;color:var(--ink);font-size:15.5px;border-radius:4px}
.ab-in:focus{outline:none;box-shadow:0 2px 0 var(--ink)}
.ab-in::placeholder{color:var(--muted)}
.ab-in.big{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:26px;line-height:1.25}
.ab-desc{display:flex;flex-direction:column;gap:6px}
.ab-desc .ta{min-height:150px;resize:none;overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:15px}
.ab-desc .ta:focus{background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.ab-desc small{font-size:12px;color:var(--muted)}

/* ---------- overlays ---------- */
#layer{position:relative;z-index:50}
.ov{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;z-index:50}
.ov.enter{animation:pageIn .26s cubic-bezier(.2,.8,.3,1)}
@keyframes pageIn{from{transform:translateX(28px);opacity:0}}
.ov-top{flex:none;background:var(--surface);box-shadow:0 2px 0 var(--ink);padding-top:env(safe-area-inset-top,0px);position:relative;z-index:2}
.ov-top-in{position:relative;max-width:var(--col);margin-inline:auto;display:flex;align-items:center;gap:6px;min-height:56px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.ov-title{flex:1;min-width:0;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ov-col{max-width:var(--col);margin-inline:auto;padding-block:18px 32px;display:flex;flex-direction:column;gap:16px}
.ov-foot{flex:none;background:var(--surface);box-shadow:0 -1.5px 0 var(--line-2);padding-bottom:env(safe-area-inset-bottom,0px)}
.ov-foot-in{max-width:var(--col);margin-inline:auto;display:flex;align-items:center;gap:8px;min-height:68px;padding-block:10px}
.sheet-wrap{position:fixed;inset:0;z-index:60;background:var(--overlay);display:flex;align-items:flex-end;justify-content:center}
.sheet-wrap.enter{animation:fadeIn .2s ease}
.sheet-wrap.enter .sheet{animation:sheetUp .3s cubic-bezier(.2,.8,.3,1)}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheetUp{from{transform:translateY(48px);opacity:.4}}
.sheet{width:100%;max-width:var(--col);max-height:90vh;overflow-y:auto;background:var(--surface);border-radius:22px 22px 0 0;padding-top:8px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain;box-shadow:0 0 0 2px var(--ink)}
.sheet-grip{width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto 6px}
.sheet-in{display:flex;flex-direction:column;gap:16px;padding-top:8px}
.sheet-head{display:flex;align-items:center;gap:8px}
.sheet-head h3{flex:1;min-width:0;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:21px;line-height:1.25}
.read-day{display:block;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:12px;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.sheet-acts{display:flex;gap:8px}
.sheet-acts .btn{flex:1}
.list-btn{display:flex;align-items:center;gap:14px;width:100%;padding:12px;border-radius:16px;text-align:left;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.list-btn.on{box-shadow:inset 0 0 0 2px var(--ink),var(--pop);background:var(--yellow-soft)}
.list-btn.static{cursor:default}
.list-btn .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.list-btn .meta b{font-size:15.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-thumb{position:relative;flex:none;width:42px;aspect-ratio:63/88;border-radius:5px;overflow:hidden;background:#FFFFFF;container-type:inline-size;box-shadow:0 0 0 1.5px var(--ink),0 2px 0 1.5px var(--ink)}
.ch-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ch-thumb.card>i{position:absolute;inset:9%;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(22,22,22,.55)}
.explore-btn{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border-radius:16px;text-align:left;background:var(--ink);color:#FFFFFF}
.explore-btn .ic{width:44px;height:44px;border-radius:12px;background:var(--yellow);color:var(--ink);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 2px var(--ink)}
.explore-btn .ic .i{width:24px;height:24px}
.explore-btn b{display:block;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:17px}
.explore-btn span{font-size:12.5px;opacity:.75}
.explore-btn>.i{margin-left:auto;color:var(--yellow)}
.pf-row{display:flex;gap:14px;align-items:center}
.pf-av{position:relative;flex:none;border-radius:50%;cursor:pointer}
.pf-cam{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 2px 0 var(--ink)}
.pf-cam .i{width:15px;height:15px}
.pf-photo{display:flex;gap:14px;margin-top:-6px}
.pf-photo .link-btn{height:30px;font-size:13px}
.pf-photo .link-btn .i{width:16px;height:16px}
.pf-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pf-who b{display:flex;align-items:center;gap:6px;min-width:0;font-size:18px;font-weight:900}
.pf-who b>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-who>span{font-size:13px;color:var(--muted);line-height:1.45}
.how{background:var(--surface-2);border-radius:14px;padding:4px 14px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.how-row{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:12px 0}
.how-row+.how-row{box-shadow:0 -1px 0 var(--line)}
.how-ic{width:38px;height:38px;border-radius:11px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center}
.how-ic .gem{width:22px;height:22px}
.how-row b{font-size:14.5px;font-weight:900;display:block}
.how-row span{font-size:13px;color:var(--muted)}
.how-btn{width:100%;text-align:left;grid-template-columns:38px 1fr 20px}
.how-btn>.i{width:18px;height:18px;color:var(--ink);transition:transform .2s}
.how-btn[aria-expanded="true"]>.i{transform:rotate(180deg)}
.done-list{display:flex;flex-direction:column;gap:2px;padding:2px 0 12px}
.done-item{display:flex;align-items:center;gap:12px;padding:8px 2px}
.done-item .ch-thumb{width:30px}
.done-item .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.done-item .meta b{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-item .meta span{font-size:12.5px;color:var(--muted)}
.done-item .gem{width:20px;height:20px}
.done-empty{font-size:13px;color:var(--muted);padding:4px 2px}

/* editor */
.ed-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:13px;padding:4px;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.ed-seg button{height:34px;border-radius:10px;font-size:13.5px;font-weight:900;color:var(--muted)}
.ed-seg button[aria-selected="true"]{background:var(--ink);color:var(--yellow)}
.ed-preview .tcard{max-width:320px}
.ed-title{width:100%;border:0;background:transparent;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:24px;padding:4px 0;color:var(--ink)}
.ed-title:focus,.ed-teaser:focus{outline:none;box-shadow:0 2px 0 var(--ink)}
.ed-teaser{width:100%;border:0;background:transparent;font-size:15px;padding:8px 0;color:var(--ink-2);border-bottom:1.5px solid var(--line-2)}
.ed-block{display:flex;flex-direction:column;gap:9px}
.ed-label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:900;color:var(--ink)}
.ed-label span{font-weight:500;color:var(--muted)}
.ed-label .i{width:16px;height:16px}
.ed-label .x{margin-left:auto}
.ed-tools{display:flex;gap:4px;padding:4px;border-radius:12px 12px 0 0;background:var(--surface-3)}
.ed-tools button{height:32px;min-width:36px;padding:0 10px;border-radius:8px;font-size:13.5px;font-weight:900;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.ed-tools button:hover{background:var(--surface)}
.ed-tools .i{width:16px;height:16px}
.ed-tools+.ta{border-radius:0 0 12px 12px}
.ed-check{display:flex;align-items:center;gap:8px}
.ed-check .box{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 2px var(--ink);flex:none}
.ed-check .inp{height:46px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:86.2/60;max-width:100%;border:2px dashed var(--line-2);border-radius:12px;color:var(--ink);font-weight:900;font-size:14px;cursor:pointer;background:var(--surface-2)}
.drop .i{width:26px;height:26px}
.drop small{font-weight:500;color:var(--muted)}
.ed-photo{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:86.2/60;max-width:100%;background:var(--surface-3);outline:2px solid var(--ink);outline-offset:-2px}
.ed-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ed-photo-acts{position:absolute;right:8px;bottom:8px;z-index:1;display:flex;gap:6px}
.btn.sq{width:36px;padding:0}
.btn.sm .i{width:16px;height:16px}
.ed-media .drop{aspect-ratio:auto;min-height:148px}
.ed-sub{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:900;color:var(--ink)}
.ed-sub .i{width:15px;height:15px}
.ed-media-hint{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.5}
.ed-reward{padding:14px;border-radius:14px;background:var(--yellow-soft);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ed-reward .inp{background:var(--surface)}
.ed-foot .pubtog{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:900;margin-left:auto;color:var(--ink)}
.ed-foot .btn{height:42px}
.up-menu{bottom:46px;left:0}
.ed-menu{top:50px;right:8px}
.confirm{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--red-soft);box-shadow:inset 0 0 0 1.5px var(--red);color:var(--ink)}
.confirm p{font-size:14px;font-weight:700}
.confirm .acts{display:flex;gap:8px}
.preview-note{text-align:center;font-size:12.5px;font-weight:700;color:var(--muted)}

/* settings: card design */
.dprev{display:flex;align-items:center;gap:18px;padding:16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.dprev .tcard{width:116px;max-width:116px;margin:0;flex:none;box-shadow:0 0 0 1.5px var(--ink),0 3px 0 1.5px var(--ink)}
.dprev-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.dprev-info b{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:21px}
.dprev-info span{font-size:13px;font-weight:700;color:var(--muted)}
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 6px;padding-top:4px}
.sw{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-2);min-width:0}
.sw-chip{position:relative;width:40px;aspect-ratio:63/88;border-radius:5px;background:#FFFFFF;container-type:inline-size;box-shadow:0 0 0 1.5px var(--ink),0 2px 0 1.5px var(--ink);transition:transform .15s}
.sw-chip>i{position:absolute;inset:10%;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(22,22,22,.55)}
.sw[aria-checked="true"] .sw-chip{transform:translateY(-3px);box-shadow:0 0 0 2.5px var(--ink),0 4px 0 2.5px var(--ink)}
.sw[aria-checked="true"]{color:var(--ink);font-weight:900}
.sw-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cgroup{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.cg-label{font-size:12.5px;font-weight:900;color:var(--ink)}
.custom-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.custom-row.on{background:var(--yellow-soft);box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.cinput{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;cursor:pointer;box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.cinput input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);opacity:0;cursor:pointer;border:0;padding:0}
.ptns{flex:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;min-width:0}
.ptn{position:relative;width:100%;height:auto;aspect-ratio:1;padding:0;border-radius:8px;overflow:hidden;container-type:inline-size;outline:1.5px solid var(--line-2);outline-offset:-1.5px}
.ptn>i{position:absolute;inset:0}
.ptn[aria-checked="true"]{outline:2.5px solid var(--ink);outline-offset:1.5px}
.packset{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.packset-prev{flex:none;padding:2px 0 4px}
.packset .pack{width:92px}
.packset .pack-face::after,.packset .pack-floor{display:none}
.packset .pack-shade{transform:translateY(3px)}
.packset-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.packset-main p{font-size:13px;font-weight:500;line-height:1.5;color:var(--ink-2)}
.packset-acts{display:flex;flex-wrap:wrap;gap:6px}
.unit-inp{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:900}
.unit-inp .inp{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.dur-note{font-size:13px;font-weight:900;color:var(--ink);background:var(--yellow-soft);border-radius:10px;padding:9px 12px;box-shadow:inset 0 0 0 1.2px var(--ink);font-variant-numeric:tabular-nums}
.pay-box{display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pay-row{display:flex;flex-direction:column;gap:8px}
.pay-row>b{font-size:14px;font-weight:900}
.pay-row+.pay-row{box-shadow:0 -1px 0 var(--line);padding-top:14px}
.price-inp{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:900;color:var(--ink)}
.price-inp .inp{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.pay-sum{font-size:13px;font-weight:900;color:var(--ink);background:var(--yellow-soft);border-radius:10px;padding:9px 12px;box-shadow:inset 0 0 0 1.2px var(--ink)}

/* wizard */
.wz-steps{display:flex;gap:6px}
.wz-steps i{flex:1;height:8px;border-radius:4px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.wz-steps i.on{background:var(--yellow)}
.wz-q{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:26px;line-height:1.25}
.wz-sub{color:var(--ink-2);font-size:14.5px;margin-top:-6px}
.dur-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dur{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:16px;background:var(--surface);text-align:left;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.dur b{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:38px;line-height:1}
.dur b small{font-size:17px;margin-left:3px}
.dur.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;padding:12px 16px}
.dur.wide b{font-size:28px}
.dur span{font-size:13px;font-weight:700;color:var(--muted)}
.dur[aria-checked="true"]{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--ink),var(--pop-lg)}
.dur[aria-checked="true"] span{color:var(--ink)}
.plan{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;background:var(--surface);text-align:left;width:100%;position:relative;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.plan[aria-checked="true"]{background:var(--yellow-soft);box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.plan .pn{font-size:12.5px;font-weight:900;color:var(--muted);letter-spacing:.06em}
.plan .pp,.plan .plan-pp{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:22px}
.plan .pd{font-size:13px;color:var(--ink-2)}
.made{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding-top:10px}
.made-pack .pack{width:160px}
.made h2{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:25px}
.made p{color:var(--ink-2)}

/* explore */
.ex-head{display:flex;flex-direction:column;gap:6px}
.ex-head h2{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:24px}
.ex-head p{font-size:13px;color:var(--muted)}
.ex-pager{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 4px 12px;margin:0 -4px}
.ex-pager::-webkit-scrollbar{display:none}
.ex-page{scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start;min-width:0;padding:2px}
.excard{position:relative;display:block;aspect-ratio:63/88;max-width:100%;min-width:0;border-radius:6%/4.3%;background:#FFFFFF;container-type:inline-size;text-align:left;overflow:hidden;box-shadow:0 0 0 2px var(--ink),0 3px 0 2px var(--ink);transition:transform .12s}
.excard:active{transform:translateY(2px)}
.excard.shine::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.5) 48%,rgba(255,255,255,0) 60%);mix-blend-mode:soft-light}
.ex-frame{position:absolute;inset:0;padding:4cqw;display:flex}
.ex-body{flex:1;min-width:0;display:flex;flex-direction:column;padding:3.4cqw;border-radius:3cqw;overflow:hidden;box-shadow:inset 0 0 0 .9cqw var(--ink)}
.ex-art{position:relative;flex:none;height:54cqw;margin:1.4cqw 1.4cqw 0;border-radius:2.4cqw;overflow:hidden;box-shadow:0 0 0 1.6cqw #FFFFFF,0 0 0 2.5cqw var(--ink)}
.ex-art .ph-num{font-size:28cqw}
.ex-cat{position:absolute;left:3cqw;top:3cqw;font-size:6.4cqw;font-weight:900;padding:1.2cqw 3.4cqw;border-radius:999px;background:#FFFFFF;color:var(--ink);box-shadow:inset 0 0 0 .8cqw var(--ink)}
.ex-txt{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.6cqw;margin-top:4cqw;padding:3cqw 3.6cqw;border-radius:2.6cqw;background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 .8cqw var(--ink)}
.ex-title{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:8.6cqw;line-height:1.2;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex-boss{display:flex;align-items:center;gap:2.4cqw;font-size:6.2cqw;font-weight:700;color:var(--ink-2);min-width:0}
.ex-boss .av{width:10cqw!important;height:10cqw!important;font-size:5cqw!important}
.ex-boss>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-size:6cqw;font-weight:700;color:var(--muted)}
.ex-price{font-family:var(--f-display);font-weight:900;font-synthesis:none;color:var(--ink)}
.ex-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ex-dots{display:flex;gap:6px;align-items:center}
.ex-dots i{width:9px;height:9px;border-radius:5px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink);transition:width .2s,background .2s}
.ex-dots i.on{width:24px;background:var(--yellow)}
.ex-hero{position:relative;aspect-ratio:2/1;border-radius:16px;overflow:hidden;container-type:inline-size;box-shadow:inset 0 0 0 2px var(--ink)}
.ex-hero>i{position:absolute;inset:0}
.ex-hero-art{position:absolute;left:50%;top:50%;width:42%;height:76%;transform:translate(-50%,-50%) rotate(-3deg);border-radius:12px;overflow:hidden;box-shadow:0 0 0 5px #FFFFFF,0 0 0 7px var(--ink),0 9px 0 7px var(--ink)}
.ex-hero-art .ph-num{font-size:20cqw}
.ex-hero-t{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:900;color:var(--ink);background:#FFFFFF;padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink)}

/* photo position sheet */
#crop{position:relative;z-index:80}
.crop-sheet .sheet-in{gap:14px}
.crop-stage{position:relative;display:flex;justify-content:center}
.crop-frame{position:relative;width:100%;max-width:100%;overflow:hidden;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;background:var(--surface-3)}
.crop-frame:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.crop-frame.dragging{cursor:grabbing}
.crop-frame.f-card{border-radius:10px}
.crop-frame.f-media{border-radius:16px}
.crop-frame.f-card::after,.crop-frame.f-media::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 2.5px var(--ink);pointer-events:none}
.crop-frame .crop-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.crop-frame::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .15s;background:linear-gradient(90deg,rgba(255,255,255,0) calc(33.33% - 1px),rgba(255,255,255,.8) calc(33.33% - 1px) 33.33%,rgba(255,255,255,0) 33.33% calc(66.66% - 1px),rgba(255,255,255,.8) calc(66.66% - 1px) 66.66%,rgba(255,255,255,0) 66.66%),linear-gradient(180deg,rgba(255,255,255,0) calc(33.33% - 1px),rgba(255,255,255,.8) calc(33.33% - 1px) 33.33%,rgba(255,255,255,0) 33.33% calc(66.66% - 1px),rgba(255,255,255,.8) calc(66.66% - 1px) 66.66%,rgba(255,255,255,0) 66.66%)}
.crop-frame.dragging::before{opacity:1}
.pack.crop-frame{width:min(230px,62vw);overflow:visible;background:none}
.pack.crop-frame .pack-face::after,.pack.crop-frame .pack-floor{display:none}
.crop-frame .pack-label,.crop-frame .pack-mark,.crop-frame .pack-crimp{transition:opacity .15s;pointer-events:none}
.crop-frame.dragging .pack-label,.crop-frame.dragging .pack-mark,.crop-frame.dragging .pack-crimp{opacity:.25}
.crop-frame.f-avatar{width:min(240px,64vw);border-radius:50%}
.crop-frame.f-avatar::after{content:"";position:absolute;inset:0;z-index:3;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--ink);pointer-events:none}
.crop-hint{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;padding:9px 14px 9px 11px;border-radius:999px;background:rgba(22,22,22,.8);color:#FFFFFF;font-size:13.5px;font-weight:900;white-space:nowrap;pointer-events:none;transition:opacity .2s}
.crop-hint .i{width:19px;height:19px}
.crop-stage[data-target="pack"] .crop-hint{top:88%}
.crop-stage.touched .crop-hint{opacity:0}
.crop-zoom{display:flex;align-items:center;gap:12px}
.crop-zoom input{flex:1;min-width:0;height:30px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.crop-zoom input::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--surface-3);box-shadow:inset 0 0 0 1.5px var(--ink)}
.crop-zoom input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:var(--yellow);box-shadow:inset 0 0 0 2px var(--ink),0 2px 0 var(--ink)}
.crop-zoom input::-moz-range-track{height:8px;border-radius:4px;background:var(--surface-3);box-shadow:inset 0 0 0 1.5px var(--ink)}
.crop-zoom input::-moz-range-thumb{width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow)}
.crop-note{text-align:center;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:-4px}

/* celebration after the diamond lands */
.cele{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:4px 0 2px}
.cele-gem{width:96px;height:96px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#E3F7FF,#FFFFFF 70%);box-shadow:inset 0 0 0 2.5px var(--ink),0 4px 0 var(--ink);animation:celePop .6s cubic-bezier(.2,1.6,.4,1)}
.cele-gem .gem{width:62px;height:62px;filter:drop-shadow(0 3px 0 var(--ink))}
@keyframes celePop{from{transform:scale(.3) rotate(-20deg);opacity:0}}
.cele-title{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:30px;line-height:1.1}
.cele-boss{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left}
.cele-bubble{position:relative;flex:1;min-width:0;padding:11px 14px 12px;border-radius:4px 16px 16px 16px;background:var(--yellow-soft);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cele-bubble b{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:900}
.cele-bubble p{font-size:16px;font-weight:900;line-height:1.45;margin-top:3px;text-wrap:balance}
.cele-sub{font-size:13px;font-weight:700;color:var(--muted)}
.rw-open{gap:8px}
.rw-box{border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);overflow:hidden}
.rw-head{display:flex;align-items:center;gap:8px;width:100%;min-height:50px;padding:0 14px;text-align:left;color:var(--ink)}
.rw-head>.i:first-child{width:18px;height:18px}
.rw-head b{font-size:14px;font-weight:900}
.rw-n{min-width:22px;height:22px;padding:0 6px;border-radius:11px;display:inline-grid;place-items:center;background:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12px;font-weight:900}
.rw-head>.i:last-child{margin-left:auto;width:18px;height:18px;transition:transform .2s}
.rw-head[aria-expanded="true"]>.i:last-child{transform:rotate(180deg)}
.rw-list{display:flex;flex-direction:column;gap:8px;padding:0 10px 10px}
.rw-item{display:flex;flex-direction:column;gap:4px;padding:11px 12px;border-radius:12px;background:var(--yellow-soft);box-shadow:inset 0 0 0 1.2px var(--ink)}
.rw-t{font-size:12px;font-weight:900;color:var(--ink-2)}
.rw-item p{font-size:14px;font-weight:700;line-height:1.5;color:var(--ink)}
.rw-a{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:4px;height:32px;padding:0 12px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:900;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--ink),0 2px 0 var(--ink)}
.rw-a .i{width:15px;height:15px}
.ed-note{display:flex;align-items:flex-start;gap:8px;padding:11px 13px;border-radius:12px;background:var(--yellow-soft);box-shadow:inset 0 0 0 1.2px var(--ink);font-size:13px;font-weight:700;line-height:1.5;color:var(--ink)}
.ed-note .gem{width:18px;height:18px;margin-top:1px}
.ed-sub span{font-weight:500;color:var(--muted)}
.read-sign{text-align:right;font-weight:900;font-size:14px}
.read-sign::before{content:"— "}

/* photo viewer */
.lbx{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:rgba(12,12,12,.95)}
.lbx.enter{animation:fadeIn .2s ease}
.lbx-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));color:#FFFFFF}
.lbx-n{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
.lbx-x,.lbx-nav{color:#FFFFFF;background:rgba(255,255,255,.14)}
.lbx-x:hover,.lbx-nav:hover{background:rgba(255,255,255,.24)}
.lbx-track{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.lbx-track::-webkit-scrollbar{display:none}
.lbx-slide{min-width:0;min-height:0;display:grid;place-items:center;padding:calc(58px + env(safe-area-inset-top,0px)) 12px calc(24px + env(safe-area-inset-bottom,0px));scroll-snap-align:start}
.lbx-slide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lbx-nav{position:absolute;top:50%;margin-top:-20px;z-index:2}
.lbx-nav.prev{left:max(10px,env(safe-area-inset-left,0px))}
.lbx-nav.next{right:max(10px,env(safe-area-inset-right,0px))}

/* reward, toast */
.reward-box{width:96px;height:96px;border-radius:26px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);margin:6px auto 0;box-shadow:inset 0 0 0 2.5px var(--ink),0 4px 0 var(--ink);animation:wiggle 1s .2s ease}
.reward-box .i{width:46px;height:46px;stroke-width:1.8}
@keyframes wiggle{20%{transform:rotate(-8deg) scale(1.05)}40%{transform:rotate(7deg) scale(1.08)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
.reward-kicker{text-align:center;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:15px;color:var(--ink)}
.reward-text{font-size:19px;font-weight:900;text-align:center;text-wrap:balance}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:95;background:var(--ink);color:#FFFFFF;font-size:14px;font-weight:700;padding:12px 18px;border-radius:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 3px 0 rgba(22,22,22,.25)}
.toast.on{opacity:1;transform:translate(-50%,0)}
html.lock .toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .pack-face::after,.tcard.shine::after{animation:none}
}

/* ---------- sign-in ---------- */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding-block:40px}
.login-in{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.login-brand .brand-word{font-size:30px;padding:8px 14px 6px;border-radius:12px}
.login-h{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:28px;line-height:1.25;margin-top:8px}
.login-sub{color:var(--ink-2);font-size:14.5px}
.login .notice{text-align:left;width:100%}
.btn.kakao{width:100%;margin-top:10px;border-radius:12px;background:#FEE500;color:rgba(0,0,0,.85);box-shadow:inset 0 0 0 2px var(--ink),var(--pop-lg);font-size:16px;font-weight:900}
.btn.kakao:disabled{opacity:.6}
/* the boss's save status */
.pub-btn.save{color:var(--ink-2)}
.pub-btn.save:disabled{cursor:default}
.pub-btn.save.err{background:var(--red-soft);color:var(--red);cursor:pointer}
.pub-btn.save.err .i{color:var(--red)}
.pub-btn.save .i{width:15px;height:15px}
.pf-out{align-self:center;color:var(--muted)}
/* the boss's own name and photo, at the top of the profile sheet in boss mode */
.boss-pf{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;background:var(--yellow-soft);box-shadow:inset 0 0 0 1.5px var(--ink)}
.boss-pf-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:900;color:var(--ink);flex-wrap:wrap}
.boss-pf-h .i{width:17px;height:17px}
.boss-pf-h span{font-size:12px;font-weight:700;color:var(--muted)}
/* boss header: mode switch, save status and profile share one row */
.top.boss .brand small{display:none}
.top.boss .top-row{gap:8px}
.pub-btn.save{padding:0 10px;gap:4px;font-size:12.5px}
/* ---------- many bosses ---------- */
/* signed out on a boss's link: the boss and their challenges above the Kakao button */
.login-in.has-boss{align-items:stretch;text-align:left;gap:14px}
.login-in.has-boss .login-brand{align-self:center}
.lp-boss{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink),var(--pop)}
.lp-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lp-who b{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:20px;line-height:1.2}
.lp-who p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.lp-list{display:flex;flex-direction:column;gap:8px}
.lp-tag{font-size:13px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.login-note{text-align:center;font-size:12.5px;color:var(--muted)}
/* "크리에이터인가요?" */
.bs-cta{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border-radius:16px;background:var(--yellow-soft);box-shadow:inset 0 0 0 1.5px var(--ink);text-align:center;color:var(--ink)}
.bs-cta b{font-size:15px;font-weight:900}
.bs-cta span{font-size:13px;color:var(--ink-2)}
.bs-cta .btn{margin-top:6px}
.empty .bs-cta{margin-top:8px;width:100%;max-width:340px}
.bs-lead{font-size:14px;color:var(--ink-2);margin-top:-6px}
/* page address: host prefix + input */
.handle-inp{display:flex;align-items:center;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line-2);transition:box-shadow .15s;overflow:hidden}
.handle-inp:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.handle-host{flex:none;padding-left:14px;font-size:15px;font-weight:700;color:var(--muted);white-space:nowrap}
.handle-inp .inp{flex:1;width:auto;min-width:0;box-shadow:none;background:transparent;padding-left:2px}
.handle-inp .inp:focus{box-shadow:none}
.handle-note.ok{color:var(--ok);font-weight:700}
.handle-note.bad{color:var(--red);font-weight:700}
/* a link to send */
.link-row{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.link-url{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all;-webkit-user-select:all}
.link-row .btn{flex:none}
.made+.link-field{margin-top:18px}
.boss-pf .link-row{background:#FFFFFF}
.pf-handle{align-self:flex-start;margin-top:-6px;color:var(--ink-2)}
.chip.link{cursor:pointer;background:var(--ink);color:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip.link .i{color:#FFFFFF}
/* challenge list: one group per boss */
.sw-boss{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:900;color:var(--ink);margin-top:4px}
.sw-boss .badge-boss{font-size:9px}
.ab-boss{padding:12px 14px}
/* ---------- payments ---------- */
.agree{display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);text-align:left;font-size:13.5px;font-weight:700;color:var(--ink)}
.agree-box{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.agree-box .i{width:15px;height:15px;stroke-width:3;opacity:0}
.agree[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--ink);background:var(--yellow-soft)}
.agree[aria-checked="true"] .agree-box{background:var(--yellow)}
.agree[aria-checked="true"] .agree-box .i{opacity:1}
.pay-seller{font-size:12px;color:var(--muted);line-height:1.5;margin-top:-6px}
.pay-seller b{color:var(--ink-2)}
.subs{display:flex;flex-direction:column;gap:8px}
.subs-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:900}
.subs-h .i{width:17px;height:17px}
.sub-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.sub-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sub-main b{font-size:14.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-main span{font-size:13px;color:var(--ink-2);line-height:1.45}
.sub-main span.bad{color:var(--red);font-weight:700}
.sub-main small{font-size:12px;color:var(--muted)}
.sub-row .btn{flex:none}
.sub-confirm{display:flex;gap:6px;flex:none}
.boss-pf .sub-row{background:#FFFFFF}
.sales-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sales-sum>div{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);min-width:0}
.sales-sum span{font-size:12px;color:var(--muted);font-weight:700}
.sales-sum b{font-family:var(--f-display);font-weight:900;font-synthesis:none;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sales-sum>div:last-child{background:var(--yellow-soft);box-shadow:inset 0 0 0 2px var(--ink)}
.sales-list{display:flex;flex-direction:column}
.sale{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line)}
.sale-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sale-main b{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sale-main span{font-size:12px;color:var(--muted)}
.sale-amt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.sale-amt b{font-size:14.5px;font-weight:900}
.sale-amt small{font-size:12px;color:var(--muted)}