:root{--bg: #26292f;--panel: #2e323a;--panel-edge: #3a3f49;--text: #e9ebee;--muted: #9aa3ae;--accent: #4f74e3;--good: #3da06a;--fair: #c9923a;--poor: #c75454;--ink: rgba(30, 63, 165, .92)}*{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:clamp(26px,6.5vw,38px);letter-spacing:.02em;padding:0 44px}.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-shapes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.crop-stage{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px}.crop-stage canvas{display:block;border-radius:8px}.crop-dim{position:absolute;background:#080a0e8c;pointer-events:none}.crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 1px #00000073;cursor:move}.crop-box .handle{position:absolute;width:44px;height:44px;display:grid;place-items:center;touch-action:none;z-index:2}.crop-box .handle:after{content:"";width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 5px #0000008c,0 0 0 2px var(--accent)}.handle.nw{left:-22px;top:-22px;cursor:nwse-resize}.handle.ne{right:-22px;top:-22px;cursor:nesw-resize}.handle.sw{left:-22px;bottom:-22px;cursor:nesw-resize}.handle.se{right:-22px;bottom:-22px;cursor:nwse-resize}.crop-hint{position:absolute;left:50%;bottom:12px;transform:translate(-50%);display:inline-flex;align-items:center;gap:8px;max-width:92%;padding:8px 14px;border-radius:999px;background:#080a0ed1;color:#fff;font-size:13px;line-height:1.2;pointer-events:none;white-space:nowrap}.crop-hint-pinch{font-size:16px;animation:crop-pinch 1.3s ease-in-out infinite}@keyframes crop-pinch{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(.7);opacity:1}}.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}.theme-fab{position:fixed;top:12px;right:12px;z-index:40;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--panel-edge);background:var(--panel);color:var(--text);font-size:18px;cursor:pointer;box-shadow:0 2px 8px #00000040}.theme-fab:hover{border-color:var(--accent)}.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,.markup .preview{max-width:min(680px,100%);max-height:70vh;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:10px}.settings .preview canvas,.confirm .preview canvas,.markup .preview canvas{display:block;max-width:none;border-radius:8px}.preview-fit{display:flex;justify-content:center;max-width:100%}.sheet-zoom{position:relative;padding:0;border:none;background:none;cursor:zoom-in;border-radius:10px;line-height:0}.sheet-zoom canvas{display:block;border-radius:8px}.zoom-badge{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#080a0eb8;color:#fff;font-size:12.5px;line-height:1;pointer-events:none;animation:zoom-pulse 1.6s ease-in-out infinite}.zoom-badge-ico{font-size:14px}@keyframes zoom-pulse{0%,to{transform:scale(1);opacity:.82}50%{transform:scale(1.07);opacity:1}}.zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#06080cdb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px}.zoom-scrollbox{max-width:100%;max-height:80vh;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:10px}.zoom-scrollbox 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}.presets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.sizefields{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.sizefield{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;border:1px solid var(--panel-edge);border-radius:10px;padding:0 12px}.sizefield input{width:56px;background:transparent;color:var(--text);border:none;outline:none;padding:10px 0;font-size:15px;text-align:center;font-variant-numeric:tabular-nums}.size-x{color:var(--muted);font-size:16px}.size-unit{color:var(--muted);font-size:14px}button.btn.chip{padding:8px 14px;font-size:14px}button.btn.chip.sel{border-color:var(--accent);background:#4f74e329}.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-title{max-width:520px;font-size:13px;color:var(--muted);margin-top:2px}.legend{display:flex;flex-wrap:wrap;gap:8px 18px;max-width:520px;font-size:13.5px}.legend-item{display:inline-flex;align-items:center;gap:9px;cursor:default}.legend-guide{color:var(--muted)}.legend-ink{color:var(--accent);font-weight:600}.swatch{width:22px;height:22px;border-radius:3px;flex:none}.swatch-guide{background:#fcfcf8;background-image:linear-gradient(#c7d8e9 1px,transparent 1px),linear-gradient(90deg,#c7d8e9 1px,transparent 1px);background-size:7px 7px;border:1px solid #a7c0da}.swatch-ink{background:linear-gradient(135deg,var(--ink) 0 50%,#fcfcf8 50% 100%);border:1px solid #a7c0da}: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;padding-right:48px}.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-hint{width:min(560px,100%);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:9px 14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 15%,var(--panel));border:1px solid var(--accent);color:var(--text);font-size:13.5px}.swipe-hint-arrows{font-size:17px;color:var(--accent);animation:swipe-nudge 1.3s ease-in-out infinite}@keyframes swipe-nudge{0%,to{transform:translate(-3px)}50%{transform:translate(3px)}}.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)}