:root{--bg:#161826;--surface:#232532;--surface2:#1d1f2c;--text:#e9e9ed;--muted:#b9bac6;--accent:#9184d9;--accent2:#c6bdf0;--divider:color-mix(in srgb,#e9e9ed 16%,transparent);--section:#262a60;--gold:#e9b949;--paper:#f4f1ea;--paper-ink:#16141f;--radius:14px;--font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--display:"Cormorant Garamond","Noto Serif JP","Noto Serif KR",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;overflow-x:hidden}
img,canvas,svg,video{max-width:100%}
/* Ceremony mode: light festive paper for home, convention, welcome, card */
body.ceremony{--bg:#f1f2f6;--surface:#ffffff;--surface2:#f7f5ee;--text:#16141f;--muted:#4c485e;--accent:#7A5A12;--accent2:#7A5A12;--divider:#E3D8C2;--section:#e6e2d2}
body.ceremony .topbar{background:rgba(241,242,246,.92)}
body.ceremony .brand{color:var(--text)}body.ceremony nav.main a[aria-current]{background:#e9e4cf}
body.ceremony .card{background:var(--surface)}
.card.light{background:#fff;color:#16141f}.card.light p{color:#4c485e}
.badge.soft{border-color:#c9a227;color:#8f6610;background:rgba(201,162,39,.12)}
.join-line{font-family:var(--display);font-style:italic;font-size:22px;color:#16141f}
.score-empty{color:#5d5a6e}
.seal-slot,.emblem-slot{border:1.5px dashed #c9a227;border-radius:12px;padding:16px;text-align:center;color:#8f6610;background:rgba(201,162,39,.07);margin-top:14px;font-size:14px}
.emblem-slot{margin:14px 0;color:var(--gold);border-color:var(--gold);background:rgba(233,185,73,.06)}
.emblem-slot.small{margin:0 0 12px;padding:10px;font-size:12px}
body.ceremony .emblem-slot{color:#7a5808}
body.ceremony .seal-slot{color:#7a5808}
body.ceremony .eyebrow{color:#7A5A12}
body.ceremony .demo-banner{color:#5A4A20;background:#FBF3E0;border-color:#D9C69A}
body.ceremony .badge.soft{color:#7a5808;border-color:#a8832a;background:rgba(201,162,39,.10)}
body.ceremony .btn{color:#fff}body.ceremony .btn.ghost{color:var(--accent)}
body.ceremony .role-switch button[aria-pressed="true"]{color:#fff}
body.ceremony footer.site a{color:var(--accent)}
.medal{margin-top:16px;padding-top:12px}
.demo-banner{border:1px dashed #c9a227;border-radius:var(--radius);padding:12px 16px;color:#7a5c08;background:rgba(201,162,39,.10);margin-bottom:18px}
body.workshop .demo-banner{color:var(--gold)}
a{color:var(--accent2)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--gold);color:#000;padding:8px 14px;z-index:99}
header.topbar{position:sticky;top:0;z-index:40;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 20px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--divider)}
.brand{font-family:var(--display);font-size:26px;font-weight:600;color:var(--text);text-decoration:none}.brand em{color:var(--accent2)}
nav.main{display:flex;gap:6px;flex-wrap:wrap}nav.main a{color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:999px;font-size:14px}nav.main a[aria-current]{background:var(--section);color:#fff}
.role-switch{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}.role-switch span{font-size:12px;color:var(--muted)}
.role-switch button,.btn{font:600 14px var(--font);padding:9px 16px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#12121c;cursor:pointer;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.role-switch button{background:transparent;color:var(--muted);border-color:var(--divider);padding:7px 12px}.role-switch button[aria-pressed="true"]{background:var(--accent);color:#12121c;border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--accent2)}.btn.small{padding:6px 12px;font-size:13px}.btn[disabled]{opacity:.45;cursor:not-allowed}
main{max-width:1120px;margin:0 auto;padding:28px 20px 72px}
h1{font-family:var(--display);font-size:clamp(36px,6vw,58px);line-height:1.05;margin:.2em 0;font-weight:600}h1 em{color:var(--accent2)}h2{font-family:var(--display);font-size:30px;margin:0 0 10px}h3{margin:0 0 6px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lede{color:var(--muted);max-width:65ch}.grid{display:grid;gap:16px}.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius);padding:20px}.card p{color:var(--muted)}
.paper{background:var(--paper);color:var(--paper-ink);border-radius:var(--radius);padding:22px}.paper p{color:#4c485e}
.badge{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--gold);color:var(--gold)}.badge.dim{border-color:var(--divider);color:var(--muted)}
.demo-banner{border:1px dashed var(--gold);border-radius:var(--radius);padding:12px 16px;color:var(--gold);background:rgba(233,185,73,.07);margin-bottom:18px}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}input,select,textarea{font:500 16px var(--font);padding:10px 12px;border-radius:10px;border:1px solid var(--divider);background:var(--surface2);color:var(--text);min-width:0;width:100%}
.paper input{background:#fff;color:var(--paper-ink);border-color:#cfccc0}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px}.check input{width:auto;margin-top:4px}
.score-box{background:#fff;border:1px solid #d8d9e3;border-radius:12px;padding:12px;overflow-x:auto}.score-box svg{display:block;width:100%;height:auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}.tabs button{font:600 13px var(--font);padding:8px 14px;border-radius:999px;border:1px solid var(--divider);background:transparent;color:var(--muted);cursor:pointer}.tabs button[aria-selected="true"]{background:var(--accent);color:#12121c;border-color:var(--accent)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.toolbar>*{flex:1 1 180px}
.list{display:grid;gap:10px}.item{background:var(--surface2);border:1px solid var(--divider);border-radius:12px;padding:14px 16px;text-align:left;width:100%;color:var(--text);cursor:pointer;font:inherit}.item:hover{border-color:var(--accent)}.item p{margin:4px 0;color:var(--muted);font-size:14px}
.rec-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#e5484d;animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.3}}
audio,video{width:100%;max-width:100%}dialog{background:var(--surface);color:var(--text);border:1px solid var(--divider);border-radius:var(--radius);max-width:min(680px,92vw);width:100%}dialog::backdrop{background:rgba(0,0,0,.6)}
footer.site{border-top:1px solid var(--divider);padding:22px 20px;color:var(--muted);font-size:13px;max-width:1120px;margin:0 auto}
canvas#cardCanvas{width:100%;max-width:340px;height:auto;border-radius:12px;display:block}
.brand-logo{width:min(260px,70vw);height:auto;display:block;margin:6px auto 18px}
.honors-img{width:100%;height:auto;border-radius:12px;background:#161826;display:block}
figure{margin:12px 0}figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.muse-hint{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px}
.muse-hint img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.muse-hint p{margin:0;color:var(--muted)}
@media(max-width:760px){.grid.c2,.grid.c3{grid-template-columns:1fr}main{padding:20px 14px 56px}
  header.topbar{padding:8px 12px;gap:8px;flex-wrap:wrap}
  .brand{font-size:22px}
  nav.main{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap;padding:6px 9px;font-size:13px}
  .role-switch{margin-left:auto;gap:3px}.role-switch span{display:none}
  .role-switch button{padding:6px 10px;font-size:13px}
  .brand-logo{width:min(96px,30vw);margin-bottom:10px}
  h1{font-size:34px}
  .demo-banner{margin-bottom:12px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.topbar .p01-lang{display:flex;border:1px solid var(--divider);border-radius:999px;padding:2px;gap:2px}
.topbar .p01-lang button{border:0;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:500;cursor:pointer;background:transparent;color:var(--muted);min-height:28px}
.topbar .p01-lang button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
body.ceremony footer.site{border-top:1px solid #E3D8C2}