:root{--bg:#f4f1eb;--panel:#fff;--ink:#171717;--muted:#6f6a62;--line:#ded8cf;--accent:#111;--soft:#f8f6f2;--danger:#a12020}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit}.siteHeader{padding:22px 24px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.headerInner{max-width:1300px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{text-decoration:none;font-size:1.3rem;font-weight:900}.nav{display:flex;gap:8px}.nav a{padding:9px 12px;border-radius:9px;text-decoration:none;font-weight:700}.nav a:hover{background:var(--soft)}
main{max-width:1300px;margin:24px auto;padding:0 20px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 35px rgba(0,0,0,.045)}
.drawLayout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}.canvasPanel{padding:14px}.canvasWrap{position:relative;width:100%;aspect-ratio:1/1;background:white;border-radius:12px;overflow:hidden;border:1px solid var(--line);touch-action:none}.canvasWrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.cursorPreview{position:absolute;border:1.5px solid #000;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;display:none;z-index:5}
.controls{padding:20px;position:sticky;top:98px}.controls h1{margin:0 0 8px;font-size:1.5rem}.controls p{color:var(--muted);line-height:1.45}.field{margin:16px 0}.field label{display:block;font-weight:800;margin-bottom:7px}.field input[type=text],.field input[type=number],.field input[type=color],.field input[type=range]{width:100%}.field input[type=text]{padding:11px;border:1px solid var(--line);border-radius:10px;font:inherit}.field input[type=color]{height:48px;border:1px solid var(--line);border-radius:10px;padding:4px;background:white}.field input[type=range]{accent-color:#111}.valueRow{display:flex;justify-content:space-between;gap:10px}.strokeProgress{padding:12px;border-radius:12px;background:var(--soft);font-weight:900}.strokeProgress.ready{background:#eaf6e8;color:#1b6b20}.buttonRow{display:grid;gap:9px;margin-top:18px}.btn{border:0;border-radius:11px;padding:12px 15px;font:inherit;font-weight:900;cursor:pointer;background:#111;color:white}.btn.secondary{background:#eeeae3;color:#111}.btn.danger{background:#fff0f0;color:var(--danger)}.btn:disabled{opacity:.45;cursor:not-allowed}.status{min-height:24px;margin-top:12px;color:var(--muted);font-weight:700}.tip{font-size:.9rem;color:var(--muted)}
.galleryHeader{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}.galleryHeader h1{margin:0}.galleryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.card{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:.18s transform,.18s box-shadow}.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.08)}.thumb{aspect-ratio:1/1;background:white;display:block;width:100%;object-fit:cover}.cardBody{padding:14px}.cardTitle{font-weight:900;font-size:1.05rem}.cardMeta{color:var(--muted);font-size:.9rem;margin-top:5px}.empty{padding:38px;text-align:center;color:var(--muted)}
.replayLayout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}.replayCanvasPanel{padding:14px}.replayControls{padding:20px;position:sticky;top:98px}.replayControls h1{margin:0 0 4px}.meta{color:var(--muted)}.timeline{width:100%;accent-color:#111}.speedGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.speedBtn{padding:9px;border:1px solid var(--line);background:white;border-radius:9px;font-weight:800;cursor:pointer}.speedBtn.active{background:#111;color:white}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.stat{background:var(--soft);border-radius:11px;padding:11px}.stat strong{display:block;font-size:1.05rem}.stat span{font-size:.8rem;color:var(--muted)}
@media(max-width:900px){.drawLayout,.replayLayout{grid-template-columns:1fr}.controls,.replayControls{position:static}.siteHeader{position:static}.headerInner{align-items:flex-start;flex-direction:column}.nav{flex-wrap:wrap}}