:root{--bg: #1a1d27;--panel: #232734;--panel2: #2b3040;--line: #353b4d;--text: #e8ebf2;--dim: #9aa3b8;--accent: #6ea8ff}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:PingFang TC,Noto Sans TC,system-ui,sans-serif;background:var(--bg);color:var(--text)}#app{display:flex;height:100vh}#sidebar{width:300px;flex:0 0 300px;background:var(--panel);border-right:1px solid var(--line);padding:18px 16px;overflow-y:auto}#sidebar header h1{margin:0;font-size:22px;letter-spacing:2px}.subtitle{margin:2px 0 0;color:var(--dim);font-size:12px}.panel{margin-top:18px}.field-label{display:block;font-size:12px;color:var(--dim);margin-bottom:8px;letter-spacing:1px}.row{display:flex;align-items:center;gap:8px}.row.between{justify-content:space-between}.mode-toggle{display:flex;gap:6px;margin:14px 0 4px}.mode-btn{flex:1;padding:9px 4px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--dim);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap}.mode-btn.active{background:var(--accent);color:#0c1220;border-color:var(--accent)}.sub-toggle{display:flex;gap:6px;margin:6px 0 4px}.sub-toggle[hidden]{display:none!important}.sub-btn{flex:1;padding:6px 4px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--dim);cursor:pointer;font-size:12px}.sub-btn.active{background:var(--panel2);color:var(--text);border-color:var(--accent)}.shape-pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:280px;overflow-y:auto;padding:2px}.shape-pick{position:relative;height:60px;padding:0;cursor:pointer;background:var(--panel2);border:1px solid var(--line);border-radius:8px;overflow:hidden}.shape-pick:hover{border-color:var(--accent)}.shape-pick.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:#1b2640}.shape-pick.twin{border-color:#c0524f}.shape-pick.twin.active{box-shadow:0 0 0 2px #c0524f inset}.shape-pick-cv{width:100%;height:100%;display:block}.shape-star{position:absolute;top:2px;right:4px;font-size:11px;color:#f2c200;line-height:1}.rot-controls{display:flex;flex-direction:column;gap:7px}.rot-axis{display:flex;align-items:center;gap:8px}.rot-axis>span{flex:0 0 44px;font-size:13px;color:var(--dim)}.rbtn{flex:1;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);cursor:pointer;font-size:18px}.rbtn:hover{border-color:var(--accent)}.rbtn:active{background:var(--accent);color:#0c1220}.btn-wide{flex:1;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);cursor:pointer;font-size:13px}.btn-wide:hover{border-color:var(--accent)}.btn-wide.active-swap{background:var(--accent);color:#0c1220;border-color:var(--accent)}.win-banner{margin-top:12px;padding:12px;border-radius:10px;text-align:center;background:linear-gradient(135deg,#2e7d4f,#3aa76d);color:#fff;font-size:16px;font-weight:700}.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.shape-btn{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);cursor:pointer;font-size:13px;transition:all .12s}.shape-btn .sl{font-size:10px;color:var(--dim);margin-top:2px}.shape-btn:hover{border-color:var(--accent)}.shape-btn.active{background:var(--accent);color:#0c1220;border-color:var(--accent)}.shape-btn.active .sl{color:#0c1220}.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;width:34px;height:30px;cursor:pointer;font-size:16px}.btn:hover{border-color:var(--accent)}#sol-slider{flex:1}.badge{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}.check{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0;color:var(--text);cursor:pointer}.stat-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin:5px 0}.stat-row span{color:var(--dim)}.stat-row b{font-variant-numeric:tabular-nums;color:var(--text)}.stat-row b.accent{color:var(--accent)}#stat-note{margin-top:6px;line-height:1.5}.ref-gray{margin:0;text-align:center}.ref-gray canvas{width:150px;height:110px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}.legend-row{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0}.legend-row.dim{color:var(--dim);font-size:12px;margin-top:8px}.swatch{width:14px;height:14px;border-radius:3px;display:inline-block}.credit{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);color:var(--dim);font-size:11px;line-height:1.6}#stage{flex:1;position:relative;min-width:0}#canvas-host{position:absolute;top:0;right:0;bottom:0;left:0}#canvas-host canvas{display:block;width:100%!important;height:100%!important}#hud{position:absolute;left:16px;bottom:14px;right:16px;background:#141720b8;border:1px solid var(--line);border-radius:10px;padding:10px 14px;line-height:1.6;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mono{font-family:ui-monospace,SF Mono,Menlo,monospace}.small{font-size:12px}#solution-info{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.sol-cell{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 8px}.sol-cell .pos{flex:0 0 18px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#0c1220;border-radius:5px;font-weight:700;font-size:11px}.sol-cell .cube{font-size:15px;font-weight:600;color:var(--text)}.sol-cell .rot{margin-left:auto;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}.warn{color:#ffcf6b}#study-view{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;background:var(--bg)}.study-wrap{max-width:760px;margin:0 auto;padding:30px 34px 50px}.study-wrap h2{margin:0 0 8px;font-size:24px;letter-spacing:2px}.study-lead{color:var(--dim);line-height:1.8;font-size:14px;margin:0 0 20px}.study-lead b{color:var(--text)}.study-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:16px 0}.study-card.harsh{border-color:#5a4a2e;background:#2a2519}.study-card-h{font-size:14px;font-weight:700;margin-bottom:12px}.study-sub{font-weight:400;color:var(--dim);font-size:12px;margin-left:6px}.study-card p{line-height:1.8;font-size:14px;margin:0}.study-card p b{color:var(--text)}.study-note{color:var(--dim);font-size:12px;margin-top:10px!important}.face-canvas-wrap{display:flex;justify-content:center}#faces-canvas{max-width:100%}.study-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.study-stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px}.study-stat-k{color:var(--dim);font-size:12px;line-height:1.4}.study-stat b{font-size:22px;font-variant-numeric:tabular-nums}.accent{color:var(--accent)}.study-table{width:100%;border-collapse:collapse;font-size:13px}.study-table th,.study-table td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--line)}.study-table th{color:var(--dim);font-weight:600;font-size:12px}.study-table th:first-child,.study-table td:first-child,.study-table th:nth-child(2),.study-table td:nth-child(2){text-align:left}.study-table td{font-variant-numeric:tabular-nums}.study-table td.cube{font-weight:700}.study-list{margin:0;padding-left:18px;line-height:1.9;font-size:14px}.study-list b{color:var(--text)}.funnel{display:flex;flex-direction:column;align-items:center;gap:5px;margin:16px 0 10px}.funnel-step{width:var(--w);max-width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-align:center}.funnel-step b{font-size:22px;font-variant-numeric:tabular-nums;display:block;line-height:1.2}.funnel-step span{font-size:12px;color:var(--dim)}.funnel-step.funnel-final{background:linear-gradient(135deg,#2d4a7a,#3a6bb0);border-color:var(--accent)}.funnel-step.funnel-final b{color:#fff}.funnel-step.funnel-final span{color:#dce8ff}.funnel-arrow{font-size:12px;color:var(--dim);text-align:center}.study-split{display:flex;gap:10px;margin:14px 0 6px;flex-wrap:wrap}.study-split-box{flex:1 1 140px;box-sizing:border-box;border-radius:10px;padding:12px 14px;text-align:center;border:1px solid var(--line)}.study-split-box b{font-size:22px;display:block;line-height:1.2;font-variant-numeric:tabular-nums}.study-split-box span{font-size:12px;color:var(--dim)}.study-split-box.ok{background:#16331f;border-color:#2f6b3e}.study-split-box.ok b{color:#7fd39b}.study-split-box.bad{background:#331a1a;border-color:#6b2f2f}.study-split-box.bad b{color:#e89a9a}.preset-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 8px}.preset-item{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--panel2)}.preset-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.preset-head b{font-size:14px}.preset-head code{font-size:12px;color:var(--dim);background:var(--bg);padding:1px 6px;border-radius:5px;font-variant-numeric:tabular-nums}.preset-head code.accent{color:var(--accent)}.preset-tags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 6px}.preset-tags span{font-size:11px;color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}.preset-item p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text)}@media (max-width: 560px){.preset-list{grid-template-columns:1fr}}.shapes-tabs{display:flex;gap:8px;margin:4px 0 10px}.shapes-tab{flex:0 0 auto;width:auto!important;padding:7px 14px;font-size:13px;cursor:pointer;background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:8px}.shapes-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}.shapes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px;margin-top:10px}.shape-cell{position:relative;aspect-ratio:1;background:var(--panel2);border:1px solid var(--line);border-radius:11px;overflow:hidden}.shape-cell{cursor:pointer;transition:border-color .12s,background .12s}.shape-cell:hover{border-color:var(--accent)}.shape-cell.sel{border-color:var(--accent);background:#1b2640;box-shadow:0 0 0 1px var(--accent) inset}.shape-cell.twin{border-color:#c0524f;box-shadow:0 0 0 1px #c0524f inset}.shape-cell.twin.sel{box-shadow:0 0 0 2px #c0524f inset}.shape-canvas{width:100%;height:100%;display:block}.shape-no{position:absolute;top:4px;left:6px;font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}.shapes-3d{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 14px}.shapes-3d-host{width:100%;max-width:300px;height:200px;cursor:grab}.shapes-3d-host:active{cursor:grabbing}.shapes-3d-host canvas{display:block;margin:0 auto;border-radius:12px;background:var(--panel2)}.study-credit{color:var(--dim);font-size:12px;line-height:1.7;margin-top:20px}.study-credit code{background:var(--panel2);padding:1px 5px;border-radius:4px}.study-loading{padding:60px 34px;color:var(--dim);font-size:15px;text-align:center}.study-card.cubeset{border-color:var(--accent)}.cs-tabs{display:flex;gap:6px;margin-bottom:12px}.cs-tab{padding:6px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--dim);cursor:pointer;font-size:13px;font-weight:600}.cs-tab.active{background:var(--accent);color:#0c1220;border-color:var(--accent)}.cs-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;margin-bottom:8px}.cs-row input[type=number]{width:96px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font-size:13px;font-variant-numeric:tabular-nums}.cs-mini{width:auto!important;flex:0 0 auto;padding:6px 10px;font-size:13px}.cs-presets{margin-top:-2px;padding:6px 8px;background:var(--bg);border:1px dashed var(--line);border-radius:8px}.cs-presets>span:first-child{font-weight:600}.cs-arrange{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}.cs-stepper{display:flex;align-items:center;gap:6px;font-size:13px}.cs-stepper>span:first-child{flex:0 0 56px;color:var(--dim)}.cs-arr-n{min-width:70px;text-align:center;font-variant-numeric:tabular-nums}.cs-preview-tabs{display:flex;gap:6px;margin:14px 0 0}.cs-ptab{padding:5px 12px;border:1px solid var(--line);border-radius:7px 7px 0 0;background:var(--panel2);color:var(--dim);cursor:pointer;font-size:12px;font-weight:600}.cs-ptab.active{background:var(--bg);color:var(--accent);border-bottom-color:var(--bg)}.cs-preview{margin:0 0 14px;padding:16px;background:var(--bg);border-radius:0 10px 10px}.cs-cube-label{font-size:18px;font-weight:700;color:var(--accent)}#cs-net[hidden],#cs-3d[hidden]{display:none!important}.cs-net-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 36px;justify-items:center}.cs-net-cell{display:flex;flex-direction:column;align-items:center;gap:8px}.cs-3d-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}.cs-3d-cell{display:flex;flex-direction:column;align-items:center;gap:4px}.cs-3d-canvas-host{width:100%;display:flex;justify-content:center}.cs-3d-canvas-host canvas{display:block;border-radius:8px;cursor:grab}.cs-3d-canvas-host canvas:active{cursor:grabbing}.cs-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.cs-apply{flex:0 0 auto!important;width:auto!important;background:var(--accent);color:#0c1220;border-color:var(--accent);font-weight:600}.cs-actions .btn-wide{width:auto;flex:0 0 auto}.cs-status{margin-left:4px}#set-badge{position:absolute;left:16px;top:14px;z-index:5;background:#141720d1;border:1px solid var(--accent);border-radius:9px;padding:7px 12px;font-size:12px;color:var(--text);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#set-badge b{color:var(--accent)}#set-badge button{margin-left:8px;padding:2px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--text);cursor:pointer;font-size:11px}