@font-face{font-family:"Zodiak";src:url(fonts/Zodiak-Variable.woff2) format("woff2");font-weight:300 900}
@font-face{font-family:"Zodiak";src:url(fonts/Zodiak-VariableItalic.woff2) format("woff2");font-weight:300 900;font-style:italic}
@font-face{font-family:"Inter";src:url(fonts/Inter-Variable.woff2) format("woff2");font-weight:100 900}
:root{
  --ground:#D9D5CA; --ground-2:#CFCABD; --ink:#2A3A3A; --muted:#6B7470; --faint:#949B95;
  --r:#B8381F; --o:#2F57A8; --a:#6B4FB3; --brass:#9A6B2F;
  --display:"Zodiak",Georgia,serif; --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.9,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:14px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
iframe{border:0;background:#fff;display:block;pointer-events:none;width:760px;height:960px}

.top{position:fixed;left:0;right:0;top:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;z-index:30}
.brand{font-family:var(--display);font-size:22px;font-weight:450}
.brand em{font-style:italic;font-weight:400;color:var(--muted)}
.lenses{display:flex;gap:28px}
.lenses button{font-family:var(--display);font-size:20px;color:var(--faint);padding:4px 0;border-bottom:2px solid transparent}
.lenses button.on{color:var(--ink);border-color:var(--ink)}
.right{display:flex;gap:14px;align-items:center}
.replay{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.judge{padding:7px 14px;border:1.5px dotted var(--a);color:var(--a);border-radius:3px;font-size:13.5px;font-weight:500}
.judge.on{background:var(--a);color:#fff;border-style:solid}

.field{position:fixed;inset:56px 0 40px 0;overflow:hidden}
.names{position:absolute;inset:0;pointer-events:none}
.names .nm{position:absolute;font-family:var(--display);font-size:64px;font-weight:450;color:rgba(42,58,58,.18);transition:all .9s var(--ease);transform:translate(-50%,-50%);white-space:nowrap;letter-spacing:-.02em}
.names .nm.small{font-size:13px;color:var(--muted);font-family:var(--body);letter-spacing:0}
.axis{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
.axis.on{opacity:1}
.axis .line{position:absolute;left:8%;right:6%;height:1px;background:rgba(42,58,58,.25)}
.axis .tick{position:absolute;transform:translateX(-50%);font-size:12px;color:var(--muted);padding-top:8px;border-top:1px solid rgba(42,58,58,.35);width:1px;white-space:nowrap}
.axis .tick span{display:block;transform:translate(-50%,-32px)}
.axis .tick.now{color:var(--r)}

.cutouts{position:absolute;inset:0}
.co{position:absolute;left:0;top:0;width:760px;height:960px;transform-origin:50% 50%;transition:transform .9s var(--ease),opacity .6s;cursor:pointer;will-change:transform}
.co .sheet{position:absolute;inset:0;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.12),0 40px 70px -30px rgba(30,40,38,.55);transition:transform .7s var(--ease)}
.co .sheet.back{transform:translate(-26px,18px) rotate(-3.5deg)}
.co .sheet.back2{transform:translate(-50px,38px) rotate(-6deg)}
.co .sheet.blank{background:repeating-linear-gradient(135deg,#fff 0 10px,#F0EFE9 10px 20px);border:2px dashed #C9C6BC;box-shadow:none}
.co .sheet svg.ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.co .tag{position:absolute;left:0;top:100%;margin-top:14px;font-size:13px;color:var(--ink);white-space:nowrap;transform-origin:0 0}
.co .tag b{font-weight:600}
.co .tag .q{color:var(--o);font-weight:600}
.co .tag .y{color:var(--r);font-weight:600}
.co .tag .n{color:var(--muted)}
.co.new .sheet.front::after{content:"";position:absolute;inset:-8px;border:6px solid var(--r);opacity:.9}
.co.dim{opacity:.55}
.co.faint{opacity:.35}
.co.hidden{opacity:0;pointer-events:none}
.co .ask{position:absolute;left:56px;right:56px;top:300px;font-family:var(--display);font-size:38px;line-height:1.15;color:var(--muted);font-style:italic}

.captions{position:absolute;left:0;right:0;bottom:30px;display:none;flex-wrap:wrap;justify-content:center;gap:14px 22px;padding:0 40px;pointer-events:auto}
.captions.on{display:flex}
.cap{width:340px;border:1.5px dotted var(--a);padding:12px 14px;font-size:13.5px;line-height:1.4;color:#3A3550;background:rgba(217,213,202,.9)}
.cap .h{color:var(--a);font-size:12px;font-weight:600;margin-bottom:4px}
.cap .ev{color:var(--a);font-size:12px;margin-top:4px}
.cap a{display:block;margin-top:8px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:13px;cursor:pointer}
.cap.note{position:static;font-family:var(--body);font-style:normal;line-height:1.4;width:100%;text-align:center;border:0;background:none;color:var(--a);font-size:12px;padding:0;order:9}
.stamp{position:absolute;left:50%;top:40px;transform:translateX(-50%);font-family:var(--display);font-size:30px;color:var(--r);opacity:0;transition:opacity .3s;pointer-events:none}
.stamp.on{opacity:1}

/* opened */
.opened{position:fixed;inset:0;display:none;z-index:40}
.opened.on{display:block}
.opened .veil{position:absolute;inset:0;background:rgba(217,213,202,.94)}
body.is-open .top,body.is-open .legend{visibility:hidden}
.opened .frame{position:absolute;left:50%;top:76px;transform:translateX(-50%) scale(var(--s,.86));transform-origin:50% 0;width:1140px;height:960px}
.opened .page{position:absolute;left:0;top:0;width:760px;height:960px;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.12),0 60px 90px -40px rgba(30,40,38,.6)}
.opened .page.back{left:-40px;top:26px;transform:rotate(-3deg);cursor:pointer;filter:brightness(.98)}
.opened .page.back .lab{position:absolute;left:-14px;top:-34px;transform:rotate(3deg);font-size:14px;color:var(--ink);white-space:nowrap}
.opened .page.back .lab b{color:var(--r)}
.opened .page svg.ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.opened .hits{position:absolute;inset:0}
.opened .hit{position:absolute;left:0;right:0;cursor:crosshair}
.opened .hit:hover{outline:2px dashed var(--r);outline-offset:-2px}
.opened .hit .live{position:absolute;left:-14px;top:6px;font-size:12px;color:var(--o);background:#fff;padding:1px 6px;border:1px solid var(--o);border-radius:2px;transform:translateX(-100%);white-space:nowrap}
.opened .notes{position:absolute;left:790px;top:0;width:340px;height:960px}
.note{position:absolute;left:0;width:330px;font-family:var(--display);font-style:italic;font-size:19px;line-height:1.3;color:var(--r)}
.note.o{color:var(--o)}
.note.a{color:var(--a);font-style:normal;font-family:var(--body);font-size:14px;border:1.5px dotted var(--a);padding:8px 10px;width:300px}
.note .who{display:block;font-family:var(--body);font-style:normal;font-size:12px;color:var(--muted);margin-bottom:2px}
.note .who b{color:inherit}
.note .ans{display:block;font-size:17px;color:var(--r);margin-top:4px}
.note .ans.o{color:var(--o)}
.note form{display:flex;gap:6px;margin-top:6px}
.note input{flex:1;border:0;border-bottom:1.5px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:17px;outline:none;padding:2px 0}
.note button.s{font-family:var(--body);font-style:normal;font-size:12px;border:1px solid currentColor;border-radius:2px;padding:2px 8px}
.note .fix{display:block;margin-top:4px;font-size:12px;text-decoration:underline;cursor:pointer}
.note .wait{display:block;font-family:var(--body);font-style:normal;font-size:12px;margin-top:3px}
.opened .bar{position:absolute;left:0;right:0;top:14px;display:flex;align-items:center;gap:18px;padding:0 28px;font-size:13.5px}
.opened .bar .back{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
.opened .bar .t{font-family:var(--display);font-size:20px}
.opened .bar .t em{font-style:italic;color:var(--muted);font-size:16px;margin-left:8px}
.opened .bar .sp{flex:1}
.opened .bar .act{padding:6px 12px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:#fff;font-size:13px}
.opened .bar .act.g{background:transparent;color:var(--ink)}
.opened .bar .next{color:var(--muted)}
.opened .bar .next b{color:var(--ink);font-weight:500}
.opened .askbox{position:absolute;left:28px;top:76px;width:250px;font-size:13px;color:var(--muted);line-height:1.45}
.opened .askbox .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);margin-bottom:4px}
.opened .askbox p{margin:0 0 6px;font-family:var(--display);font-size:15px;color:var(--ink)}
.opened .askbox a{color:var(--ink)}
.opened .frame.cmp{width:1570px}
.opened .cmp .page.back{left:810px;top:0;transform:none;cursor:default}
.opened .cmp .notes{display:none}

.legend{position:fixed;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;gap:18px;padding:0 28px;font-size:12px;color:var(--muted);z-index:30}
.legend .ink{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:6px;vertical-align:2px}
.legend .ink.r{background:var(--r)}
.legend .ink.o{background:var(--o)}
.legend .ink.a{border-top:2px dotted var(--a);height:0}
.legend .sep{margin-left:auto;color:var(--faint)}

.opened:has(.frame.cmp) .askbox{display:none}