body:has(.learn-studio-root)>#content{min-height:calc(100vh - var(--meokko-shell-header-height))}body:has(.learn-studio-root)>.dev-footer{display:none}.learn-studio-root{--learn-track-bar-height:56px;--studio-mono:var(--font-mono);min-height:calc(100vh - var(--meokko-shell-header-height));color:var(--color-text);background:var(--color-bg);font-family:var(--meokko-font-sans)}.learn-studio-root *{box-sizing:border-box}.learn-studio-root button{color:inherit;font:inherit}.studio-skip-link{z-index:100;color:#fff;background:var(--color-accent-600);border-radius:var(--radius-control);transition:transform var(--meokko-duration-fast) var(--meokko-ease-standard);padding:12px 16px;position:fixed;top:8px;left:8px;transform:translateY(-150%)}.studio-skip-link:focus{transform:translateY(0)}.learn-track-bar{top:var(--meokko-shell-header-height);z-index:30;height:var(--learn-track-bar-height);padding:0 var(--meokko-space-gutter,26.4px);background:var(--color-panel);border-bottom:1px solid var(--color-divider);scrollbar-width:none;align-items:center;gap:6px;display:flex;position:sticky;overflow-x:auto}.learn-track-bar::-webkit-scrollbar{display:none}.learn-track-bar :is(button,a){height:34px;color:var(--color-neutral-700);border-radius:var(--radius-control);letter-spacing:-.01em;cursor:pointer;transition:color var(--meokko-duration-fast) var(--meokko-ease-standard), background-color var(--meokko-duration-fast) var(--meokko-ease-standard), border-color var(--meokko-duration-fast) var(--meokko-ease-standard);background:0 0;border:1px solid #0000;flex:none;align-items:center;padding:0 12px;font-size:13.5px;font-weight:600;text-decoration:none;display:inline-flex}@media (hover:hover){.learn-track-bar :is(button,a):hover{color:var(--color-text);background:var(--color-sunken)}}.learn-track-bar :is(button,a).active{color:var(--color-accent-600);background:var(--color-accent-100);border-color:var(--color-accent-200);font-weight:700}@media (hover:none){.learn-track-bar :is(button,a){height:var(--meokko-tap-target)}}.lesson-mobile-bar{display:none}.learning-workspace{height:calc(100vh - var(--meokko-shell-header-height) - var(--learn-track-bar-height));background:var(--color-bg);grid-template-columns:264px minmax(430px,.92fr) minmax(540px,1.08fr);align-items:stretch;min-height:560px;display:grid;position:relative;overflow:hidden}.lesson-sidebar{z-index:12;background:var(--color-panel);border-right:1px solid var(--color-divider);flex-direction:column;min-height:0;display:flex;position:relative;overflow:hidden}.sidebar-scroll{flex:auto;min-height:0;padding:22px 14px 12px;overflow-y:auto}.sidebar-heading{justify-content:space-between;align-items:center;padding:0 6px 16px;display:flex}.sidebar-heading small{color:var(--color-neutral-500);align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1;display:inline-flex}.learn-studio-root .sidebar-heading h2{letter-spacing:-.04em;margin:8px 0 0;font-size:22px;font-weight:800}.lesson-group{margin:0 0 14px}.group-title{color:var(--color-neutral-700);letter-spacing:-.01em;align-items:center;gap:8px;padding:10px 6px 6px;font-size:12.5px;font-weight:700;display:flex}.lesson-link{width:100%;min-height:38px;color:var(--color-neutral-700);text-align:left;letter-spacing:-.01em;cursor:pointer;transition:color var(--meokko-duration-fast) var(--meokko-ease-standard), background-color var(--meokko-duration-fast) var(--meokko-ease-standard);background:0 0;border:0;border-radius:7px;grid-template-columns:24px 1fr;align-items:center;padding:6px 8px 6px 6px;font-size:13.5px;text-decoration:none;display:grid}.lesson-link>span{color:var(--color-neutral-500);font:500 11.5px/1 var(--studio-mono);font-variant-numeric:tabular-nums}@media (hover:hover){.lesson-link:hover:not(.selected){color:var(--color-text);background:var(--color-sunken)}}.lesson-link.selected{color:var(--color-accent-600);background:var(--color-accent-100);font-weight:700}.lesson-link.selected>span{color:var(--color-accent-600)}@media (hover:none){.learn-studio-root .lesson-link{min-height:var(--meokko-tap-target)}}.track-empty{color:var(--color-neutral-700);background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-md);margin:8px;padding:16px}.track-empty b{color:var(--color-text);margin-bottom:6px;font-size:14px;display:block}.track-empty p{margin:0;font-size:13px;line-height:1.6}.track-empty button{min-height:var(--meokko-tap-target);color:#fff;background:var(--color-accent-600);border:1px solid var(--color-accent-600);border-radius:var(--radius-control);cursor:pointer;margin-top:12px;padding:8px 14px;font-weight:700}.lesson-sidebar-skeleton{gap:10px;padding:8px;display:grid}.lesson-progress{padding:14px 18px calc(16px + env(safe-area-inset-bottom));background:var(--color-panel);border-top:1px solid var(--color-divider);flex:none;margin:0}.lesson-progress>div:first-child{color:var(--color-neutral-500);justify-content:space-between;font-size:12.5px;font-weight:600;display:flex}.lesson-progress>div:first-child b{color:var(--color-text);font:500 12.5px/1 var(--studio-mono);font-variant-numeric:tabular-nums}.progress-track{background:var(--color-sunken);border-radius:4px;height:4px;margin-top:10px;overflow:hidden}.progress-track i{background:var(--color-accent-500);border-radius:4px;height:100%;display:block}.lesson-content{background:var(--color-bg);border-right:1px solid var(--color-divider);padding:38px clamp(34px,4vw,60px) 48px;overflow-y:auto}.lesson-content:focus-visible{outline:2px solid var(--color-accent-500);outline-offset:-2px}.lesson-content.lesson-state{flex-direction:column;justify-content:center;display:flex}.lesson-state .state-kicker{color:var(--color-accent-600);font:600 11.5px/1 var(--studio-mono);letter-spacing:.08em}.lesson-state h1{margin-top:10px}.lesson-breadcrumb{color:var(--color-neutral-700);align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.3;display:flex}.lesson-breadcrumb span{color:var(--color-neutral-500)}.lesson-number{color:var(--color-accent-600);font:600 12px/1 var(--studio-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;margin-top:28px}.learn-studio-root :where(.lesson-content h1){overflow-wrap:break-word;word-break:keep-all;letter-spacing:-.04em;width:100%;margin:8px 0 12px;font-size:clamp(1.875rem,3vw,2.5rem);font-weight:800;line-height:1.15}.lesson-description{width:100%;color:var(--color-neutral-700);margin:0;font-size:1rem;line-height:1.75}.lesson-reading{border-top:1px solid var(--color-divider);width:100%;margin-top:28px;padding-top:22px}.lesson-reading h2{letter-spacing:-.03em;margin:0 0 10px;font-size:18px;font-weight:800}.lesson-reading p{color:var(--color-text);font-size:var(--meokko-text-body);line-height:var(--meokko-text-body-article-line-height);margin:0 0 12px}.concept-box,.lesson-warning,.lesson-tip{width:100%;color:var(--color-text);background:var(--color-panel);border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-top:18px;padding:16px 18px;font-size:14.5px;line-height:1.65}.concept-box{gap:8px;display:grid}.concept-box>b,.lesson-warning b,.lesson-tip b{color:var(--color-neutral-700);align-items:center;gap:8px;margin:0 0 8px;font-size:13px;font-weight:800;line-height:1.3;display:flex}.concept-box>b:before,.lesson-warning b:before,.lesson-tip b:before{width:22px;height:22px;font:600 12px/1 var(--studio-mono);border-radius:6px;place-items:center;display:inline-grid}.concept-box>b:before{content:"//";background:var(--color-accent-100);color:var(--color-accent-600)}.lesson-warning b:before{content:"!";color:var(--color-danger-strong);background:#fff1ee}.lesson-tip b:before{content:">";background:var(--color-term);color:var(--meokko-brand-mark)}.concept-box div{color:var(--color-text);align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.6;display:flex}.concept-box svg{width:16px;height:16px;color:var(--color-accent-600);background:0 0;border-radius:0;flex:none;margin-top:3px;padding:0}.lesson-warning{border-color:color-mix(in srgb, var(--color-danger) 24%, var(--color-divider))}.lesson-warning b{color:var(--color-danger-strong)}.lesson-warning p,.lesson-tip p{color:var(--color-text);margin:0}.lesson-tip{gap:0;display:flex}.lesson-tip svg{display:none}.lesson-footer{border-top:1px solid var(--color-divider);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%;margin-top:26px;padding-top:18px;display:grid}.lesson-footer button{background:var(--color-panel);border:1px solid var(--color-divider);border-radius:var(--radius-lg);min-height:64px;box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color var(--meokko-duration-fast) var(--meokko-ease-standard), box-shadow var(--meokko-duration-fast) var(--meokko-ease-standard), transform var(--meokko-duration-fast) var(--meokko-ease-standard);align-items:center;gap:10px;padding:10px 14px;display:flex}@media (hover:hover){.lesson-footer button:hover:not(:disabled){border-color:var(--color-rule);box-shadow:var(--shadow-md);transform:translateY(-1px)}}.lesson-footer button:last-child{text-align:right;justify-content:flex-end}.lesson-footer button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.lesson-footer span{letter-spacing:-.02em;flex-direction:column;gap:4px;min-width:0;font-size:13.5px;font-weight:700;display:flex}.lesson-footer small{color:var(--color-neutral-500);font-size:12px;font-weight:600;line-height:1}.lesson-footer svg{color:var(--color-neutral-500);flex:none}.learning-lab{background:var(--color-term);min-width:0;min-height:0;color:var(--color-term-text);border-radius:0;flex-direction:column;margin:0;display:flex;overflow:hidden}.lab-toolbar{border-bottom:1px solid var(--color-term-line);min-width:0;color:var(--color-term-muted);font:600 12px/1 var(--studio-mono);letter-spacing:.04em;flex:0 0 52px;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.lab-toolbar>div:first-child{align-items:center;gap:8px;display:flex}.lab-actions{gap:8px;display:flex}.learn-studio-root .icon-text-button{height:34px;min-height:34px;color:var(--color-term-text);border:1px solid var(--color-term-line);border-radius:var(--radius-control);white-space:nowrap;cursor:pointer;transition:background-color var(--meokko-duration-fast) var(--meokko-ease-standard), border-color var(--meokko-duration-fast) var(--meokko-ease-standard), color var(--meokko-duration-fast) var(--meokko-ease-standard);background:#ffffff0a;justify-content:center;align-items:center;gap:7px;padding:0 12px;font-size:13px;font-weight:700;display:flex}@media (hover:hover){.learn-studio-root .icon-text-button:hover:not(:disabled){border-color:var(--color-term-muted);background:#ffffff17}}.learn-studio-root .icon-text-button:disabled{opacity:.5;cursor:wait}.learn-studio-root .lab-actions .icon-text-button:last-child{color:#fff;background:var(--meokko-button);border-color:var(--meokko-button)}@media (hover:hover){.learn-studio-root .lab-actions .icon-text-button:last-child:hover:not(:disabled){background:var(--color-accent-500);border-color:var(--color-accent-500)}}.file-tabs{border-bottom:1px solid var(--color-term-line);flex:0 0 52px;align-items:center;gap:8px;padding-inline:8px;display:flex}.file-tab-scroller{scrollbar-width:none;flex:auto;align-self:stretch;align-items:center;gap:4px;min-width:0;display:flex;overflow-x:auto}.file-tab-scroller::-webkit-scrollbar{display:none}.file-tabs .lab-actions{flex:none;align-self:center}.file-tabs button{height:100%;min-height:var(--meokko-tap-target);color:var(--color-term-muted);font:500 12.5px/1 var(--studio-mono);letter-spacing:.02em;cursor:pointer;background:0 0;border:0;flex:none;padding:0 14px;position:relative}.file-tabs button.active{color:var(--color-term-text)}.file-tabs button.active:after{background:var(--meokko-brand-mark);content:"";border-radius:2px 2px 0 0;height:2px;position:absolute;bottom:0;left:10px;right:10px}.editor-wrap{flex:1 1 0;min-height:280px;position:relative;overflow:hidden}.editor-loading{height:100%;color:var(--color-term-muted);background:var(--color-term);place-items:center;font-size:13px;display:grid}.preview-heading{color:var(--color-term-muted);background:var(--color-term-raised);border-block:1px solid var(--color-term-line);font:600 12px/1 var(--studio-mono);letter-spacing:.04em;flex:0 0 40px;justify-content:space-between;align-items:center;padding:0 15px;display:flex}.preview-status{color:var(--color-term-muted);align-items:center;gap:7px;font-weight:500;display:flex}.preview-status i{background:var(--meokko-brand-mark);border-radius:50%;width:6px;height:6px}.preview-frame{background:#fff;border:0;flex:1 1 0;width:100%;min-height:260px}.runtime-output{min-height:260px;color:var(--color-term-text);background:var(--color-term);white-space:pre-wrap;overflow-wrap:anywhere;font:13.5px/1.7 var(--studio-mono);border:0;flex:1 1 0;margin:0;padding:20px;overflow:auto}.static-preview-badge{color:var(--color-term-muted);border:1px solid var(--color-term-line);border-radius:var(--radius-control);font:500 12px/1 var(--studio-mono);background:0 0;padding:5px 9px}.framework-source{min-height:280px;color:var(--color-term-text);background:var(--color-term);tab-size:2;white-space:pre;font:13px/1.72 var(--studio-mono);border:0;flex:1 1 0;margin:0;padding:20px;overflow:auto}.framework-source code{font:inherit}.code-token.comment{color:#6b7686;font-style:italic}.code-token.string{color:#d7ff3a}.code-token.keyword{color:#8fd0ff;font-weight:600}.code-token.number{color:#ffb86b}.code-token.tag{color:#8fd0ff}.code-token.decorator{color:#ffb86b}.code-token.attribute{color:#c3d4ff}.code-token.type{color:#7ee2d8}.code-token.function{color:#e9dcff}.code-token.identifier{color:var(--color-term-text)}.code-token.punctuation{color:var(--color-term-muted)}.studio-icon-button{width:var(--meokko-tap-target);height:var(--meokko-tap-target);border:1px solid var(--color-divider);border-radius:var(--radius-control);cursor:pointer;background:0 0;place-items:center;padding:0;display:grid}.mobile-only,.studio-backdrop{display:none}.lab-loading{grid-template-rows:52px 1fr 42%;gap:10px;padding:10px;display:grid}.lab-loading div{background:var(--color-term-raised);border-radius:8px}.editor-fallback{resize:none;background:var(--color-term);width:100%;height:100%;color:var(--color-term-text);font-family:var(--studio-mono);tab-size:2;white-space:pre;border:0;border-radius:0;margin:0;padding:16px 18px;font-size:14px;line-height:23px;display:block;overflow:auto}.editor-fallback:focus{outline:none}.learn-studio-root .report-submit{color:#fff}@media (max-width:1199px){.learn-studio-root{padding-bottom:0}.learn-track-bar{top:var(--meokko-shell-header-height);padding:0 10px}.lesson-mobile-bar{z-index:18;top:calc(var(--meokko-shell-header-height) + var(--learn-track-bar-height));background:var(--color-panel);border-bottom:1px solid var(--color-divider);justify-content:space-between;align-items:center;gap:12px;height:52px;padding:0 14px;display:flex;position:sticky}.lesson-mobile-bar b{min-width:0;max-width:none;color:var(--color-text);text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:auto;font-size:13px;overflow:hidden}.learn-studio-root .lesson-menu-button{min-width:124px;height:36px;color:var(--color-text);background:var(--color-panel);border:1px solid var(--color-divider);border-radius:var(--radius-control);cursor:pointer;box-shadow:var(--shadow-sm);flex:none;justify-content:center;align-items:center;gap:7px;padding:0 14px;font-size:13.5px;font-weight:700;display:flex}@media (hover:hover){.learn-studio-root .lesson-menu-button:hover{border-color:var(--color-rule)}}@media (hover:none){.learn-studio-root .lesson-menu-button{height:var(--meokko-tap-target)}}.lesson-menu-button:focus-visible{outline:2px solid var(--color-accent-500);outline-offset:3px}.mobile-only{display:grid}.learning-workspace{background:var(--color-bg);height:auto;min-height:0;display:block;overflow:visible}.lesson-sidebar{z-index:50;background:var(--color-panel);width:300px;height:100dvh;box-shadow:var(--shadow-lg);overscroll-behavior:contain;transition:transform var(--meokko-duration-base) var(--meokko-ease-out);position:fixed;top:0;bottom:0;left:0;transform:translate(-105%)}.lesson-sidebar.open{transform:translate(0)}.lesson-sidebar .sidebar-scroll{overscroll-behavior:contain}.studio-backdrop{z-index:45;touch-action:none;background:#0c0f1473;border:0;display:block;position:fixed;inset:0}.lesson-progress{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.lesson-content{border-right:0;padding:30px 20px 40px}.learn-studio-root :where(.lesson-content h1){font-size:1.75rem}.learning-lab{height:760px;min-height:0;box-shadow:none;border-radius:0;margin:0}.lab-toolbar{padding:0 10px}.lab-actions{gap:6px}.learn-studio-root .icon-text-button{padding:0 10px;font-size:12.5px}.editor-wrap{min-height:320px}.preview-frame{min-height:300px}.preview-status{display:none}.lesson-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lesson-footer span{font-size:13px}}@media (hover:none){.learn-studio-root .icon-text-button{height:var(--meokko-tap-target);min-height:var(--meokko-tap-target)}}@media (max-width:640px){.lesson-content{padding-inline:var(--page-inline)}.concept-box,.lesson-warning,.lesson-tip{margin-inline:calc(-1 * var(--page-inline));width:auto;padding-inline:var(--page-inline);box-shadow:none;border-inline:0;border-radius:0}.lesson-footer{grid-template-columns:minmax(0,1fr)}.lesson-footer button:last-child{grid-row:1}}