:root { color-scheme:dark; --bg:#0d0b11; --surface:#1b1622; --raised:#282031; --line:#51465d; --text:#f8f4f8; --muted:#cbbfd0; --gold:#f0c968; --red:#e75768; --good:#94d4b2; --focus:#f8d579; font-family:"Trebuchet MS","Segoe UI",sans-serif; }
    * { box-sizing:border-box; }
    html,body { min-width:320px; }
    body { margin:0; min-height:100vh; background:linear-gradient(180deg,#17101d 0,#0d0b11 300px); color:var(--text); }
    button,input { font:inherit; }
    button { cursor:pointer; }
    button:disabled { cursor:not-allowed; opacity:.48; }
    :focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
    [hidden] { display:none !important; }
    .topline { display:grid; grid-template-columns:1fr 1fr 1fr; height:3px; }
    .topline span:nth-child(1) { background:#050407; }
    .topline span:nth-child(2) { background:#b82f48; }
    .topline span:nth-child(3) { background:var(--gold); }
    .shell { width:min(100%,1040px); margin:auto; padding-inline:28px; }
    header { border-bottom:1px solid #4f3d4d; background:#110e17; }
    .header-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .brand { min-width:0; }
    .brand strong { display:block; font-family:Georgia,serif; font-size:19px; line-height:1.1; letter-spacing:0; }
    .brand small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
    .header-meta { color:var(--gold); font-size:11px; font-weight:800; text-transform:uppercase; white-space:nowrap; }
    main { padding-top:25px; padding-bottom:46px; }
    .workspace-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,252px); align-items:center; gap:30px; margin-bottom:23px; }
    .intro { min-width:0; display:flex; align-items:end; justify-content:space-between; gap:18px; }
    .intro-copy { min-width:0; align-self:center; }
    h1 { margin:0 0 6px; font-family:Georgia,serif; font-size:30px; line-height:1.12; font-weight:700; }
    .subtle { margin:0; color:var(--muted); font-size:13px; line-height:1.45; max-width:25ch; }
    .characters { display:flex; align-items:flex-end; justify-content:center; gap:5px; flex:none; height:102px; margin:0; border-bottom:2px solid #907349; }
    .sprite { position:relative; display:block; flex:none; height:100px; overflow:hidden; transition:transform .22s ease; }
    .sprite img { position:absolute; display:block; max-width:none; width:auto; image-rendering:pixelated; }
    .sprite-aklove { width:89px; }
    .sprite-aklove img { height:96px; left:0; bottom:0; }
    .sprite-shadow { width:76px; }
    .sprite-shadow img { height:100px; left:0; bottom:0; }
    .sprite-heroes { width:135px; }
    .sprite-heroes img { height:105px; left:0; bottom:-3px; }
    @media (hover:hover) { .sprite:hover { transform:translateY(-3px); } }
    .reviewer { min-width:0; }
    .reviewer label,.field-label { display:block; margin-bottom:7px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
    .name-row { display:flex; gap:7px; }
    .reviewer input[type="text"] { width:100%; min-width:0; height:44px; padding:0 12px; border:1px solid #867590; border-radius:3px; background:#141019; color:var(--text); }
    .reviewer input[aria-invalid="true"] { border-color:var(--red); }
    .reviewer button { min-height:44px; padding:0 14px; border:1px solid var(--gold); border-radius:3px; background:var(--gold); color:#19131b; font-weight:800; white-space:nowrap; }
    .reviewer strong { display:block; min-height:44px; padding:11px 12px; border:1px solid var(--line); border-radius:3px; background:var(--surface); font-size:14px; overflow-wrap:anywhere; }
    .discord-login { display:block; min-height:44px; padding:11px 14px; border:1px solid var(--gold); border-radius:3px; background:var(--gold); color:#19131b; font-size:14px; font-weight:800; text-align:center; text-decoration:none; }
    .discord-login:hover { filter:brightness(1.12); }
    .reviewer-status { margin:7px 0 0; min-height:17px; color:var(--muted); font-size:11px; line-height:1.4; }
    .notice { margin:0 0 14px; padding:11px 13px; border:1px solid var(--line); border-left:3px solid var(--gold); background:var(--surface); font-size:13px; line-height:1.5; }
    .notice.error { border-left-color:var(--red); color:#ffe1e3; }
    .card,.state-panel { border:1px solid #796582; border-radius:5px; background:var(--surface); }
    .card { overflow:hidden; box-shadow:0 18px 48px #05040755; }
    .card-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:17px 23px; border-bottom:1px solid var(--line); background:#241a2a; }
    .card-index { color:var(--gold); font-size:11px; font-weight:800; text-transform:uppercase; }
    .card-title { margin:4px 0 0; font-family:Georgia,serif; font-size:22px; line-height:1.2; }
    .card-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 24px; padding:22px 23px 23px; }
    .text-panel { min-width:0; border-top:2px solid #806f89; padding-top:13px; }
    .text-panel.current { border-top-color:var(--gold); }
    .section-title { margin:0 0 12px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
    .current .section-title { color:var(--gold); }
    .copy { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; line-height:1.58; }
    .source-copy { color:#e2d9e6; }
    .locked-inline { display:inline; padding:1px 4px; border:1px solid #8d7648; border-radius:2px; background:#302838; color:#ffdc82; font-weight:650; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
    .editor { grid-column:1/-1; min-width:0; border-top:1px solid var(--line); padding-top:18px; }
    .editor-help { margin:0 0 11px; color:var(--muted); font-size:12px; line-height:1.45; }
    .draft { width:100%; min-height:108px; padding:12px 13px; border:1px solid #94849f; border-radius:3px; background:#100d16; color:var(--text); font-size:15px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; cursor:text; }
    .draft:focus { border-color:var(--focus); }
    .draft[contenteditable="false"] { opacity:.65; cursor:wait; }
    .locked-token { display:inline; padding:2px 5px; border:1px solid var(--red); border-radius:2px; background:#3b1825; color:#ffe7ea; font-weight:700; white-space:nowrap; user-select:none; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
    .measure-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:11px; }
    .width-note { margin:0; color:var(--good); font-size:12px; line-height:1.35; }
    .width-note:not(.fits):not(.over) { color:var(--muted); }
    .width-note.over { color:#ff929d; font-weight:700; }
    .char-count { color:var(--muted); font:12px ui-monospace,Consolas,monospace; text-align:right; white-space:nowrap; }
    .char-count.over { color:#ff929d; }
    .space-track { height:7px; margin-top:9px; background:#403647; overflow:hidden; }
    .space-fill { display:block; width:0; height:100%; background:var(--good); transition:width .2s ease; }
    .space-fill.over { background:var(--red); }
    .context { border-top:1px solid var(--line); padding:14px 23px; color:var(--muted); font-size:12px; }
    .context summary,.faq summary { cursor:pointer; color:var(--text); font-weight:700; }
    .context summary::marker,.faq summary::marker { color:var(--gold); }
    .context-content { padding:9px 0 0; line-height:1.45; }
    .context-content p { margin:5px 0; }
    .action-bar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto; gap:10px; padding:15px 23px; border-top:1px solid var(--line); background:#120f18; }
    .action-bar.editing { grid-template-columns:minmax(0,1fr) 48px; }
    .action { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:48px; padding:8px 14px; border:1px solid #786884; border-radius:3px; background:var(--raised); color:var(--text); font-size:13px; font-weight:800; white-space:nowrap; }
    .action svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .action.accept { border-color:#dbb45a; background:var(--gold); color:#1b1418; }
    .action.suggest { border-color:#a891b7; }
    .action.skip { color:var(--muted); }
    .action.undo { color:var(--muted); white-space:normal; text-align:center; }
    .action.back { width:48px; padding:8px; }
    .action:hover:not(:disabled) { filter:brightness(1.13); transform:translateY(-1px); }
    .action:active:not(:disabled) { transform:translateY(0); }
    .progress-band { display:grid; grid-template-columns:1fr 1fr; gap:27px; margin-top:24px; padding:20px 1px 0; border-top:1px solid var(--line); }
    .progress-band.solo { grid-template-columns:1fr; }
    .personal-progress { padding-right:27px; border-right:1px solid var(--line); }
    .progress-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 15px; }
    .progress-head strong { color:var(--gold); font-size:11px; font-weight:800; text-transform:uppercase; }
    .progress-count { font:12px ui-monospace,Consolas,monospace; color:var(--muted); }
    .progress-text { margin:6px 0 0; color:var(--text); font-size:13px; }
    .progress-track { height:4px; margin-top:10px; background:#352d40; }
    .progress-fill { display:block; height:100%; width:0; background:var(--gold); transition:width .2s ease; }
    .personal-fill { background:var(--good); }
    .scope-note,.personal-count { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }
    .personal-count { color:#e6d0a0; }
    .credit-choice { display:flex !important; align-items:center; gap:7px; margin-top:10px; color:var(--muted); font-size:11px; font-weight:400 !important; text-transform:none !important; }
    .credit-choice input { accent-color:var(--gold); }
    .state-panel { padding:28px 23px; border-left:3px solid var(--gold); }
    .state-panel h2 { margin:0 0 7px; font-family:Georgia,serif; font-size:21px; }
    .state-panel p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
    .empty-actions { display:flex; margin:12px 0 18px; }
    .empty-actions .action { width:min(100%,240px); }
    .retry-next { min-height:42px; margin-top:15px; padding:7px 14px; border:1px solid var(--gold); border-radius:3px; background:var(--gold); color:#1b1418; font-weight:800; }
    footer { border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
    .footer-inner { padding-top:19px; padding-bottom:28px; }
    .faq { padding-bottom:18px; border-bottom:1px solid var(--line); }
    .faq summary { font-size:13px; }
    .faq-content { display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin-top:17px; }
    .faq-content section { min-width:0; }
    .faq-content h3 { margin:0 0 4px; color:var(--text); font-size:12px; }
    .faq-content p { margin:0; font-size:12px; line-height:1.5; }
    .footer-bottom { display:flex; align-items:start; justify-content:space-between; gap:10px 22px; flex-wrap:wrap; padding-top:15px; }
    footer nav { display:flex; flex-wrap:wrap; gap:8px 16px; }
    footer a { color:var(--muted); text-decoration:none; }
    footer a:hover { color:var(--gold); text-decoration:underline; }
    @media (max-width:940px) { .intro { align-items:center; } .characters { height:80px; } .sprite { height:78px; } .sprite-aklove { width:70px; } .sprite-aklove img { height:76px; } .sprite-shadow { width:60px; } .sprite-shadow img { height:79px; } .sprite-heroes { width:110px; } .sprite-heroes img { height:85px; bottom:-3px; } }
    @media (max-width:720px) { .shell { padding-inline:18px; } .workspace-head { grid-template-columns:1fr; gap:15px; } .intro { justify-content:space-between; } .reviewer { max-width:440px; } .card-body { grid-template-columns:1fr; gap:20px; } .action-bar { grid-template-columns:1fr 1fr; } .action-bar.editing { grid-template-columns:minmax(0,1fr) 48px; } .progress-band { grid-template-columns:1fr; gap:17px; } .personal-progress { padding:0 0 17px; border-right:0; border-bottom:1px solid var(--line); } .faq-content { grid-template-columns:1fr; } }
    @media (max-width:520px) { .header-inner { min-height:62px; } .header-meta { display:none; } main { padding-top:18px; } .intro { display:block; } h1 { font-size:25px; } .subtle { font-size:12px; max-width:none; } .characters { justify-content:flex-start; height:70px; margin-top:12px; } .sprite { height:68px; } .sprite-aklove { width:62px; } .sprite-aklove img { height:67px; } .sprite-shadow { width:52px; } .sprite-shadow img { height:69px; } .sprite-heroes { width:95px; } .sprite-heroes img { height:74px; bottom:-3px; } .card-top,.card-body,.context { padding-inline:16px; } .action-bar { padding:14px 16px; } .action.undo { font-size:12px; } }
    @media (max-width:390px) { .shell { padding-inline:12px; } .brand strong { font-size:17px; } h1 { font-size:23px; } .action-bar.editing .suggest { font-size:12px; } .measure-row { flex-wrap:wrap; gap:4px; } .char-count { text-align:left; } }
    @media (prefers-reduced-motion:reduce) { .space-fill,.progress-fill,.sprite { transition:none; } .sprite:hover,.action:hover:not(:disabled) { transform:none; } }