/* 도형들의 나라 · 문제 풀이 화면
 * 화면 언어: 코드 어드벤처 3 참고. 왼쪽 게임에 집중하고, 오른쪽 작업면 안에서 목표를 읽고 코드를 쓴다.
 * 황색 = 약속(주의), 적색 = 실패. 장면 안의 도형 색(역할)은 engine/render.js가 정한다. */
@font-face{font-family:'Pretendard Variable';src:url('fonts/PretendardVariable.woff2') format('woff2-variations'),url('fonts/PretendardVariable.woff2') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
:root{
  --route:#26785f; --route-deep:#1b5d49; --route-ink:#205b49; --route-soft:#e6f2ec; --route-line:#a6c6b6;
  --go:#12693f; --go-deep:#0e5432; --go-soft:#e3f1e8;
  --caution:#f2b51c; --caution-soft:#fdf4d6; --caution-line:#e6cd7f; --caution-ink:#4a3600;
  --stop:#b3261e; --stop-soft:#fbeceb; --stop-line:#e8b9b4;
  --ground:#edf3f0; --panel:#ffffff; --panel-2:#f4f7f5; --line:#d9e3dd; --line-strong:#b8c9bf;
  --ink:#14202b; --text:#1f2c38; --muted:#52606d; --soft:#3f4c58;
  --land:#f4f5f1; --hl-cur:#fff0b3; --hl-err:#fbdcd8;
  --sans:'Pretendard Variable',Pretendard,'Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif;
  --mono:'JetBrains Mono',Consolas,'D2Coding','Malgun Gothic',monospace;
  --r-panel:12px; --r-ctl:8px;
  --t-xs:12.5px; --t-sm:13.5px; --t-md:15px; --t-lg:17px; --t-xl:22px;
}
*{box-sizing:border-box}
html,body{margin:0}
html{accent-color:var(--route);-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--text);font:400 var(--t-md)/1.6 var(--sans);word-break:keep-all;overflow-wrap:break-word;font-variant-numeric:tabular-nums}
button,select,input,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;color:var(--ink);text-wrap:balance}
::selection{background:#d8ece2;color:var(--ink)}
:focus-visible{outline:2px solid var(--route);outline-offset:2px;border-radius:4px}
*{scrollbar-color:#b4c0cc transparent;scrollbar-width:thin}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--r-ctl);text-decoration:none}
.skip:focus{top:8px}
.i{width:15px;height:15px;flex:none}

/* ---------- 위: 이름 · 노선(16문제) · 완료 수 ---------- */
.top{display:flex;align-items:center;gap:20px;padding:8px 20px;background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-lg);color:var(--ink);white-space:nowrap}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;flex:1;justify-content:center}
.seg{display:flex;align-items:center;gap:4px}
.seg-name{font-size:var(--t-xs);color:var(--muted);margin-right:3px;font-weight:600}
.route a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 6px;border-radius:7px 7px 11px 11px;border:1.5px solid var(--route-line);background:var(--panel);color:var(--route-ink);text-decoration:none;font-weight:700;font-size:var(--t-sm);transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}
.route a:hover{border-color:var(--route);background:var(--route-soft)}
.route a.done{background:var(--route);border-color:var(--route);color:#fff}
.route a.done:hover{background:var(--route-deep)}
.route a .ck{position:absolute;right:-5px;top:-5px;width:14px;height:14px;padding:2px;border-radius:50%;background:var(--go);color:#fff;box-shadow:0 0 0 1.5px var(--panel)}
.route a.cur{border-width:2px;border-color:var(--route-deep)}
.route a.cur::after{content:'';position:absolute;left:3px;right:3px;bottom:-7px;height:3px;border-radius:2px;background:var(--caution)}
.route a .t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.route a:hover .t,.route a:focus-visible .t{width:auto;height:auto;clip-path:none;overflow:visible;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:var(--t-xs);font-weight:500;padding:4px 9px;border-radius:6px;z-index:30;pointer-events:none}
.seg:last-child a .t{left:auto;right:0;transform:none}
.tally{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;white-space:nowrap}
#progress{font-weight:700;color:var(--ink);font-size:var(--t-sm)}
.tally-lang{font-size:var(--t-xs);color:var(--muted)}

/* ---------- 오른쪽 작업면: 짧은 목표 · 단원 순서 · 접힌 도움말 ---------- */
.brief{display:flex;flex-direction:column;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);flex-shrink:0}
.sign{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:start;background:transparent;color:var(--text);border-radius:0;padding:0;box-shadow:none}
.sign>.shield{display:none}
.shield{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:44px;padding:0 8px;border-radius:9px 9px 18px 18px;background:#fff;color:var(--route-ink);font-weight:800;font-size:22px;line-height:1}
.shield small{font-size:15px;font-weight:750;margin-left:1px;color:var(--muted)}
.sign-text{min-width:0}
.brief .topic{font-size:var(--t-xs);color:var(--muted);font-weight:500;margin:3px 0 0}
.brief h1{color:var(--ink);font-size:19px;font-weight:750;line-height:1.3;margin:0}
.brief .task{margin:8px 0 0;color:var(--text);max-width:80ch;line-height:1.5;font-size:14px}
.steps{display:flex;flex-direction:row;gap:4px;align-items:stretch}
.step{display:flex;align-items:center;gap:4px;min-height:32px;padding:4px 8px;border-radius:var(--r-ctl);border:1px solid var(--line);color:var(--route-ink);text-decoration:none;font-size:var(--t-xs);max-width:210px}
.step:hover{background:var(--route-soft);border-color:var(--route-line)}
.step.next{justify-content:space-between}
.step-no{font-weight:800;white-space:nowrap}
.step-t{display:none}
.step.blank{display:none}
.sign :focus-visible{outline-color:var(--route)}
.mission-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
/* 단원 사다리: 연습 칸 → 최종 칸. 지금 = 굵은 청색 테두리 + 황색 밑줄, 완료 = 녹색 체크 */
.ladder{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.ladder-name{font-size:var(--t-xs);font-weight:700;color:var(--muted);white-space:nowrap}
.ladder ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ladder li.fin::before{content:'';display:inline-block;width:10px;height:2px;background:var(--line-strong);margin:0 4px 0 2px;vertical-align:middle}
.ladder a{position:relative;display:inline-flex;align-items:center;min-height:30px;padding:2px 10px;border-radius:var(--r-ctl);border:1px solid var(--line-strong);background:var(--panel);color:var(--route-ink);text-decoration:none;font-size:var(--t-xs);font-weight:600;white-space:nowrap}
.ladder a:hover{border-color:var(--route);background:var(--route-soft)}
.ladder li.fin a{border-radius:7px 7px 11px 11px;border:1.5px solid var(--route-line);font-weight:800}
.ladder a.done{background:var(--route-soft);border-color:var(--route-line)}
.ladder li.fin a.done{background:var(--route);border-color:var(--route);color:#fff}
.ladder a.cur{border:2px solid var(--route-deep);padding:1px 9px}
.ladder a.cur::after{content:'';position:absolute;left:4px;right:4px;bottom:-5px;height:3px;border-radius:2px;background:var(--caution)}
.ladder a .ck{position:absolute;right:-5px;top:-5px;width:13px;height:13px;padding:2px;border-radius:50%;background:var(--go);color:#fff;box-shadow:0 0 0 1.5px var(--panel)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.checks{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:4px;color:var(--text);font-size:var(--t-sm);line-height:1.5}
.checks li{position:relative;padding-left:16px}
.checks li::before{content:'';position:absolute;left:2px;top:.5em;width:6px;height:6px;border:2px solid var(--route);border-radius:1px;transform:rotate(45deg)}
.tips{font-size:var(--t-sm);line-height:1.6;color:var(--soft);margin-left:auto}
.tips[open]{flex-basis:100%;margin-left:0}
.tips summary{cursor:pointer;font-weight:600;color:var(--route-ink);width:fit-content;min-height:24px}
.tips p{margin:6px 0 0;max-width:80ch}
.tips .outcome b{color:var(--ink);margin-right:4px}

/* ---------- 두 판: 왼쪽 = 게임(장면), 오른쪽 = 코드 ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,48vw);gap:16px;padding:12px 16px 16px}
.pane{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.panel{min-width:0;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);padding:14px 16px}
.panel h2{font-size:var(--t-sm);font-weight:700;margin:0 0 8px}
.panel p{margin:0}
/* 접는 칸(명령표·추적·장면 기호): 흰 판, 제목 줄이 버튼 */
.drawer{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);padding:0 16px}
.drawer>summary{cursor:pointer;font-size:var(--t-sm);font-weight:700;color:var(--ink);padding:10px 0;min-height:40px;display:flex;align-items:center;gap:8px;list-style:none}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary::before{content:'';width:7px;height:7px;border-right:2px solid var(--route);border-bottom:2px solid var(--route);transform:rotate(-45deg);flex:none;margin:0 2px}
.drawer[open]>summary::before{transform:rotate(45deg)}
.drawer[open]{padding-bottom:12px}
.api dl{margin:0;display:flex;flex-direction:column}
.api dl>div{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;padding:8px 0;border-top:1px solid var(--panel-2)}
.api dl>div:first-child{border-top:0;padding-top:0}
.api dt{font:600 13px/1.5 var(--mono);color:var(--route-ink);overflow-wrap:anywhere;word-break:normal}
.api dd{margin:0;font-size:var(--t-sm);color:var(--soft);line-height:1.5}

/* 왼쪽: 장면 */
.stage{display:flex;flex-direction:column;gap:10px;padding:0;background:none;border:0;scroll-margin-top:8px}
.stage-bar{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--panel);border-radius:var(--r-ctl);padding:5px 12px;cursor:pointer;color:var(--text);font-size:var(--t-sm);min-height:34px}
.tabs button:hover{background:var(--panel-2)}
.tabs button.cur{background:var(--route-soft);border-color:var(--route);color:var(--route-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--route)}
.tabs .badge{font-size:12px;font-weight:700;padding:0 7px;border-radius:999px;line-height:20px}
.tabs .badge.ok{background:var(--go-soft);color:var(--go)}
.tabs .badge.bad{background:var(--stop-soft);color:var(--stop)}
.tabs .note{color:var(--muted);font-size:var(--t-xs);align-self:center}
.playback{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tool,.ed-actions button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--panel);border-radius:var(--r-ctl);padding:5px 12px;min-height:34px;cursor:pointer;color:var(--text);font-size:var(--t-sm);white-space:nowrap;transition:background-color .15s ease-out,border-color .15s ease-out}
.tool:hover:not(:disabled),.ed-actions button:hover:not(:disabled){background:var(--panel-2);border-color:var(--route-line)}
.tool:active:not(:disabled),.ed-actions button:active:not(:disabled){transform:translateY(1px)}
.tool:disabled{color:#66727e;background:var(--panel-2);border-color:var(--line);cursor:default}
.speed,.chk{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--soft);padding:0 4px}
.speed select{border:1px solid var(--line-strong);border-radius:6px;padding:3px 6px;background:var(--panel);min-height:30px}
.scene-wrap{background:var(--land);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;justify-content:center}
#scene{width:100%;max-height:calc(100vh - 330px);min-height:220px;display:block;user-select:none}
#scene text{pointer-events:none}
.stage-foot{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;min-height:22px}
.status{color:var(--soft);font-size:var(--t-sm)}
.status:empty::before{content:'실행하면 장면이 재생되고, 판정이 바로 아래에 나옵니다.';color:var(--muted)}
.hud{font:500 13px var(--mono);color:var(--soft);display:flex;gap:14px;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--soft);font-size:var(--t-sm)}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend svg{flex:none}

/* 판정: 통과 = 녹색 방향 표지, 실패 = 적색 띠 */
.result:empty{display:none}
.result{border-radius:var(--r-panel);padding:14px 18px;border:1px solid var(--line);background:var(--panel)}
.result .verdict-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.result .verdict{font-weight:750;font-size:var(--t-lg)}
.result .vlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.result .vline{display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.result .vline ul{margin:4px 0 0;padding-left:18px}
.result .vl{font-weight:700;white-space:nowrap}
.result .mk{width:16px;height:16px;flex:none;margin-top:3px}
.result .cau{flex:none;margin-top:2px}
.result .where{font:500 12.5px var(--mono);padding:1px 6px;border-radius:5px;white-space:nowrap}
.result .muted{margin:10px 0 0;font-size:var(--t-sm);color:var(--muted)}
.result.ok{background:var(--go);border-color:var(--go);color:#fff;box-shadow:inset 0 0 0 4px var(--go),inset 0 0 0 5.5px #ffffff;padding:16px 20px}
.result.ok .verdict{color:#fff}
.result.ok .end{margin:0;color:#e3f1e8;font-size:var(--t-sm)}
.result.ok :focus-visible{outline-color:#ffd54a}
.next-sign{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 12px;border-radius:var(--r-ctl);border:1.5px solid #fff;color:#fff;text-decoration:none;font-weight:700;width:fit-content;max-width:100%}
.next-sign:hover{background:var(--go-deep)}
.next-sign .ns-label{font-size:var(--t-sm);font-weight:500;color:#e3f1e8}
.next-sign .shield{min-width:38px;height:34px;font-size:17px;color:var(--go-deep);border-radius:7px 7px 14px 14px}
.next-sign .ns-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result.bad{border-color:var(--stop-line);background:#fff8f7}
.result.bad .verdict-row .mk{color:var(--stop);width:20px;height:20px;margin:0}
.result .verdict-row{align-items:center}
.result.bad .verdict{color:var(--stop)}
.result.bad .vline.bad .mk{color:var(--stop)}
.result.bad .where{background:var(--stop-soft);color:var(--stop)}
@media (prefers-reduced-motion:no-preference){
  .result.ok,.result.bad{animation:verdict-in .22s cubic-bezier(.16,1,.3,1)}
  @keyframes verdict-in{from{transform:translateY(6px);opacity:.55}to{transform:none;opacity:1}}
}

/* 오른쪽: 언어 · 편집기 · 실행 · 추적 */
.pane-code .code{display:flex;flex-direction:column;gap:10px}
.lang-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lang-bar h2{margin:0}
.langs{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:var(--r-ctl);overflow:hidden;background:var(--panel)}
.langs button{border:0;border-left:1px solid var(--line);background:transparent;padding:6px 12px;cursor:pointer;color:var(--text);font-size:var(--t-sm);min-height:34px}
.langs button:first-child{border-left:0}
.langs button:hover{background:var(--panel-2)}
.langs button.cur{background:var(--route);color:#fff;font-weight:700}
.langs button:focus-visible{outline-offset:-3px}
.lang-note{margin:0;font-size:var(--t-xs);line-height:1.5;color:var(--soft);background:var(--panel-2);border-radius:var(--r-ctl);padding:6px 10px}
.lang-note b{color:var(--ink);margin-right:4px}
.code-cons:empty{display:none}
.cons{display:flex;gap:8px;align-items:flex-start;background:var(--caution-soft);border:1px solid var(--caution-line);border-radius:var(--r-ctl);padding:8px 10px;font-size:var(--t-sm);line-height:1.55;color:var(--caution-ink)}
.cons .cau{flex:none;margin-top:2px}
.cons b{color:#2f2300;margin-right:4px}
.code-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.code-head h3{font-size:var(--t-sm);font-weight:700}
.code-head span{font-size:var(--t-xs);color:var(--muted)}
.prelude{display:flex;flex-direction:column;gap:6px}
.prelude[hidden]{display:none}
.prelude pre{margin:0;background:var(--panel-2);border:1px dashed var(--line-strong);border-radius:var(--r-ctl);padding:6px 8px;font:13px/21px var(--mono);color:var(--soft);white-space:pre;overflow:auto;max-height:180px}
.prelude pre .pl{display:block;padding-left:2px}
.prelude pre .pl.cur{background:var(--hl-cur)}
.prelude pre .pn{display:inline-block;width:22px;color:#5f6b77;user-select:none}
.editor{display:grid;grid-template-columns:40px 1fr;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:#fff;height:clamp(220px,calc(100vh - 560px),440px);overflow:hidden}
.editor:focus-within{border-color:var(--route);outline:2px solid var(--route);outline-offset:1px}
.gutter{background:var(--panel-2);border-right:1px solid var(--line);font:13.5px/21px var(--mono);color:#5f6b77;text-align:right;padding:8px 6px 8px 0;overflow:hidden;white-space:pre}
.gutter .err{color:#fff;background:var(--stop);border-radius:3px;padding:0 2px}
.ed-main{position:relative;overflow:hidden}
.hl{position:absolute;left:0;right:0;top:0;pointer-events:none}
.hl div{position:absolute;left:0;right:0;height:21px}
.hl .cur{background:var(--hl-cur)}
.hl .err{background:var(--hl-err)}
#code{position:absolute;inset:0;width:100%;height:100%;resize:none;border:0;outline:0;background:transparent;font:13.5px/21px var(--mono);color:var(--ink);caret-color:var(--route);padding:8px 10px;white-space:pre;overflow:auto;tab-size:4}
#code:focus-visible{outline:none}
.ed-foot{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--muted);margin-top:-4px}
.line-count{font-weight:700;color:var(--soft);font-variant-numeric:tabular-nums}
.line-count.over{color:var(--stop)}
.ed-actions{display:flex;gap:8px;flex-wrap:wrap}
.ed-actions button.primary{flex:1 1 140px;justify-content:center;background:var(--route);border-color:var(--route);color:#fff;font-weight:700;font-size:var(--t-md);min-height:42px}
.ed-actions button.primary:hover:not(:disabled){background:var(--route-deep);border-color:var(--route-deep)}
.ed-actions button.primary:disabled{background:#567b6e;border-color:#567b6e;cursor:progress}
.ed-actions button.answer-btn,.ed-actions button.quiet{min-height:42px}
.ed-actions button.quiet{border-color:transparent;background:transparent;color:var(--soft)}
.ed-actions button.quiet:hover{border-color:var(--line)}
.trace[open]{display:flex;flex-direction:column;gap:10px}
.trace[open]>summary{padding-bottom:0}
.trace h3{font-size:var(--t-xs);font-weight:700;color:var(--soft);margin-bottom:4px}
.trace h3 span{font-weight:400;color:var(--muted);margin-left:6px}
.vars-body{font:13px/1.6 var(--mono);color:var(--soft)}
.vars-body:empty::before,#log:empty::before{font-family:var(--sans);color:var(--muted);font-size:var(--t-sm)}
#vars:empty::before{content:'실행하면 재생 중인 순간의 변수 값이 여기에 보입니다.'}
.vars-body table{border-collapse:collapse}
.vars-body td{padding:1px 14px 1px 0}
.vars-body td:first-child{color:var(--muted)}
#log{margin:0;padding-left:22px;font-size:var(--t-sm);max-height:180px;overflow:auto;color:var(--soft)}
#log:empty{padding-left:0;list-style:none}
#log:empty::before{content:'실행하면 원이 한 일이 차례로 쌓입니다.'}
#log li::marker{color:#5f6b77;font-size:12px}

/* ---------- 데스크톱: 한 화면에 고정, 두 판이 따로 스크롤 ---------- */
@media (min-width:1181px){
  body{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
  .layout{min-height:0}
  .pane{overflow:auto;padding-bottom:2px}
  .pane-code .code{flex:1 0 auto;min-height:min(100%,600px)}
  .editor{height:auto;flex:1 1 0;min-height:200px}
  #scene{max-height:calc(100vh - 200px)}
}
@media (max-width:1320px){.seg-name{display:none}.route{gap:6px 10px}}
@media (min-width:1181px) and (max-height:860px){.prelude pre{max-height:112px}.editor{min-height:150px}.pane-code .code{gap:8px}.brief .task{line-height:1.45}}

/* ---------- 태블릿: 두 판 그대로(왼쪽 게임 · 오른쪽 코드), 페이지가 스크롤 ---------- */
@media (max-width:1180px){
  .layout{grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);align-items:start}
  .sign{grid-template-columns:minmax(0,1fr) auto}
  .steps{grid-column:1 / -1;flex-direction:row}
  .step{flex:1 1 0;max-width:none}
  #scene{max-height:70vh}
}

/* ---------- 좁은 화면: 위아래로 쌓기 — 게임(표지 → 장면 → 판정) 다음 코드 ---------- */
@media (max-width:760px){
  body{font-size:15px}
  .top{flex-wrap:wrap;gap:8px 12px;padding:8px 12px}
  .route{order:3;flex-basis:100%;justify-content:flex-start;gap:8px 10px}
  .tally{margin-left:auto}
  .layout{display:flex;flex-direction:column;padding:10px;gap:12px}
  .sign{padding:0;gap:8px}
  .shield{min-width:42px;height:40px;font-size:20px}
  .brief h1{font-size:18px}
  .step-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .langs button{padding:6px 10px}
  .scene-wrap{padding:4px}
  #scene{min-height:0;max-height:none}
  .editor{height:280px}
  .playback{width:100%}
}