*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #15130f;--panel: #1e1a14;--panel-2: #262019;--text: #ece4d6;--muted: #9b8f7a;--accent: #d8a557;--line: #383023}html,body,#app{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,sans-serif;background:var(--bg);color:var(--text)}#app{display:flex}#sidebar{width:280px;min-width:280px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}#sidebar header{padding:22px 20px 14px;border-bottom:1px solid var(--line);flex-shrink:0}#sidebar h1{font-size:26px;font-weight:600;letter-spacing:1px}#sidebar h1 .romaji{font-size:14px;color:var(--accent);font-weight:400;margin-left:6px}#sidebar .subtitle{color:var(--muted);font-size:13px;margin-top:6px}#joint-list{flex:1;padding:10px;overflow-y:auto;min-height:0}.joint-btn{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:8px;padding:12px;margin-bottom:4px;color:var(--text);cursor:pointer;font:inherit}.joint-btn:hover{background:var(--panel-2)}.joint-btn.active{background:var(--panel-2);border-color:var(--accent)}.joint-btn .ja{font-size:17px}.joint-btn .ja .romaji{color:var(--accent);font-size:12px;margin-left:6px}.joint-btn .en{color:var(--muted);font-size:12px;margin-top:3px}#sidebar footer{padding:14px 20px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);flex-shrink:0}#sidebar footer .kbd-hint{margin-bottom:10px}.kbd-hint{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;white-space:nowrap}.kbd-hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;font-family:inherit;font-size:11px;line-height:1;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px}#stage{flex:1;display:flex;flex-direction:column;min-width:0}#canvas-wrap{flex:1;position:relative;min-height:0}#canvas-wrap canvas{display:block}#cerver-badge{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;align-items:baseline;gap:6px;padding:11px 18px;border-radius:999px;background:linear-gradient(135deg,#e8b25f,#d8a557 55%,#c4923f);border:1px solid rgba(255,230,180,.5);text-decoration:none;color:#1a140a;font-weight:600;box-shadow:0 6px 20px #d8a55759,0 2px 6px #0006;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}#cerver-badge:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 28px #d8a5578c,0 3px 8px #00000073}.cb-made{font-size:12px;letter-spacing:.2px;color:#1a140ab3}.cb-brand{font-size:15px;font-weight:700;letter-spacing:.3px;color:#1a140a}@media(max-width:760px){#cerver-badge{right:12px;bottom:12px;padding:9px 14px}}#controls{padding:12px 24px;background:var(--panel);border-top:1px solid var(--line);display:flex;align-items:center;gap:32px;flex-wrap:wrap}.slider-row{display:flex;align-items:center;gap:12px;flex:1;min-width:260px}.slider-row .label{color:var(--muted);font-size:12px;white-space:nowrap}.slider-row input[type=range]{flex:1;accent-color:var(--accent)}.toggles{display:flex;gap:20px;font-size:13px;color:var(--muted)}.toggles label{display:flex;align-items:center;gap:6px;cursor:pointer}.toggles input{accent-color:var(--accent)}.dl{display:flex;align-items:center;gap:10px}.dl button{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--accent);border-radius:7px;color:var(--accent);font:inherit;font-size:13px;padding:7px 14px;cursor:pointer;transition:background .15s,color .15s}.dl button:hover{background:var(--accent);color:var(--bg)}.dl button svg{width:15px;height:15px}.dl-note{color:var(--muted);font-size:11px}#info{padding:16px 24px 20px;background:var(--panel);border-top:1px solid var(--line);max-height:230px;overflow-y:auto}#info h2{font-size:18px;font-weight:600}#info h2 .romaji{color:var(--accent);font-size:13px;font-weight:400;margin-left:8px}#info p{color:var(--muted);font-size:13px;line-height:1.6;margin-top:6px;max-width:720px}#info h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-top:14px}#info ol{margin:8px 0 0 18px;font-size:13px;line-height:1.7;color:var(--text);max-width:720px}@media(max-width:760px){#app{flex-direction:column}#sidebar{width:100%;min-width:0;max-height:200px}}