:root{--bg: #26292f;--panel: #2e323a;--panel-edge: #3a3f49;--text: #e9ebee;--muted: #9aa3ae;--accent: #4f74e3;--good: #3da06a;--fair: #c9923a;--poor: #c75454}*{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,sans-serif}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}.screen h1{font-size:38px;letter-spacing:.02em}.tagline{font-size:19px;max-width:480px}.note{color:var(--muted);max-width:520px;font-size:14.5px;line-height:1.45}.drop{width:min(440px,100%);border:2px dashed var(--panel-edge);border-radius:14px;padding:34px 22px;cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s}.drop.over,.drop:hover{border-color:var(--accent);background:#4f74e312}.drop b{display:block;color:var(--text);font-size:17px;margin-bottom:6px}.drop input{display:none}.error{color:var(--poor);font-size:14.5px;min-height:1.3em;max-width:440px}.crop-stage{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;overflow:hidden}.crop-stage canvas{display:block}.crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px #0a0c109e;cursor:move}.crop-box .handle{position:absolute;width:22px;height:22px;border:3px solid #fff;background:transparent}.handle.nw{left:-3px;top:-3px;border-right:none;border-bottom:none;cursor:nwse-resize}.handle.ne{right:-3px;top:-3px;border-left:none;border-bottom:none;cursor:nesw-resize}.handle.sw{left:-3px;bottom:-3px;border-right:none;border-top:none;cursor:nesw-resize}.handle.se{right:-3px;bottom:-3px;border-left:none;border-top:none;cursor:nwse-resize}.toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}button.btn{background:var(--panel);color:var(--text);border:1px solid var(--panel-edge);border-radius:10px;padding:11px 18px;font-size:15px;cursor:pointer;min-height:44px}button.btn:hover{border-color:var(--accent)}button.btn.primary{background:var(--accent);border-color:var(--accent);font-weight:600}.suit{display:inline-flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:10px;padding:9px 14px;font-size:14.5px;max-width:min(520px,100%)}.suit .dot{width:11px;height:11px;border-radius:50%;flex:none}.suit.good .dot{background:var(--good)}.suit.fair .dot{background:var(--fair)}.suit.poor .dot{background:var(--poor)}.suit small{color:var(--muted)}.settings .preview,.confirm .preview{max-width:min(680px,100%);max-height:70vh;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:10px}.settings .preview canvas,.confirm .preview canvas{display:block;max-width:none;border-radius:8px}.vars{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.var{background:var(--panel);border:2px solid var(--panel-edge);border-radius:10px;padding:7px 7px 4px;cursor:pointer;font-size:12.5px;color:var(--muted)}.var.sel{border-color:var(--accent);color:var(--text)}.var canvas{display:block;width:88px;height:88px;border-radius:5px}.gridsec{display:flex;flex-direction:column;gap:10px;align-items:center}.media,.presets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}button.btn.chip{padding:8px 14px;font-size:14px}button.btn.chip.sel{border-color:var(--accent);background:#4f74e329}.custom{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;border:1px solid var(--panel-edge);border-radius:10px;padding:0 10px}.custom.sel{border-color:var(--accent);color:var(--text)}.custom input{width:52px;background:transparent;color:var(--text);border:none;outline:none;padding:10px 0;font-size:14.5px;font-variant-numeric:tabular-nums}.warn{color:var(--fair);font-size:14px;max-width:520px}.facts{display:grid;gap:14px;margin:4px 0 6px;max-width:520px;width:100%}.facts>div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}.facts dt{color:var(--muted);font-size:14px}.facts dd{margin:0;font-size:17px;font-weight:600}.facts dd small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}button.btn:disabled{opacity:.45;cursor:default}.lead{max-width:520px;font-size:15.5px;line-height:1.5;color:var(--muted)}.legend{display:flex;flex-wrap:wrap;gap:8px 18px;max-width:520px;font-size:13.5px;color:var(--muted)}.legend-item{display:inline-flex;align-items:center;gap:8px}.swatch{width:16px;height:16px;border-radius:3px;flex:none}.swatch-guide{background:#fcfcf8;border:1.4px solid #a7c0da}.swatch-ink{background:#1e3fa5eb}:root[data-theme=light]{--bg: #f3f0e8;--panel: #ffffff;--panel-edge: #ddd7ca;--text: #23262b;--muted: #6c727a;--accent: #3a5fd0;--good: #2f8a57;--fair: #a9762a;--poor: #bb4444}.screen.player{justify-content:flex-start;gap:14px;padding:16px 16px 40px}.player-bar{width:min(560px,100%);display:flex;align-items:center;justify-content:space-between;gap:10px}.player-count{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.player-toggles{display:inline-flex;gap:8px}.icon-btn{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--panel-edge);background:var(--panel);color:var(--text);font-size:18px;cursor:pointer}.icon-btn.on{border-color:var(--accent);color:var(--accent)}.progress-bar{width:min(560px,100%);height:7px;border-radius:99px;background:var(--panel);border:1px solid var(--panel-edge);overflow:hidden}.progress-bar span{display:block;height:100%;background:var(--accent);transition:width .2s ease}.swipe-area{width:min(560px,100%);touch-action:pan-y}.stepview{display:flex;flex-direction:column;gap:14px}.focus{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:18px 16px}.focus.checkpoint{border-color:var(--fair);background:color-mix(in srgb,var(--fair) 8%,var(--panel))}.glyph{display:block}.step-text{font-size:20px;font-weight:650;line-height:1.35;max-width:460px;font-variant-numeric:tabular-nums}.checkpoint-hint{color:var(--muted);font-size:15px;max-width:460px}.zoom-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--panel-edge);border-radius:10px;background:#fcfcf8}.zoom-scroll canvas{display:block}.progress-map{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px}.progress-map canvas{display:block;border:1px solid var(--panel-edge);border-radius:8px;background:#fcfcf8}.progress-map figcaption{font-size:12.5px;color:var(--muted)}.jump{width:min(560px,100%);display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.jump input[type=range]{width:100%;accent-color:var(--accent);min-height:28px}.toolbar.player-controls{width:min(560px,100%)}.toolbar.player-controls .btn{flex:1}button.btn.warn-btn{border-color:var(--fair);color:var(--fair)}.player .preview{max-width:min(680px,100%);max-height:58vh;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:10px}.player .preview canvas{display:block;max-width:none;border-radius:8px}button.btn.resume{width:min(440px,100%);white-space:normal}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#080a0e99;display:flex;align-items:flex-end;justify-content:center;padding:0}.sheet{width:min(460px,100%);background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px 16px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;text-align:center}.sheet h2{font-size:20px}.sheet-hint{color:var(--muted);font-size:15px;line-height:1.5}button.btn.block{width:100%;justify-content:center}button.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.stepper{display:flex;align-items:center;justify-content:center;gap:16px}.stepper-val{min-width:120px;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.stepper-val small{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}