.notes-page { --notes-ink:#222b27;--notes-muted:#55635b;--notes-line:#d9e0db;--notes-paper:#fff;--notes-accent:#32664c;margin:0;background:#f6f7f6;color:var(--notes-ink);font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
[data-theme=dark] .notes-page { --notes-ink:#e8e8ed;--notes-muted:#b8b8c8;--notes-line:#4c4c64;--notes-paper:#1e1e3a;--notes-accent:#9fe6b8; }
.notes-page * { box-sizing:border-box; }
.notes-main { max-width:1000px;margin:36px auto 72px;padding:0 28px; }
.notes-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--notes-line); }
.notes-heading h1 { margin:0;font-size:30px;line-height:1.4;text-wrap:balance;overflow-wrap:anywhere; }
.notes-heading p { margin:8px 0 0;color:var(--notes-muted);font-size:15px; }
.notes-main a { color:var(--notes-accent); }
#notes-actions { display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0; }
.notes-main button,.notes-upload,#notes-actions a { min-height:44px;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:14px;font-weight:600;line-height:1.5;padding:9px 14px;border:1px solid var(--notes-line);border-radius:6px;background:var(--notes-paper);color:var(--notes-ink);cursor:pointer;text-decoration:none; }
.notes-main button { font-family:inherit;font-size:14px; }
.notes-main button:hover,.notes-upload:hover,#notes-actions a:hover { border-color:var(--notes-accent);color:var(--notes-accent); }
.notes-page .notes-primary { background:#32664c;color:#fff;border-color:#32664c; }
.notes-main button:disabled,.notes-upload:has(input:disabled) { opacity:.6;cursor:wait; }
.notes-main :focus-visible { outline:2px solid var(--notes-accent);outline-offset:3px; }
.notes-page [hidden] { display:none !important; }
.notes-message { color:var(--notes-muted);min-height:26px;margin:18px 0;overflow-wrap:anywhere; }
.notes-message[data-error] { color:#a52c32; }
[data-theme=dark] .notes-message[data-error] { color:#ffb0b5; }
.notes-empty { padding:40px 0;color:var(--notes-muted); }
.notes-entry { padding:25px 0;border-bottom:1px solid var(--notes-line); }
.notes-entry h2 { margin:0 0 8px;font-size:22px;line-height:1.5;overflow-wrap:anywhere; }
.notes-entry h2 a { color:var(--notes-ink);text-decoration:none; }
.notes-entry h2 a:hover { color:var(--notes-accent); }
.notes-entry p { margin:10px 0 0;max-width:70ch;overflow-wrap:anywhere; }
.notes-meta { display:block;font-size:14px;color:var(--notes-muted); }
.notes-more { margin-top:24px; }
.notes-content { max-width:74ch;margin:28px auto; }
.notes-paragraph { white-space:pre-wrap;overflow-wrap:anywhere;margin:24px 0; }
.notes-content figure { margin:30px 0; }
.notes-content img { display:block;width:auto;max-width:100%;margin:auto;border-radius:4px; }
.notes-content video { display:block;width:auto;max-width:100%;max-height:80vh;margin:auto;border-radius:4px; }
.notes-content audio { width:100%;min-height:54px; }
.notes-content figcaption { margin:10px 0 0;text-align:center;color:var(--notes-muted);font-size:14px;overflow-wrap:anywhere; }
.notes-content .notes-image-link { display:block;background:transparent;border:0;padding:0;cursor:zoom-in; }
.notes-content .notes-image-hint { margin:8px 0 0;text-align:center;color:var(--notes-muted);font-size:13px; }
.notes-content .notes-figure-image { margin-left:calc(50% - min(50vw - 28px, 470px));margin-right:calc(50% - min(50vw - 28px, 470px)); }
body.notes-viewer-open { overflow:hidden; }
.notes-viewer { position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;background:rgba(11,13,12,.95);color:#f1f4f2; }
.notes-viewer[hidden] { display:none !important; }
.notes-viewer-bar { display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:rgba(0,0,0,.6);border-bottom:1px solid rgba(255,255,255,.18); }
.notes-viewer-bar button,.notes-viewer-bar a { min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;line-height:1.5;color:#f1f4f2;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:6px;cursor:pointer;text-decoration:none; }
.notes-viewer-bar button:hover,.notes-viewer-bar a:hover { background:rgba(255,255,255,.22); }
.notes-viewer-bar :focus-visible { outline:2px solid #9fe6b8;outline-offset:2px; }
.notes-viewer-scale { min-width:62px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums;color:#dfe4e1; }
.notes-viewer-stage { flex:1;overflow:auto;padding:12px;text-align:center;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; }
.notes-viewer-stage img { display:block;margin:0 auto;max-width:none;border-radius:4px;background:#fff; }
.notes-viewer-tip { padding:8px 12px;text-align:center;font-size:13px;line-height:1.6;color:#c6cec9;background:rgba(0,0,0,.6);border-top:1px solid rgba(255,255,255,.18); }
@media(max-width:640px) {
 .notes-viewer-bar { gap:6px;padding:8px; }
 .notes-viewer-bar button,.notes-viewer-bar a { min-height:44px;padding:8px 12px;font-size:13px; }
 .notes-viewer-stage { padding:8px; }
}
.notes-field { display:block;font-weight:600;margin:20px 0 8px; }
.notes-page input[type=text],#note-title,.notes-page textarea { display:block;width:100%;min-width:0;border:1px solid var(--notes-line);border-radius:6px;padding:12px;color:var(--notes-ink);background:var(--notes-paper);font:inherit;font-size:16px;line-height:1.7; }
.notes-page textarea { min-height:180px;resize:vertical; }
.notes-block { margin-top:24px;padding-bottom:24px;border-bottom:1px solid var(--notes-line);min-width:0; }
.notes-block-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }
.notes-block-heading h2 { font-size:17px;margin:0; }
.notes-block-tools { display:flex;gap:6px; }
.notes-block-tools button { padding:7px 10px;font-weight:400; }
.notes-asset-preview { display:flex;align-items:center;gap:12px;margin:12px 0;font-size:14px;color:var(--notes-muted); }
.notes-asset-preview img { max-width:160px;max-height:110px; }
.notes-add { margin:24px 0;padding:14px 0;border:0;display:flex;gap:8px;flex-wrap:wrap; }
.notes-add legend { font-size:16px;font-weight:600;padding:0;margin-bottom:12px; }
.notes-add p { width:100%;font-size:13px;line-height:1.7;color:var(--notes-muted);margin:8px 0 0; }
.notes-upload { position:relative;overflow:hidden; }
.notes-upload input { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:100px; }
.notes-upload:focus-within { outline:2px solid var(--notes-accent);outline-offset:3px; }
.notes-save { display:flex;gap:8px;flex-wrap:wrap;padding:16px 0; }
.notes-recovery { margin:20px 0;padding:14px;background:var(--notes-paper);border:1px solid var(--notes-line);border-radius:6px; }
.notes-recovery p { margin:0 0 10px; }
.notes-recovery button { margin-right:8px; }
.notes-replay { margin:30px 0; }
.notes-replay h2 { font-size:18px;margin:0 0 16px;overflow-wrap:anywhere; }
.notes-replay-grid { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start; }
.notes-board.cg-wrap { position:relative;width:100%;height:auto;aspect-ratio:1; }
.notes-replay-buttons { display:flex;gap:6px;margin:18px 0 12px; }
.notes-replay-buttons button { flex:1;min-width:0;padding:8px; }
.notes-moves { max-height:400px;overflow:auto;overscroll-behavior:contain;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:0 2px 4px; }
.notes-moves button { border:0;min-height:36px;font-size:14px;font-weight:400;padding:6px 9px; }
.notes-moves button[aria-current=true] { background:#32664c;color:#fff; }
.notes-variation { flex-basis:100%;font-size:13px;color:var(--notes-muted);margin:6px 0 0; }
.notes-current-comment { white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 0;font-size:15px;color:var(--notes-ink); }
.notes-pgn-tools { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px; }
@media(max-width:640px) {
 .notes-main { margin-top:24px;padding:0 16px; }
 .notes-heading { flex-direction:column;gap:16px; }
 .notes-heading h1 { font-size:25px; }
 #notes-actions { flex-shrink:1; }
 .notes-replay-grid { grid-template-columns:minmax(0,1fr);gap:12px; }
 .notes-moves { max-height:200px; }
 .notes-moves button { min-height:44px; }
 .notes-block-heading { align-items:flex-start; }
 .notes-block-tools { flex-wrap:wrap;justify-content:flex-end; }
 .notes-content .notes-figure-image { margin-left:0;margin-right:0; }
}