*{box-sizing:border-box}html,body{color:#d4d4d4;background:#1e1e1e;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Geeza Pro,Noto Sans Arabic,Tahoma,sans-serif}html[lang=ar] body,html[lang=zh] body{font-size:17px}.page{flex-direction:column;gap:18px;height:100dvh;min-height:640px;padding:20px 28px 28px;display:flex}.masthead{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"greet switch""title switch""intro switch";align-items:center;column-gap:32px;display:grid}.greetings{color:#9d9d9d;flex-wrap:wrap;grid-area:greet;gap:4px 0;margin:0;font-size:.85rem;font-weight:600;display:flex}.greetings span:not(:last-child):after{content:"•";color:#505050;padding:0 9px}h1{letter-spacing:-.02em;border-bottom:8px solid var(--line);grid-area:title;justify-self:start;align-items:center;gap:14px;margin:6px 0 8px;padding-bottom:6px;font-size:2.3rem;font-weight:800;line-height:1.1;transition:border-color .2s;display:flex}.intro{white-space:pre-line;color:#9d9d9d;grid-area:intro;min-height:50px;margin:0;line-height:1.45}.switch{grid-area:switch;grid-template-columns:repeat(6,84px);display:grid;position:relative}.switch:before{content:"";background:#505050;border-radius:8px;height:8px;position:absolute;top:15px;left:42px;right:42px}.switch button{color:#d4d4d4;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:12px;flex-direction:column;align-items:center;gap:12px;padding:6px 4px 8px;display:flex;position:relative}.switch button:before{content:"";border:6px solid var(--stop);background:#252526;border-radius:50%;width:26px;height:26px;transition:transform .15s}.switch button:hover:before{transform:scale(1.12)}.switch button:focus-visible{outline-offset:2px;outline:3px solid #d4d4d4}.switch button[aria-pressed=true]:before{background:var(--stop);box-shadow:0 0 0 4px #252526,0 0 0 7px var(--stop);transform:scale(1.1)}.switch button[aria-pressed=true] .native{font-weight:800}.switch .native{font-size:.98rem;font-weight:600}.switch button[lang=en]{--stop:#3b82d6}.switch button[lang=de]{--stop:#d4b72c}.switch button[lang=es]{--stop:#e07b4f}.switch button[lang=el]{--stop:#3fa9e0}.switch button[lang=zh]{--stop:#7fb35a}.switch button[lang=ar]{--stop:#c257b8}.desk{flex:1;grid-template:"toolbox workspace preview"minmax(0,1fr)"toolbox workspace output"/minmax(250px,min-content) minmax(0,1fr) 380px;gap:18px;min-height:0;display:grid}.pane{background:#252526;border:1px solid #3c3c3c;border-radius:8px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.pane h2{color:var(--line-text);border-top:2px solid var(--line-text);background:#1e1e1e;align-self:flex-start;align-items:center;gap:8px;margin:0;padding:8px 16px 9px;font-size:.82rem;font-weight:600;display:flex}.pane h2:before{content:"";background:var(--line-text);border-radius:50%;flex:none;width:8px;height:8px}.toolbox{grid-area:toolbox}.workspace{grid-area:workspace}.preview{grid-area:preview}.output{grid-area:output}.fill{background:#1e1e1e;flex:1;min-height:0;position:relative}.preview .fill{background:#1e1e1e;overflow:auto}.toolbox-body{background:#1e1e1e;flex-direction:column;flex:1;gap:10px;min-height:0;padding:12px;display:flex;overflow:auto}.toolbox-body [data-category]{flex-direction:column;gap:8px;display:flex}.morphic-block{border:1px solid #3c3c3c;border-inline-start:6px solid var(--morphic-block-color,#9d9d9d);cursor:grab;background:#252526;border-radius:10px;flex-direction:column;gap:5px;padding:8px 10px 9px;display:flex;overflow-x:auto}.morphic-block:hover{border-color:#505050;border-inline-start-color:var(--morphic-block-color,#9d9d9d);background:#2a2d2e}.morphic-block [class*=morphic-element-title_]{color:#9d9d9d;font-size:.74rem;font-weight:700}.output-head{background:#252526;justify-content:space-between;align-items:center;display:flex}.run{background:var(--line);color:var(--line-ink);font:inherit;cursor:pointer;border:0;border-radius:999px;margin:5px 10px;padding:5px 16px;font-size:.85rem;font-weight:800}.run:hover{filter:brightness(1.08)}.run:active{transform:translateY(1px)}.run:focus-visible{outline:3px solid var(--line-ink);outline-offset:2px}.output pre{white-space:pre-wrap;background:#1e1e1e;min-height:130px;max-height:200px;margin:0;padding:10px 14px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.5;overflow:auto}.output pre .quiet{color:#9d9d9d;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Geeza Pro,Noto Sans Arabic,Tahoma,sans-serif}.output pre .error{color:#ff8a80}@media (max-width:1180px){.desk{grid-template-columns:minmax(220px,min-content) minmax(0,1fr) 310px}.switch{grid-template-columns:repeat(3,92px);row-gap:6px}.switch:before{display:none}}@media (max-width:900px){.page{height:auto;min-height:0;padding:14px 16px 24px}.masthead{grid-template-columns:minmax(0,1fr);grid-template-areas:"greet""title""intro""switch";row-gap:4px}h1{font-size:1.9rem}.switch{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}.desk{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"toolbox""workspace""preview""output"}.toolbox{height:280px}.workspace{height:440px}.preview{height:320px}}[class*=morphic-category-]>g>.blocklyText{fill:#1e1e1e}.toolbox-body{min-width:calc(var(--morphic-toolbox-block-width,0px) + 48px)}
