:root{--bg:#FAF9F5;--surface:#F0EEE6;--text:#141413;--muted:#5E5D59;--line:#E0DDD0;--accent:#D97757;--accent-d:#C6613F;--on-accent:#fff;--bad:#B3261E;--ok:#2E7D4F;
--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
:root[data-theme=dark]{--bg:#262624;--surface:#30302E;--text:#FAF9F5;--muted:#B0AEA5;--line:#41403D;--accent-d:#E8906F;--on-accent:#141413;--bad:#F2928B;--ok:#7FD1A0}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#262624;--surface:#30302E;--text:#FAF9F5;--muted:#B0AEA5;--line:#41403D;--accent-d:#E8906F;--on-accent:#141413;--bad:#F2928B;--ok:#7FD1A0}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3rem)}h2{font-size:1.7rem}h3{font-size:1.25rem}
a{color:var(--accent-d)}p{margin:0 0 1em}[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
header.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;gap:12px;min-height:58px;flex-wrap:wrap}
.brand{font:600 1.25rem var(--serif);text-decoration:none;color:var(--text)}
.tag{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:2px 12px;font:600 .8rem var(--sans)}
.by{color:var(--muted);font-size:.8rem}.sp{flex:1}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);padding:10px 18px;border-radius:10px;border:0;text-decoration:none;font:600 .95rem var(--sans);cursor:pointer}
.btn:hover{background:var(--accent-d)}.btn.alt{background:none;color:var(--text);border:1px solid var(--line)}.btn.alt:hover{border-color:var(--accent)}
.btn.sm{padding:5px 11px;font-size:.82rem;border-radius:8px}.btn.danger{background:none;color:var(--bad);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:default}
main{padding:28px 0 90px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin:14px 0}
.rowb{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input,select,textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit}
textarea{min-height:70px;resize:vertical}
label.l{display:block;font:600 .85rem var(--sans);color:var(--muted);margin:12px 0 4px}
label.c{display:flex;gap:8px;align-items:center;margin:8px 0;cursor:pointer}label.c input{width:auto}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font:600 .95rem var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--text);border-color:var(--accent)}
.chip{display:inline-block;border-radius:999px;padding:1px 10px;font:600 .75rem var(--sans);background:var(--line);color:var(--text);margin:0 4px 4px 0}
.chip.ok{background:var(--ok);color:var(--bg)}.chip.acc{background:var(--accent);color:var(--on-accent)}
.muted,small{color:var(--muted)}.err{color:var(--bad);font-weight:600}
.lead{font:1.2rem/1.5 var(--serif);color:var(--muted)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--muted);font-size:.8rem;white-space:nowrap}
.empty{text-align:center;color:var(--muted);padding:34px;border:1px dashed var(--line);border-radius:12px}
.q{margin:18px 0}.q>.ql{display:block;font-weight:600;margin-bottom:4px}.q .h{color:var(--muted);font-size:.88rem;margin:-2px 0 6px}.req{color:var(--accent-d)}
.q label.c{margin:4px 0}
.stars{display:inline-flex;gap:2px}.stars button{background:none;border:0;font-size:1.9rem;line-height:1;color:var(--line);cursor:pointer;padding:0 2px}.stars button.on{color:var(--accent)}
.rrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.subrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}.powered{color:var(--muted);font-size:.8rem}
.skyc{position:fixed;right:max(10px,env(safe-area-inset-right,0px));bottom:max(8px,env(safe-area-inset-bottom,0px));font-size:.68rem;color:var(--muted);opacity:.7;pointer-events:none;z-index:4}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:.9rem;opacity:0;transition:.25s;pointer-events:none;z-index:2000}#toast.on{opacity:1}
#gate{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.gbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;max-width:440px;width:100%;text-align:center;margin:auto}
#gwc{background:#fff;border-radius:12px;padding:10px;margin:12px 0;min-height:80px}
.qcard{border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0;background:var(--bg)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 18px}
/* opening animations */
#intro{position:fixed;inset:0;z-index:1000;background:#141413;color:#FAF9F5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:opacity .6s,visibility .6s}
#intro.out{opacity:0;visibility:hidden}
#intro .a{font:600 .85rem var(--sans);letter-spacing:.35em;text-transform:uppercase;color:#D97757;opacity:0;animation:fi .8s .2s forwards}
#intro .t{font:600 clamp(2.2rem,9vw,4.6rem) var(--serif);display:flex;flex-wrap:wrap;justify-content:center;padding:0 16px}
#intro .t span{opacity:0;transform:translateY(.6em);animation:rs .6s calc(.5s + var(--i)*.05s) cubic-bezier(.2,.8,.2,1) forwards;white-space:pre}
#intro .s{font:500 .95rem var(--sans);color:#B0AEA5;opacity:0;animation:fi .8s 1.7s forwards}
#intro .l{height:2px;width:0;background:#D97757;animation:gw .9s 1.4s ease-out forwards}
#intro.mc .t{clip-path:inset(0 100% 0 0);animation:wp 1.2s .5s cubic-bezier(.6,0,.2,1) forwards}#intro.mc .t span{opacity:1;transform:none;animation:none}
#intro.mc .l{width:0;animation:gw2 1.2s .3s ease-out forwards;height:3px}
@keyframes fi{to{opacity:1}}@keyframes rs{to{opacity:1;transform:none}}@keyframes gw{to{width:min(220px,50vw)}}@keyframes gw2{to{width:min(420px,80vw)}}@keyframes wp{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){#intro *{animation-duration:.01s!important;animation-delay:0s!important}}