:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;--ink: #061321;--ink-soft: #0b1b2b;--ink-elevated: #102237;--paper: #f4f0e8;--paper-deep: #eae3d8;--text: #1b2631;--muted: #69737c;--paper-rule: #9b857a;--wine: #94192c;--wine-bright: #b02c3c;--cream: #f6eee1;--hairline: rgba(205, 183, 163, .55)}*{box-sizing:border-box}html{min-width:320px;background:var(--ink)}body{margin:0;min-width:320px;min-height:100vh;background:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button,select,input{font:inherit}button,a,select,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #e3a8ad;outline-offset:3px}.app-shell{min-height:100svh;background:var(--ink);color:var(--cream)}.site-header{height:64px;display:grid;grid-template-columns:minmax(300px,1fr) auto minmax(max-content,1fr);align-items:center;gap:28px;padding:0 32px;border-bottom:1px solid var(--hairline);background:#04101d}.site-title{color:var(--cream);font:400 clamp(25px,2.2vw,37px) / 1 Georgia,"Times New Roman",serif;letter-spacing:-.025em;text-decoration:none}.site-rights{display:flex;align-items:center;justify-self:center;gap:13px;color:#f6eee18a;font:500 10px/1.35 ui-sans-serif,system-ui,sans-serif}.site-rights p{max-width:190px;margin:0;text-align:right}.site-rights a{display:inline-flex;align-items:center;gap:4px;color:#d9bcb0;font-size:11px;text-decoration:none;white-space:nowrap}.site-rights a:hover{color:var(--cream)}.site-nav{display:flex;align-items:center;justify-self:end;gap:28px}.site-nav a,.tutorial-trigger{padding:10px 0;border:0;border-bottom:1px solid transparent;color:#f6eee1c7;background:transparent;font:500 14px/1.2 ui-sans-serif,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.site-nav a:hover,.site-nav a.is-active{color:var(--cream);border-bottom-color:currentColor}.tutorial-trigger{min-height:40px;padding:0 15px!important;border:1px solid #8f796c!important;border-radius:4px;color:var(--cream)!important}.tutorial-trigger:hover{border-color:#d15362!important;background:var(--wine)}.page-loading{min-height:100svh;display:grid;place-items:center;color:#f6eee1bd;background:var(--ink);font:italic 16px/1.4 Georgia,Times New Roman,serif}.workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(460px,.92fr);height:calc(100svh - 254px);min-height:660px}.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;border:1px solid #8f796c;border-radius:5px;color:var(--cream);background:transparent;font-size:14px;font-weight:590;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease,opacity .16s ease}.button:hover:not(:disabled){border-color:#c8a799;background:#ffffff0b}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{cursor:not-allowed;opacity:.42}.button-primary{border-color:#d15362;background:var(--wine)}.button-primary:hover:not(:disabled){border-color:#ed6a79;background:#a41e31}.cube-stage{position:relative;min-width:0;overflow:hidden;background:var(--ink);border-right:1px solid var(--hairline)}.cube-loading{display:grid;place-items:center;min-height:100%;color:#f6eee1b3;background:var(--ink);font:italic 15px/1.4 Georgia,Times New Roman,serif}.stage-toolbar{position:absolute;z-index:4;top:20px;left:30px;display:flex;gap:12px}.cube-canvas{position:absolute;inset:66px 0 78px}.cube-canvas canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.cube-canvas canvas:active{cursor:grabbing}.stage-lower{position:absolute;z-index:4;left:30px;right:30px;bottom:45px;display:flex;align-items:center;justify-content:space-between;gap:24px}.orbit-hint{display:inline-flex;align-items:center;gap:9px;color:#f6eee1c7;font-size:13px}.turn-controls{display:flex;gap:8px}.turn-button{width:42px;height:42px;border:1px solid #8f796c;border-radius:5px;color:var(--cream);background:#05101cb8;font:650 15px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:background .15s ease,border-color .15s ease}.turn-button:hover:not(:disabled){background:var(--wine);border-color:#d15362}.turn-button:disabled{opacity:.42;cursor:not-allowed}.scramble-line{position:absolute;z-index:4;left:30px;right:30px;bottom:12px;margin:0;display:flex;gap:12px;color:#f6eee1a3;font:500 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scramble-line span{color:#cfaab0;font-family:ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.09em}.reading-panel{min-width:0;padding:27px 32px 25px;overflow:auto;color:var(--text);background:var(--paper)}.reading-panel h2,.reading-panel h3{font-family:Georgia,Times New Roman,serif;font-weight:500}.reading-panel h2{margin:0 0 18px;color:#681322;font-size:clamp(25px,2.25vw,34px);line-height:1;letter-spacing:-.025em}.reading-panel h3{margin:0 0 10px;font-size:15px;line-height:1.2}.reading-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.reading-controls label{display:grid;gap:7px;color:#121b25;font-size:12px;font-weight:600}.reading-controls select{width:100%;min-height:45px;padding:0 36px 0 12px;border:1px solid #8d5d61;border-radius:4px;color:var(--text);background:#ffffff47;font-size:14px;cursor:pointer}.reading-rule{height:1px;margin:19px 0 20px;background:var(--paper-rule);opacity:.72}.grid-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.face-grid{--grid-rule: rgba(255, 255, 255, .76);position:relative;display:grid;grid-template-columns:repeat(3,1fr);aspect-ratio:1;border:1px solid #6e3036;border-radius:5px;overflow:hidden;background:var(--paper-deep)}.face-cell{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px;border-right:1px solid var(--grid-rule);border-bottom:1px solid var(--grid-rule);color:var(--sticker-text);background:var(--sticker-color);text-align:center}.face-cell:nth-child(3n){border-right:0}.face-cell:nth-child(n+7){border-bottom:0}.face-cell strong{max-width:100%;font:600 clamp(13px,1.3vw,20px) / 1 Georgia,"Times New Roman",serif;overflow-wrap:anywhere}.face-cell small{max-width:100%;font-size:8px;line-height:1.1;opacity:.75}.face-grid-diagram{--grid-rule: rgba(88, 68, 60, .34);color:#641322}.face-grid-diagram .face-cell{color:var(--text);background:#ffffff38}.face-grid-diagram .face-cell:not(.is-path){opacity:.46}.path-number{position:absolute;z-index:4;top:5px;left:6px;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;color:#fff7eb;background:var(--wine);font-size:9px;font-weight:750}.path-overlay{position:absolute;z-index:3;inset:0;width:100%;height:100%;color:var(--wine);pointer-events:none}.path-overlay line{stroke:currentColor;stroke-width:1.5}.reading-output{display:grid;gap:11px;margin-top:18px}.reading-output section h3{margin-bottom:6px;color:#681322;font-size:17px}.output-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.output-heading span{color:var(--muted);font-size:10px;white-space:nowrap}.restriction-text,.realization-text{min-height:42px;margin:0;display:flex;align-items:center;padding:8px 11px;border:1px solid #9b766f;border-radius:4px;background:#ffffff42;font:500 14px/1.4 Georgia,Times New Roman,serif}.realization-text strong{margin-right:4px;color:#7c1626;font-size:17px}.transport{position:relative;min-height:190px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;padding:15px 32px 43px;border-top:1px solid var(--hairline);color:var(--cream);background:#04101d}.progression-block{min-width:0}.progression-block h2{margin:0 0 10px;font:500 14px/1.2 Georgia,Times New Roman,serif}.progression-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.progression-heading h2{margin-bottom:0}.diagram-trigger{display:inline-flex;align-items:center;gap:7px;padding:5px 0;border:0;color:#d8b8aa;background:transparent;font-size:11px;font-weight:650;cursor:pointer}.diagram-trigger:hover:not(:disabled){color:#fff1e4}.diagram-trigger:disabled{opacity:.35;cursor:not-allowed}.diagram-trigger svg{width:17px;height:17px}.progression-list{min-width:0;margin:0;padding:0 2px 5px;display:flex;gap:0;overflow-x:auto;list-style:none;scrollbar-color:#6c3540 transparent}.progression-list li{position:relative;flex:0 0 auto;min-width:128px;display:grid;gap:3px;padding:13px 23px 0 0;opacity:.78;transition:opacity .15s ease,color .15s ease}.progression-list li:not(:last-child):after{content:"—";position:absolute;top:24px;right:8px;color:#9f7d70}.progression-list li.is-active{color:#ffccd2;opacity:1}.progression-list strong{font:500 25px/1 Georgia,Times New Roman,serif}.progression-list small{color:#cba99b;font:500 12px/1.2 Georgia,Times New Roman,serif}.sequence-number{position:absolute;top:-2px;left:0;width:19px;height:19px;display:grid;place-items:center;border:1px solid #c43b4a;border-radius:50%;color:#fff4e9;background:var(--wine);font-size:9px}.empty-progression{margin:20px 0 0;color:#f6eee1a3;font:italic 14px/1.4 Georgia,Times New Roman,serif}.transport-controls{min-width:0;padding-left:24px;border-left:1px solid var(--hairline)}.transport-row{display:flex;align-items:center;gap:16px}.play-button{min-width:142px}.time-readout{color:#f6eee1b8;font:500 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.progress-track{height:3px;margin:15px 0 18px;overflow:hidden;background:#6f655d}.progress-track span{display:block;height:100%;background:var(--wine-bright);transition:width .1s linear}.transport-settings{justify-content:space-between}.volume-control{display:flex;align-items:center;gap:8px;color:#f6eee1d1}.volume-control svg{width:18px;flex:0 0 auto}.volume-control input{width:72px;accent-color:var(--wine-bright);cursor:pointer}.tempo-control{display:flex;align-items:center;gap:7px;color:#f6eee1b3;font-size:10px}.tempo-control input{width:58px;height:38px;border:1px solid #8f796c;border-radius:4px;color:var(--cream);background:transparent;text-align:center;font-size:13px}.export-button{min-height:38px;padding:0 12px;font-size:12px}.system-thesis{position:absolute;left:32px;right:32px;bottom:8px;margin:0;display:grid;grid-template-columns:minmax(20px,1fr) auto minmax(20px,1fr);align-items:center;gap:16px;color:#d9c7b7;text-align:center}.system-thesis span{height:1px;background:#786e65}.system-thesis em{font:italic 13px/1 Georgia,Times New Roman,serif}@media(max-width:1120px){.workspace{grid-template-columns:minmax(0,1fr) minmax(430px,.95fr)}.reading-panel{padding-inline:24px}.grid-comparison{gap:14px}.transport{grid-template-columns:minmax(0,1fr) 330px}}@media(max-width:900px){.site-header{gap:18px;padding-inline:24px}.site-rights p{max-width:150px}.workspace{display:block;height:auto;min-height:0}.cube-stage{min-height:680px;border-right:0;border-bottom:1px solid var(--hairline)}.reading-panel{overflow:visible;padding:32px 42px 38px}.face-cell strong{font-size:clamp(14px,3.8vw,24px)}.transport{grid-template-columns:1fr;gap:22px;padding:24px 42px 52px}.transport-controls{padding:20px 0 0;border-top:1px solid var(--hairline);border-left:0}.system-thesis{left:42px;right:42px;bottom:14px}}@media(max-width:600px){.site-header{height:auto;min-height:88px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;padding-block:10px;padding-inline:18px}.site-title{grid-column:1;grid-row:1;max-width:280px;font-size:21px;line-height:1.05}.site-rights{grid-column:1;grid-row:2;justify-self:start;gap:8px;font-size:9px}.site-rights p{max-width:205px;text-align:left}.site-rights a{font-size:10px}.site-nav{grid-column:2;grid-row:1 / 3;align-self:center;gap:12px}.site-nav a{display:none}.site-nav a.is-active{display:inline-flex;font-size:12px}.tutorial-trigger{min-height:36px;padding-inline:11px!important;font-size:12px}.cube-stage{min-height:610px}.stage-toolbar{top:16px;left:16px;right:16px;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:8px}.stage-toolbar .button{min-width:0;min-height:43px;padding-inline:8px;gap:6px;font-size:12px}.stage-toolbar .button svg{width:17px}.cube-canvas{inset:65px 0 112px}.stage-lower{left:16px;right:16px;bottom:47px;flex-direction:column;gap:12px}.orbit-hint{font-size:12px}.turn-controls{width:100%;justify-content:center}.turn-button{width:min(13vw,48px);height:42px}.scramble-line{left:16px;right:16px}.reading-panel{padding:29px 18px 34px}.reading-panel h2{font-size:28px}.reading-controls{gap:8px}.reading-controls label{gap:5px;font-size:10px}.reading-controls select{min-height:42px;padding-inline:8px 22px;font-size:12px}.grid-comparison{gap:10px}.grid-comparison h3{min-height:30px;margin-bottom:7px;font-size:13px}.face-cell{padding:3px}.face-cell strong{font-size:clamp(11px,3.6vw,17px)}.face-cell small{display:none}.path-number{top:3px;left:3px;width:16px;height:16px;font-size:8px}.output-heading{display:block}.output-heading span{display:block;margin:-3px 0 6px}.restriction-text,.realization-text{font-size:12px}.transport{padding:22px 18px 58px}.progression-list li{min-width:112px}.progression-list strong{font-size:22px}.transport-row{justify-content:space-between}.volume-control input{width:88px}.play-button{min-width:132px}.system-thesis{left:18px;right:18px;gap:10px}.system-thesis em{max-width:280px;font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}