:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#d5dbe5;--surface:#ffffffe6;--surface-strong:#fff;--text:#18202f;--muted:#667085;--line:#18202f1f;--primary:#2f6feb;--primary-weak:#2f6feb1f;--mode-selected:#10936f;--danger:#e6483d;--glass-panel:#fffffff5;--glass-panel-light:#fffffff5;--glass-panel-faint:#ffffff1a;--glass-button:#fffffff5;--glass-selected:#2f6feb9e;--shadow:0 18px 48px #18202f29;font-family:Inter,Segoe UI,Microsoft YaHei,PingFang SC,Noto Sans CJK SC,sans-serif}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#12151b;--surface:#1c2029e6;--surface-strong:#202530;--text:#eef2f8;--muted:#aab4c5;--line:#eef2f824;--primary-weak:#4888ff2e;--mode-selected:#14b88a;--glass-panel:#202530f5;--glass-panel-light:#202530f5;--glass-panel-faint:#2025301a;--glass-button:#202530f5;--glass-selected:#4888ff94;--shadow:0 18px 48px #0000005c}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;min-height:100%}body{background:radial-gradient(circle at 20% 18%, #18a35d24, transparent 28%), radial-gradient(circle at 86% 20%, #ffd84d2e, transparent 24%), linear-gradient(180deg, #e1e6ee, var(--bg));color:var(--text);margin:0;overflow:hidden}button,input,textarea{font:inherit;letter-spacing:0}button{border:0}textarea,input[type=text],.script-row input{border:1px solid var(--line);background:var(--surface-strong);width:100%;color:var(--text);border-radius:8px;outline:none;padding:12px}textarea{resize:vertical;min-height:96px}.app-shell{-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:100%;position:relative}.viewport{width:100%;height:100%}.viewport canvas{display:block}.floating-menu,.score-pill,.key-pill{z-index:5;background:var(--surface);height:48px;color:var(--text);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:8px;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:fixed}.floating-menu{cursor:pointer;width:48px;top:18px;right:max(18px,50vw - 380px)}.score-pill{color:var(--primary);padding:0 16px;font-weight:800;top:18px;left:max(18px,50vw - 380px)}.clickable{cursor:pointer}.key-pill{min-width:54px;font-size:28px;font-weight:900;bottom:134px;left:50%;transform:translate(-50%)}.bottom-panel{z-index:4;border:1px solid var(--line);background:var(--glass-panel);width:min(760px,100vw - 24px);min-height:76px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);border-radius:8px;padding:8px;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.bottom-panel.medium{min-height:132px}.bottom-panel.tall{min-height:178px}.toolbar,.primary-toolbar{justify-content:center;align-items:center;gap:8px;display:flex}.primary-toolbar{height:54px}.icon-button,.mode-nav button,.settings-tabs button,.settings-reset,.button-grid button,.modal-actions button,.color-grid button,.alg-grid button{min-width:0;color:var(--text);cursor:pointer;background:0 0;border-radius:8px;transition:background .12s,color .12s,transform .12s,box-shadow .12s}.icon-button{justify-content:center;align-items:center;width:46px;height:46px;display:inline-flex}.icon-button svg,.floating-menu svg{width:22px;height:22px}.icon-button:hover:not(:disabled),.floating-menu:hover,.settings-tabs button:hover,.settings-reset:hover,.mode-nav button:hover,.button-grid button:hover,.modal-actions button:hover,.alg-grid button:hover{background:var(--primary-weak);color:var(--primary)}.icon-button:active:not(:disabled),.floating-menu:active{transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.42}.selected,.active{background:var(--primary)!important;color:#fff!important}.danger{color:var(--danger)!important}.danger:hover:not(:disabled){background:#e6483d1f!important}.modal-backdrop{z-index:20;background:#1016216b;place-items:start center;padding:10px;display:grid;position:fixed;inset:0}.modal-backdrop.preview-backdrop{background:#1016211f}.modal{border:1px solid var(--line);background:var(--surface-strong);width:min(760px,100%);max-height:calc(100vh - 20px);color:var(--text);box-shadow:var(--shadow);border-radius:8px;margin-top:10px;padding:10px;overflow:auto}.settings-modal{flex-direction:column;width:min(760px,100vw - 32px);height:min(620px,100vh - 20px);display:flex;overflow:hidden}.settings-modal.live-preview{background:var(--glass-panel-light);-webkit-backdrop-filter:blur(8px)}.settings-modal.scrubbing-preview{opacity:.5;background:var(--glass-panel-faint);box-shadow:0 12px 36px #18202f14}.modal header{z-index:3;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line);background:0 0;flex:none;justify-content:space-between;align-items:center;gap:12px;margin:-10px -10px 8px;padding:8px 10px;display:flex}.modal header strong{font-size:16px}.modal header .icon-button{width:36px;height:36px}.modal header .icon-button svg{width:20px;height:20px}.modal label{color:var(--muted);gap:8px;margin:12px 0;font-weight:700;display:grid}.modal-actions{justify-content:flex-end;gap:10px;margin-top:14px;display:flex}.modal-actions button,.button-grid button,.mode-nav button,.settings-reset,.settings-help{border:1px solid var(--line);min-height:36px;padding:0 10px}.mode-nav,.settings-tabs-row,.settings-tabs,.button-grid,.toggle-grid,.switch-grid,.palette-grid,.control-stack{gap:8px;display:grid}.mode-nav{border:1px solid var(--line);background:#66708514;border-radius:8px;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px;padding:4px}.mode-nav button{border-color:#0000;min-height:32px}.mode-nav .selected{box-shadow:0 8px 18px #10936f4d;background:var(--mode-selected)!important;color:#fff!important}.settings-tabs-row{grid-template-columns:1fr;align-items:stretch;gap:8px;margin-bottom:8px}.settings-tabs{grid-template-columns:repeat(3,1fr);margin-bottom:0}.settings-tabs.compact{grid-template-columns:repeat(3,1fr)}.settings-tabs button{border:1px solid var(--line);justify-content:center;align-items:center;gap:5px;min-height:40px;display:inline-flex}.settings-tabs svg,.settings-reset svg{width:16px}.settings-reset{border-radius:8px;justify-content:center;align-items:center;gap:6px;min-width:48px;display:inline-flex}.settings-chrome{z-index:2;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line);background:0 0;flex:none;margin:0 -10px 8px;padding:0 10px 8px}.settings-content{flex:auto;min-height:0;padding:0 2px 2px 0;overflow:auto}.settings-modal.live-preview .mode-nav button,.settings-modal.live-preview .settings-tabs button,.settings-modal.live-preview .settings-reset,.settings-modal.live-preview .button-grid button,.settings-modal.live-preview .toggle-grid button{background:var(--glass-button);-webkit-backdrop-filter:blur(6px)}.settings-modal.live-preview .selected,.settings-modal.live-preview .active{background:var(--primary)!important;color:#fff!important}.settings-modal.live-preview .mode-nav .selected{background:var(--mode-selected)!important;color:#fff!important}.button-grid,.toggle-grid,.color-grid{grid-template-columns:repeat(3,1fr)}.toggle-grid button{border:1px solid var(--line);min-height:48px;color:var(--text);cursor:pointer;background:0 0;border-radius:8px;font-weight:800}.toggle-grid button:hover{background:var(--primary-weak);color:var(--primary)}.switch-row,.range-row{grid-template-columns:72px 1fr 36px;align-items:center;gap:8px;min-height:34px;margin:2px 0;display:grid}.switch-row{grid-template-columns:1fr auto;padding:8px 0}.range-row input{width:100%;accent-color:var(--primary)}.control-stack{gap:4px}.range-row b{text-align:right;color:var(--muted);font-size:13px}.modal .range-row{gap:8px;margin:2px 0}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.palette-card{border:1px solid var(--line);background:var(--glass-button);border-radius:8px;grid-template-columns:34px 1fr;align-items:center;min-height:48px;padding:6px 8px;font-weight:800;color:var(--text)!important;gap:8px!important;margin:0!important;display:grid!important}.modal .palette-card{gap:8px;margin:0!important}.palette-grid input[type=color]{border:1px solid var(--line);background:0 0;border-radius:8px;width:34px;height:34px;padding:1px}.palette-reset{cursor:pointer;grid-template-columns:1fr;justify-items:center}.help-modal{flex-direction:column;width:min(920px,100vw - 20px);max-width:calc(100vw - 20px);height:min(760px,100dvh - 56px,100vh - 56px);max-height:min(760px,100dvh - 56px,100vh - 56px);display:flex;overflow:hidden}.help-modal-body{flex:auto;min-height:0;padding:0 2px 0 0;overflow:hidden auto}.danger-zone{border-top:1px solid var(--line);background:var(--surface-strong);justify-content:flex-end;margin-top:24px;padding:12px 0 2px;display:flex;position:sticky;bottom:0}.option-group{gap:10px;margin:0 0 16px;display:grid}.option-group strong{font-size:15px}.playbar{gap:8px;display:grid}.playbar input[type=range]{width:100%;accent-color:var(--primary)}.script-row{grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px;display:grid}.color-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.color-grid button{border:1px solid var(--line);justify-content:center;align-items:center;gap:6px;min-height:46px;font-weight:800;display:inline-flex}.color-grid button:nth-last-child(-n+3){background:var(--surface-strong)}.alg-layout{gap:10px;display:grid}.alg-modal{flex-direction:column;height:min(720px,100dvh - 56px,100vh - 56px);max-height:min(720px,100dvh - 56px,100vh - 56px);display:flex;overflow:hidden}.alg-modal .alg-layout{flex:auto;grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden}.alg-modal .settings-tabs{z-index:2;background:var(--surface-strong);position:sticky;top:0}.alg-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;min-height:0;padding-right:2px;display:grid;overflow:hidden auto}.alg-grid button{border:1px solid var(--line);text-align:left;gap:8px;min-height:96px;padding:12px;display:grid}.alg-grid span{color:var(--muted);word-break:break-word;font-size:13px}.document-shell{background:var(--bg);width:100%;height:100%;overflow:auto}.help-page,.help{overflow-wrap:anywhere;width:min(920px,100% - 32px);max-width:100%;margin:0 auto;padding:72px 0;line-height:1.75}.compact-help{width:100%;padding:0}.help-page h1,.help h1{margin:0 0 16px;font-size:clamp(32px,6vw,56px)}.help h1{font-size:28px}.help-page h2,.help h2{margin:26px 0 8px}.help-page p,.help p{margin:0 0 12px}.help-page ul,.help ul{margin:8px 0 18px;padding-left:22px}.help-page li,.help li{margin:6px 0}.help-page code,.help code{border:1px solid var(--line);background:var(--surface-strong);color:var(--primary);border-radius:6px;padding:1px 6px;font-weight:800}.help-lead{max-width:760px;color:var(--muted);font-size:18px}.help-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 20px;display:grid}.help-card,.help-mode-item{border:1px solid var(--line);background:var(--surface);border-radius:8px}.help-card{padding:14px}.help-card strong,.help-mode-item strong{line-height:1.35;display:block}.help-card p,.help-mode-item p{color:var(--muted);margin:6px 0 0}.help-mode-list{gap:8px;margin:12px 0 20px;display:grid}.help-mode-item{grid-template-columns:64px 1fr;align-items:start;gap:12px;padding:12px;display:grid}.help-mode-item b{background:var(--mode-selected);color:#fff;border-radius:8px;place-items:center;min-height:42px;display:grid}.key-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;display:grid}.key-grid span{border:1px solid var(--line);background:var(--surface-strong);border-radius:8px;padding:8px 10px;font-weight:700}.key-table{gap:8px;max-width:100%;margin-top:10px;display:grid}.key-row{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;min-width:0;display:grid}.key-row:last-child{grid-template-columns:repeat(4,minmax(0,1fr))}.key-row span{border:1px solid var(--line);background:var(--surface-strong);border-radius:8px;place-items:center;min-width:0;min-height:48px;padding:5px 2px;display:grid}.key-row b{font-size:15px}.key-row small{color:var(--muted);font-weight:700}@media (width<=640px){.modal-backdrop{padding:8px}.help-modal{width:calc(100vw - 16px);max-width:calc(100vw - 16px);height:min(680px,100dvh - 72px,100vh - 72px);max-height:min(680px,100dvh - 72px,100vh - 72px)}.alg-modal{width:calc(100vw - 16px);max-width:calc(100vw - 16px);height:min(640px,100dvh - 72px,100vh - 72px);max-height:min(640px,100dvh - 72px,100vh - 72px)}.bottom-panel{width:calc(100vw - 16px);padding:8px;bottom:8px}.icon-button{width:44px;height:44px}.settings-tabs{grid-template-columns:repeat(3,1fr)}.help{width:100%}.key-row{gap:3px}.key-row span{min-height:38px;padding:4px 1px}.key-row b{font-size:12px}.key-row small{font-size:10px}.button-grid,.palette-grid{grid-template-columns:repeat(2,1fr)}.help-grid,.help-mode-item{grid-template-columns:1fr}.floating-menu,.score-pill{top:10px}}