@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color:#14171c;font-synthesis:none;text-rendering:optimizelegibility;--ink:#14171c;--paper:#f1eee5;--panel:#1a1e26;--acid:#f0523c;--blue:#526fe8;--yellow:#f1c644;--line:#14171c2e;--mono:"DM Mono", monospace;--display:"Space Grotesk", sans-serif;background:#f1eee5;font-family:Manrope,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:var(--paper)}button,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.app-shell{flex-direction:column;min-height:100svh;display:flex;overflow:hidden}.app-header{height:72px;color:var(--paper);background:#11151c;border-bottom:1px solid #ffffff2e;flex:0 0 72px;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;display:grid}.brand{color:inherit;font:700 14px/1 var(--display);letter-spacing:.15em;background:0 0;border:0;justify-self:start;align-items:center;gap:11px;padding:0;display:flex}.brand-mark{grid-template-columns:repeat(2,1fr);gap:2px;width:23px;height:23px;display:grid;transform:rotate(-9deg)}.brand-mark i{background:currentColor}.brand-mark i:nth-child(3){grid-column:2}.workspace-tabs{height:100%;display:flex}.workspace-tabs button{color:#ffffff8a;min-width:132px;font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;background:0 0;border:0;border-left:1px solid #ffffff1f;justify-content:center;align-items:center;gap:8px;padding:0 18px;display:flex;position:relative}.workspace-tabs button:last-child{border-right:1px solid #ffffff1f}.workspace-tabs button svg{width:16px}.workspace-tabs button.active{color:#fff;background:#ffffff0d}.workspace-tabs button.active:after{content:"";background:var(--acid);height:3px;position:absolute;bottom:0;left:18px;right:18px}.cube-status{font:400 9px var(--mono);letter-spacing:.08em;justify-self:end}.cube-status i{background:var(--yellow);border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block;box-shadow:0 0 0 4px #f1c6441f}.cube-status.solved i{background:#63d47a;box-shadow:0 0 0 4px #63d47a1f}.workspace{background:var(--ink);grid-template-columns:minmax(0,1.58fr) minmax(390px,.82fr);height:calc(100svh - 72px);min-height:650px;display:grid}.cube-workbench{border-right:1px solid var(--ink);background-color:#dfdbd0;background-image:radial-gradient(circle at 50% 43%,#fffffff2,#0000 44%),linear-gradient(#14171c0f 1px,#0000 1px),linear-gradient(90deg,#14171c0f 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:auto,46px 46px,46px 46px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;min-width:0;min-height:0;position:relative;overflow:hidden}.cube-workbench:after{content:"TWISTLAB / OBJECT 001";font:400 8px var(--mono);letter-spacing:.13em;opacity:.42;pointer-events:none;position:absolute;top:50%;left:-48px;transform:rotate(-90deg)}.cube-scene{cursor:grab;animation:1.1s cubic-bezier(.16,1,.3,1) both cubeArrival;position:absolute;inset:35px 0 88px}.cube-scene:active{cursor:grabbing}.workbench-meta{z-index:3;font:400 8px var(--mono);letter-spacing:.1em;pointer-events:none;justify-content:space-between;display:flex;position:absolute;top:23px;left:28px;right:28px}.workbench-meta i{background:#63d47a;border-radius:50%;width:6px;height:6px;margin-right:7px;display:inline-block}.turn-readout{z-index:3;pointer-events:none;justify-items:end;display:grid;position:absolute;bottom:102px;right:28px}.turn-readout span{font:400 8px var(--mono);letter-spacing:.1em}.turn-readout strong{font:500 clamp(54px, 7vw, 104px)/.8 var(--display);letter-spacing:-.08em}.turn-readout small{font:400 9px var(--mono)}.cube-history{z-index:4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f1eee5d1;border-top:1px solid #14171c33;align-items:center;gap:16px;height:36px;padding:0 20px;display:flex;position:absolute;bottom:52px;left:0;right:0}.cube-history>span{font:500 9px var(--mono);align-items:center;gap:6px;display:flex}.cube-history svg{width:14px}.cube-history div{gap:5px;display:flex;overflow:hidden}.cube-history i{border:1px solid var(--line);min-width:26px;height:23px;font:normal 400 8px var(--mono);place-items:center;display:grid}.cube-transport{z-index:4;background:var(--ink);color:#fff;grid-template-columns:52px 52px 52px 1fr 1fr;height:52px;display:grid;position:absolute;bottom:0;left:0;right:0}.cube-transport button{font:400 9px var(--mono);text-transform:uppercase;background:0 0;border:0;border-right:1px solid #ffffff29;justify-content:center;align-items:center;gap:8px;display:flex}.cube-transport button:hover:not(:disabled){background:var(--acid)}.cube-transport svg{width:16px}.workspace-panel{background:var(--panel);min-width:0;min-height:0;color:var(--paper);scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;overflow:hidden auto}.workspace-solve .workspace-panel{background:var(--acid)}.workspace-learn .workspace-panel{background:var(--blue)}.panel-view{min-height:100%;padding:29px;animation:.55s cubic-bezier(.16,1,.3,1) panelIn}.panel-title{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px;display:flex}.panel-title>svg{opacity:.72;width:30px;height:30px}.panel-title span{font:400 8px var(--mono);letter-spacing:.12em;margin-bottom:9px;display:block}.panel-title h1{font:500 clamp(31px, 3vw, 48px)/.95 var(--display);letter-spacing:-.055em;margin:0}.panel-lede{opacity:.68;max-width:510px;margin:0 0 26px;font-size:12px;line-height:1.65}.primary-action,.secondary-action{text-transform:uppercase;width:100%;min-height:54px;font:500 9px var(--mono);letter-spacing:.08em;border:0;justify-content:center;align-items:center;gap:9px;display:flex}.primary-action{background:var(--acid);color:#fff}.workspace-solve .primary-action,.workspace-learn .primary-action{color:var(--ink);background:#fff}.secondary-action{color:#fff;background:0 0;border:1px solid #ffffff4d;margin-top:8px}.primary-action:hover:not(:disabled),.secondary-action:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.primary-action svg,.secondary-action svg{width:17px}.inline-error{color:#ffd2c8;font:400 9px/1.5 var(--mono);margin:8px 0}.algorithm-editor{border:1px solid #ffffff38;margin-bottom:10px;display:block}.algorithm-editor span{font:400 8px var(--mono);letter-spacing:.1em;opacity:.55;border-bottom:1px solid #ffffff29;padding:12px 14px;display:block}.algorithm-editor textarea{resize:none;color:#fff;width:100%;height:96px;font:400 20px/1.45 var(--mono);background:0 0;border:0;outline:0;padding:15px;display:block}.move-tabs{border:1px solid #fff3;grid-template-columns:repeat(4,1fr);margin-top:22px;display:grid}.move-tabs button{color:#ffffff85;height:39px;font:400 8px var(--mono);text-transform:uppercase;background:0 0;border:0;border-right:1px solid #ffffff26}.move-tabs button:last-child{border-right:0}.move-tabs button.active{background:var(--paper);color:var(--ink)}.move-grid{border-left:1px solid #fff3;grid-template-columns:repeat(3,1fr);max-height:235px;display:grid;overflow-y:auto}.move-grid button{color:#fff;text-align:left;background:0 0;border:1px solid #fff3;border-top:0;border-left:0;align-content:center;gap:4px;min-height:70px;padding:9px;display:grid}.move-grid button:hover:not(:disabled){background:var(--blue)}.move-grid strong{font:500 18px var(--mono)}.move-grid small{white-space:nowrap;text-overflow:ellipsis;font:400 7px var(--mono);opacity:.5;overflow:hidden}.quick-row{grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0;display:grid}.quick-row button{color:#fff;min-height:37px;font:400 8px var(--mono);background:0 0;border:1px solid #fff3;justify-content:space-between;align-items:center;gap:5px;padding:0 9px;display:flex}.quick-row button:hover{border-color:#fff}.quick-row svg{width:12px}.panel-utilities{border-top:1px solid #ffffff2e;grid-template-columns:1fr 1fr;display:grid}.panel-utilities label,.panel-utilities button{color:#fff;background:0 0;border:0;min-height:52px;padding:9px 12px}.panel-utilities label{font:400 8px var(--mono);text-transform:uppercase;border-right:1px solid #ffffff2e;grid-template-columns:1fr auto;align-items:center;display:grid}.panel-utilities select{color:#fff;font:500 10px var(--mono);background:0 0;border:0}.panel-utilities button{font:400 8px var(--mono);text-transform:uppercase;justify-content:center;align-items:center;gap:7px;display:flex}.panel-utilities svg{width:15px}.solver-empty{text-align:center;padding-top:12px}.state-orbit{place-items:center;width:160px;height:160px;margin:18px auto 32px;display:grid;position:relative}.state-orbit i{border:1px solid #ffffff6b;border-radius:50%;animation:9s linear infinite orbit;position:absolute;inset:0}.state-orbit i:nth-child(2){border-style:dashed;animation-direction:reverse;inset:22%}.state-orbit svg{width:38px}.solver-empty>strong{font:500 20px/1.25 var(--display);display:block}.solver-empty>p{opacity:.7;max-width:400px;margin:9px auto 26px;font-size:11px;line-height:1.6}.solution-summary{border:1px solid #fff6;grid-template-columns:1fr 1fr;align-items:end;display:grid}.solution-summary>div{grid-template-columns:1fr auto;padding:16px;display:grid}.solution-summary span{font:400 8px var(--mono);letter-spacing:.1em;grid-column:1/-1}.solution-summary strong{font:500 72px/.9 var(--display)}.solution-summary small{font:400 8px var(--mono);align-self:end}.solution-summary button{height:100%;color:var(--ink);font:500 9px var(--mono);text-transform:uppercase;background:#fff;border:0;border-left:1px solid #fff6;justify-content:center;align-items:center;gap:8px;display:flex}.solution-summary svg{width:17px}.solution-list{border-left:1px solid #fff6;border-right:1px solid #fff6;max-height:335px;margin-bottom:12px;overflow-y:auto}.solution-list>div{border-bottom:1px solid #ffffff40;grid-template-columns:35px 1fr;align-items:center;min-height:62px;padding:0 15px;display:grid}.solution-list span{font:400 8px var(--mono);opacity:.5}.solution-list code{font:400 16px var(--mono)}.learn-mode-tabs{background:#11151c;grid-template-columns:1fr 1fr;margin:-29px -29px 28px;display:grid}.learn-mode-tabs button{color:#ffffff80;min-height:54px;font:500 9px var(--mono);text-transform:uppercase;background:0 0;border:0;border-right:1px solid #ffffff26;justify-content:center;align-items:center;gap:8px;display:flex}.learn-mode-tabs button.active{background:var(--paper);color:var(--ink)}.learn-mode-tabs svg{width:16px}.tutorial-empty{padding-top:24px}.tutorial-empty>span{font:400 8px var(--mono);letter-spacing:.1em}.tutorial-empty h2,.tutorial-complete h2{font:500 32px/1 var(--display);letter-spacing:-.04em;margin:17px 0 12px}.tutorial-empty p,.tutorial-complete p{opacity:.72;margin:0 0 28px;font-size:12px;line-height:1.65}.guide-track-picker{gap:7px;margin:-7px 0 14px;display:grid}.guide-track-picker>button{color:#fff;text-align:left;background:0 0;border:1px solid #ffffff47;grid-template-columns:1fr auto;gap:3px 12px;min-height:76px;padding:12px 44px 12px 13px;display:grid;position:relative}.guide-track-picker>button:hover:not(:disabled),.guide-track-picker>button.active{border-color:var(--yellow);background:#f1c64414}.guide-track-picker span{font:400 7px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.58}.guide-track-picker strong{font:500 15px var(--display);grid-column:1}.guide-track-picker small{font:400 9px/1.4 var(--mono);opacity:.62;grid-column:1/-1}.guide-track-picker i{background:var(--yellow);width:22px;height:22px;color:var(--ink);border-radius:50%;place-items:center;display:none;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.guide-track-picker button.active i{display:grid}.guide-track-picker svg{width:13px}.tutorial-method-line{border-bottom:1px solid #ffffff38;justify-content:space-between;align-items:center;gap:15px;padding-bottom:10px;display:flex}.tutorial-method-line>div{grid-template-columns:auto auto;align-items:baseline;gap:2px 9px;display:grid}.tutorial-method-line span{font:400 7px var(--mono);letter-spacing:.1em;opacity:.5}.tutorial-method-line strong{font:500 18px var(--display);grid-column:1/-1}.tutorial-method-line small{opacity:0;position:absolute}.tutorial-method-line button{color:#fff;font:400 7px var(--mono);text-transform:uppercase;background:0 0;border:1px solid #ffffff4d;padding:7px 9px}.tutorial-method-note{font:400 8px/1.45 var(--mono);opacity:.58;margin:8px 0 12px}.tutorial-progress{border-bottom:1px solid #ffffff59;height:35px;margin-bottom:24px;position:relative}.tutorial-progress i{background:var(--yellow);height:3px;transition:width .4s cubic-bezier(.16,1,.3,1);position:absolute;bottom:-1px;left:0}.tutorial-progress span{font:400 8px var(--mono);letter-spacing:.1em;position:absolute;top:0;right:0}.tutorial-phase-heading{margin:-5px 0 15px}.tutorial-phase-heading>span{font:400 7px var(--mono);letter-spacing:.1em;color:var(--yellow)}.tutorial-phase-heading h2{font:500 29px/1 var(--display);letter-spacing:-.04em;margin:6px 0 4px}.tutorial-phase-heading>strong{font:500 11px/1.45 var(--display);display:block}.tutorial-phase-heading p{opacity:.66;margin:5px 0 0;font-size:10px;line-height:1.5}.phase-sequence{border:1px solid #ffffff40;margin-bottom:16px;padding:10px}.phase-sequence>span{font:400 7px var(--mono);letter-spacing:.09em;opacity:.55;margin-bottom:8px;display:block}.phase-sequence>div{gap:4px;padding-bottom:2px;display:flex;overflow-x:auto}.phase-sequence i{min-width:25px;height:25px;font:normal 400 7px var(--mono);opacity:.46;border:1px solid #ffffff38;place-items:center;display:grid}.phase-sequence i.active{border-color:var(--yellow);background:var(--yellow);color:var(--ink);opacity:1}.phase-sequence i.done{opacity:.25;text-decoration:line-through}.move-focus{justify-content:space-between;align-items:flex-start;display:flex}.move-focus span{font:400 8px var(--mono);letter-spacing:.1em}.move-focus strong{font:500 72px/.75 var(--display);letter-spacing:-.08em}.tutorial-step h3{max-width:480px;font:500 21px/1.05 var(--display);letter-spacing:-.025em;margin:20px 0 5px}.tutorial-step .move-cue{opacity:.72;margin:0 0 13px;font-size:10px;line-height:1.5}.orientation-note{border:1px solid #ffffff4d;grid-template-columns:23px 1fr;align-items:center;gap:10px;margin:0 0 19px;padding:12px;display:grid}.orientation-note svg{width:20px}.orientation-note span{font:400 8px/1.5 var(--mono)}.tutorial-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:7px;display:grid}.tutorial-actions button{color:#fff;min-height:43px;font:400 8px var(--mono);text-transform:uppercase;background:0 0;border:1px solid #ffffff59;justify-content:center;align-items:center;gap:7px;display:flex}.tutorial-actions svg{width:15px}.up-next{border-top:1px solid #ffffff40;justify-content:space-between;align-items:center;margin-top:20px;padding-top:13px;display:flex}.up-next>span{font:400 8px var(--mono)}.up-next div{gap:5px;display:flex}.up-next i{width:28px;height:28px;font:normal 400 8px var(--mono);border:1px solid #ffffff4d;place-items:center;display:grid}.tutorial-complete{text-align:center;padding-top:90px}.tutorial-complete>svg{background:#63d47a;border-radius:50%;width:70px;height:70px;padding:18px}.tutorial-complete>span{font:400 8px var(--mono);letter-spacing:.1em;margin-top:20px;display:block}.method-tabs{border:1px solid #ffffff59;grid-template-columns:repeat(4,1fr);display:grid}.method-tabs button{color:#fff;text-align:left;background:0 0;border:0;border-right:1px solid #ffffff40;min-height:54px;padding:8px;display:grid}.method-tabs button:last-child{border-right:0}.method-tabs button.active{background:var(--paper);color:var(--ink)}.method-tabs strong{font:500 13px var(--display)}.method-tabs small{font:400 7px var(--mono);opacity:.6}.method-intro{padding:21px 0}.method-intro>span{font:400 8px var(--mono);letter-spacing:.08em}.method-intro h2{font:500 32px/1 var(--display);letter-spacing:-.04em;margin:9px 0}.method-intro p{opacity:.72;margin:0;font-size:11px;line-height:1.6}.method-phases{border-top:1px solid #ffffff59}.method-phases article{border-bottom:1px solid #ffffff59}.method-phases article>button{color:#fff;text-align:left;background:0 0;border:0;grid-template-columns:30px 1fr auto;align-items:center;width:100%;min-height:51px;padding:0 8px;display:grid}.method-phases article>button span{font:400 8px var(--mono);opacity:.55}.method-phases article>button strong{font:500 14px var(--display)}.method-phases article>button svg{width:16px;transition:transform .25s}.method-phases article.active>button svg{transform:rotate(180deg)}.method-phases article>div{padding:3px 8px 18px 38px;animation:.35s both detailIn}.method-phases h3{font:500 18px/1.1 var(--display);margin:0 0 7px}.method-phases p{opacity:.72;margin:0 0 12px;font-size:10px;line-height:1.55}.method-alg-card{border:1px solid #ffffff52;margin-top:7px}.method-alg-card>div:first-child{grid-template-columns:95px 1fr;align-items:baseline;gap:5px;padding:9px 10px;display:grid}.method-alg-card span{font:500 7px var(--mono);text-transform:uppercase}.method-alg-card code{font:400 9px var(--mono)}.method-alg-card small{font:400 7px/1.4 var(--mono);opacity:.5;grid-column:1/-1}.method-alg-card>div:last-child{border-top:1px solid #ffffff38;grid-template-columns:1fr 1fr;display:grid}.method-alg-card button{color:#fff;min-height:34px;font:400 7px var(--mono);text-transform:uppercase;background:0 0;border:0;border-right:1px solid #ffffff38;justify-content:center;align-items:center;gap:6px;display:flex}.method-alg-card button:last-child{border-right:0}.method-alg-card button:hover:not(:disabled){background:var(--yellow);color:var(--ink)}.method-alg-card svg{width:12px}.spin{animation:1s linear infinite spin}@keyframes cubeArrival{0%{opacity:0;transform:scale(.72)rotate(-4deg)}to{opacity:1;transform:none}}@keyframes panelIn{0%{opacity:0;clip-path:inset(0 0 0 30%);transform:translate(24px)}to{opacity:1;clip-path:inset(0);transform:none}}@keyframes detailIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=980px){.app-shell{overflow:visible}.app-header{z-index:20;grid-template-columns:auto 1fr auto;padding:0 14px;position:sticky;top:0}.brand>span:last-child{display:none}.workspace-tabs{justify-self:center}.workspace-tabs button{min-width:100px;padding:0 10px}.cube-status{font-size:0}.cube-status i{margin:0}.workspace{grid-template-columns:1fr;height:auto;min-height:calc(100svh - 72px)}.cube-workbench{border-right:0;border-bottom:1px solid var(--ink);height:57svh;min-height:430px}.workspace-panel{min-height:600px;overflow:visible}.panel-view{min-height:600px}}@media (width<=600px){.app-header{flex-basis:62px;height:62px;padding:0 9px}.brand-mark{width:20px;height:20px}.workspace-tabs button{width:82px;min-width:0;font-size:0}.workspace-tabs button svg{width:19px}.workspace-tabs button.active:after{left:11px;right:11px}.workspace{min-height:calc(100svh - 62px)}.cube-workbench{height:50svh;min-height:385px}.cube-scene{inset:25px 0 86px}.workbench-meta{top:12px;left:13px;right:13px}.workbench-meta span:last-child{display:none}.turn-readout{bottom:96px;right:13px}.turn-readout strong{font-size:52px}.turn-readout small{display:none}.cube-history{padding:0 10px}.cube-transport{grid-template-columns:42px 42px 42px 1fr 1fr}.cube-transport button{font-size:8px}.cube-transport button:nth-child(-n+3){font-size:0}.panel-view{padding:22px 16px 35px}.panel-title h1{font-size:34px}.learn-mode-tabs{margin:-22px -16px 23px}.algorithm-editor textarea{font-size:18px}.move-grid{max-height:280px}.move-grid button{min-height:64px}.quick-row{grid-template-columns:1fr}.quick-row button{min-height:38px}.solution-summary{grid-template-columns:1.15fr .85fr}.solution-summary strong{font-size:58px}.tutorial-step h2{font-size:25px}.move-focus strong{font-size:74px}.method-tabs{grid-template-columns:1fr 1fr}.method-tabs button{border-bottom:1px solid #ffffff40}.method-tabs button:nth-child(2){border-right:0}.method-tabs button:nth-child(n+3){border-bottom:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}