:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0}html,body,#app{height:100%;overflow:hidden}#app{display:grid;grid-template-rows:52px 1fr 44px;background:#1a1b1e;color:#e8e6e3}#toolbar{display:flex;align-items:center;gap:12px;padding:0 14px;background:#242529;border-bottom:1px solid #333}.story-title{flex:1;background:transparent;border:none;color:#e8e6e3;font-size:18px;font-weight:600;outline:none}.mode-toggle{padding:7px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;background:#4a90d9;color:#fff}.mode-toggle.play{background:#e0a458;color:#1a1b1e}#workspace{display:grid;grid-template-columns:1fr 220px;min-height:0}#stage-wrap{position:relative;min-width:0}#stage{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;cursor:crosshair}#palette{background:#242529;border-left:1px solid #333;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.palette-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#999}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;background:#2f3036;border:2px solid transparent;border-radius:10px;cursor:pointer;color:#ccc}.palette-item:hover{background:#3a3b42}.palette-item.armed{border-color:#4a90d9;background:#34455c}.palette-emoji{font-size:28px}.palette-name{font-size:10px;text-align:center}.palette-hint{font-size:11px;color:#777;line-height:1.5;margin-top:auto}#pages{display:flex;align-items:center;gap:6px;padding:0 12px;background:#242529;border-top:1px solid #333;overflow-x:auto}.page-tab{padding:5px 14px;border:none;border-radius:6px;background:#2f3036;color:#bbb;font-size:13px;cursor:pointer;white-space:nowrap}.page-tab.active{background:#4a90d9;color:#fff}.page-tab.add{background:transparent;border:1px dashed #555}.palette-scroll{display:flex;flex-direction:column;gap:8px;overflow-y:auto}.palette-img{width:40px;height:40px;object-fit:contain}.artpad-open{padding:9px;border:none;border-radius:8px;background:#4a90d9;color:#fff;font-weight:600;cursor:pointer;margin-bottom:8px}.artpad-open.import{background:#3a3b42;border:1px dashed #666}.hidden-input{display:none}#selbar{position:absolute;display:flex;gap:2px;background:#242529;border:1px solid #444;border-radius:8px;padding:3px;z-index:10;box-shadow:0 4px 14px #0006}#selbar.hidden{display:none}#selbar button{border:none;background:transparent;color:#ddd;font-size:15px;padding:5px 8px;border-radius:6px;cursor:pointer}#selbar button:hover{background:#3a3b42}.artpad-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.artpad-overlay.hidden{display:none}.artpad-card{background:#242529;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;max-width:92vw}.artpad-title{font-weight:700}.artpad-tools{display:flex;gap:6px}.artpad-btn{border:2px solid transparent;background:#2f3036;color:#ddd;border-radius:8px;padding:6px 11px;font-size:14px;cursor:pointer}.artpad-btn.active{border-color:#4a90d9;background:#34455c}.artpad-colors{display:flex;gap:6px;flex-wrap:wrap}.artpad-swatch{width:26px;height:26px;border-radius:50%;border:2px solid #555;cursor:pointer}.artpad-swatch.active{border-color:#fff;transform:scale(1.15)}.artpad-canvas{background:repeating-conic-gradient(#3a3b42,#3a3b42 25%,#2f3036 0%,#2f3036 50%) 0 0 / 20px 20px;border-radius:10px;touch-action:none;cursor:crosshair;max-width:100%}.artpad-actions{display:flex;gap:8px}.artpad-actions input{flex:1;background:#2f3036;border:1px solid #444;border-radius:8px;color:#eee;padding:7px 10px;outline:none}.artpad-actions button{border:none;border-radius:8px;padding:7px 13px;background:#2f3036;color:#ddd;cursor:pointer}.artpad-actions button.primary{background:#4a90d9;color:#fff;font-weight:600}.artpad-head{display:flex;justify-content:space-between;align-items:center}.artpad-head button{border:none;background:#2f3036;color:#ddd;border-radius:8px;padding:5px 10px;cursor:pointer;margin-left:6px}.artpad-card.fullscreen{width:96vw;height:96vh}.artpad-card.fullscreen .artpad-canvas{width:auto;height:100%;max-width:100%;aspect-ratio:1 / 1;margin:0 auto;flex:0 1 auto;min-height:0}.artpad-card{max-height:96vh}.artpad-canvas{width:320px;height:320px}.text-add{padding:7px 14px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;background:#3a3b42;color:#ddd}.textedit-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:110}.textedit-overlay.hidden{display:none}.textedit-card{background:#242529;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;width:min(440px,92vw)}.textedit-card textarea{background:#2f3036;border:1px solid #444;border-radius:8px;color:#eee;padding:10px;font-size:16px;resize:vertical;outline:none;font-family:inherit}.textedit-row{display:flex;gap:6px;flex-wrap:wrap}body{user-select:none;-webkit-user-select:none}input,textarea{user-select:text;-webkit-user-select:text}#scalepop{position:absolute;display:flex;align-items:center;gap:8px;background:#242529;border:1px solid #444;border-radius:8px;padding:6px 10px;z-index:11;box-shadow:0 4px 14px #0006}#scalepop.hidden{display:none}#scalepop input[type=range]{width:140px;accent-color:#4a90d9}.scale-label{font-size:12px;color:#bbb;min-width:40px}.text-add.active{background:#4a90d9;color:#fff}.artpad-swatch.spectrum{position:relative;overflow:hidden;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer}.artpad-swatch.spectrum input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.artpad-swatch.add-color{background:#2f3036;color:#ccc;font-size:15px;line-height:1}.artpad-colors.custom{min-height:26px;align-items:center}.custom-hint{font-size:11px;color:#666;font-style:italic}.tb-group{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.bg-card{max-height:88vh;overflow-y:auto;width:min(460px,94vw)}.bg-spectrum{width:26px;height:26px;border:2px solid #555;border-radius:50%;padding:0;cursor:pointer;background:none}.bg-chip{width:58px;height:38px;border-radius:8px;border:2px solid #555;cursor:pointer}.bg-chip:hover{border-color:#4a90d9}.bg-grid{max-height:200px;overflow-y:auto}#selcount{font-size:11px;color:#7fb3e8;font-weight:700;padding:0 4px;align-self:center}#selcount.hidden{display:none}.palette-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.palette-controls .artpad-open{margin-bottom:0}.palette-search{background:#2f3036;border:1px solid #444;border-radius:8px;color:#eee;padding:7px 10px;font-size:13px;outline:none}.palette-search:focus{border-color:#4a90d9}.cat-header{display:block;width:100%;text-align:left;background:none;border:none;color:#bbb;font-size:12px;font-weight:600;padding:6px;border-radius:6px;cursor:pointer}.cat-header:hover{background:#2f3036;color:#eee}.cat-chevron{font-size:9px;display:inline-block;width:12px}.cat-count{color:#666;font-weight:400;font-size:11px;margin-left:4px}