.os-lesson-page{--os-ink:#071c35;--os-blue:#1768e5;--os-cyan:#06a9ca;--os-gold:#d69f09;--os-line:#cfdced;--os-soft:#f3f7fc;--os-mint:#e9f8f3;background:#eef3f9;color:var(--os-ink)}
.lesson-reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1100;background:transparent}.lesson-reading-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--os-blue),var(--os-cyan),#f1ba22)}
.os-lesson-page .os-layout{align-items:start}.os-lesson-page .os-sidebar{position:sticky;top:76px;height:calc(100vh - 76px);overflow:auto}.os-lesson-page .os-main{min-width:0;padding:24px 30px 60px}
.lesson-sidebar-status{margin:22px 14px;padding:14px;border:1px solid #b9d0ef;border-radius:13px;background:#edf5ff}.lesson-sidebar-status span{display:block;font-size:.7rem;font-weight:900;letter-spacing:.09em;color:#47627f}.lesson-sidebar-status strong{display:block;margin-top:5px;color:var(--os-blue)}
.lesson-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:24px;padding:42px;border-radius:26px;background:linear-gradient(135deg,#071b32,#0b2d51);color:white;box-shadow:0 20px 45px rgba(7,28,53,.12)}.lesson-breadcrumb{display:flex;gap:9px;align-items:center;margin-bottom:20px;color:#b8cee8}.lesson-breadcrumb a{color:#77cdec}.lesson-hero .os-label{color:#ffc834}.lesson-hero h1{max-width:880px;margin:10px 0 14px;font-family:Georgia,serif;font-size:clamp(2.25rem,4.8vw,4.35rem);line-height:1.03}.lesson-hero>div>p{max-width:850px;color:#d2e1f1;font-size:1.12rem;line-height:1.75}.lesson-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.lesson-meta span{padding:8px 12px;border:1px solid #41607f;border-radius:99px;background:#102f50;font-size:.82rem;font-weight:800}.lesson-goal-card{align-self:stretch;padding:25px;border:1px solid #3a6388;border-radius:20px;background:rgba(10,42,73,.92)}.lesson-goal-card>span{font-size:.75rem;font-weight:900;letter-spacing:.11em;color:#54d3eb}.lesson-goal-card h2{margin:10px 0;font-size:1.35rem}.lesson-goal-card ul{margin:14px 0 0;padding-left:20px}.lesson-goal-card li{margin:9px 0;color:#e2edf8;line-height:1.45}
.lesson-jump-bar{position:sticky;top:70px;z-index:20;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;padding:10px;border:1px solid var(--os-line);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 8px 25px rgba(7,28,53,.07)}.lesson-jump-bar a{padding:9px 14px;border-radius:9px;color:#294665;font-size:.83rem;font-weight:900;text-decoration:none}.lesson-jump-bar a:hover{background:#e7f0ff;color:var(--os-blue)}
.lesson-section{scroll-margin-top:145px;margin:20px 0;padding:32px;border:1px solid var(--os-line);border-radius:22px;background:white;box-shadow:0 8px 24px rgba(19,48,82,.045)}.lesson-heading>span{display:block;color:#9a7100;font-size:.77rem;font-weight:950;letter-spacing:.1em}.lesson-heading h2{margin:8px 0;font-size:clamp(1.55rem,2.7vw,2.3rem);line-height:1.17}.lesson-heading p{margin:0;max-width:900px;color:#58708b;line-height:1.7}
.definition-grid,.service-grid,.types-grid,.question-bank-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.definition-grid article,.service-grid article,.types-grid article,.question-bank-grid article{padding:22px;border:1px solid var(--os-line);border-radius:16px;background:#fbfdff}.concept-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e5f0ff;color:var(--os-blue);font-weight:950}.definition-grid h3,.service-grid h3,.types-grid h3,.question-bank-grid h3{margin:13px 0 7px}.definition-grid p,.service-grid p,.types-grid p,.question-bank-grid li{color:#4e6782;line-height:1.62}.key-idea,.teacher-note{margin-top:20px;padding:18px 20px;border-left:5px solid var(--os-blue);border-radius:0 13px 13px 0;background:#edf5ff}.teacher-note{border-left-color:#e5ae15;background:#fff7dd}.key-idea p,.teacher-note p{margin:6px 0 0;color:#405b78;line-height:1.6}
.layer-stack{display:grid;gap:8px;max-width:900px;margin:25px auto}.layer-stack article{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:16px 22px;border-radius:13px;background:#eef4fb}.layer-stack article:nth-child(2){background:#e5f2ff}.layer-stack article:nth-child(3){background:#fff2c8}.layer-stack article:nth-child(4){background:#0b2947;color:white}.layer-stack article:nth-child(5){background:#071b32;color:white}.layer-stack span{font-size:.72rem;font-weight:950;letter-spacing:.08em}.layer-stack p{margin:0;line-height:1.55}.flow-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px 0;padding:20px;border-radius:16px;background:#071b32;color:white}.flow-strip span{padding:9px 13px;border-radius:9px;background:#123858;font-weight:800}.flow-strip b{color:#55d8ef}
.mode-comparison{display:grid;grid-template-columns:1fr 70px 1fr;gap:15px;align-items:stretch;margin-top:24px}.mode-card{padding:24px;border:1px solid var(--os-line);border-radius:18px}.mode-card.user{background:#f0f6ff}.mode-card.kernel{background:#0b2947;color:white}.mode-card h3{margin:8px 0}.mode-card ul{padding-left:20px;line-height:1.7}.mode-gate{display:grid;place-items:center;text-align:center;color:#876300;font-weight:950}.mode-gate span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#ffe59b}
.tracer{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:20px;margin-top:24px}.tracer-controls{padding:20px;border-radius:17px;background:#f1f6fc}.tracer-controls label{display:block;margin-bottom:7px;font-size:.76rem;font-weight:950;letter-spacing:.08em}.tracer-controls select{width:100%;padding:12px;border:1px solid #adc3de;border-radius:10px;background:white;color:var(--os-ink);font:inherit}.trace-scenario{margin:14px 0;padding:15px;border-radius:12px;background:white;color:#48617c;line-height:1.55}.trace-actions{display:flex;gap:8px}.trace-actions button,.classifier-options button,.check-options button,.completion-panel button{border:1px solid #9eb9da;border-radius:10px;background:white;color:var(--os-ink);font:inherit;font-weight:850;cursor:pointer}.trace-actions button{flex:1;padding:11px}.trace-actions button.primary{border-color:var(--os-blue);background:var(--os-blue);color:white}.trace-stage{min-height:385px;padding:24px;border-radius:17px;background:#071b32;color:white}.trace-status{display:flex;justify-content:space-between;gap:10px;align-items:center}.trace-status span{color:#82dff0;font-size:.78rem;font-weight:950;letter-spacing:.08em}.trace-mode{padding:7px 11px;border:1px solid #3d6387;border-radius:99px;color:#cfe2f3!important}.trace-mode.kernel-mode{border-color:#edbc31;background:#3f360d;color:#ffe892!important}.trace-path{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:21px 0}.trace-node{padding:11px 6px;border:1px solid #365676;border-radius:9px;color:#829ab3;text-align:center;font-size:.75rem;font-weight:900}.trace-node.is-past{border-color:#1b7d91;background:#0c3f55;color:#8be8f8}.trace-node.is-current{border-color:#f1bd2d;background:#4a3b0c;color:#ffe68f;box-shadow:0 0 0 3px rgba(241,189,45,.14)}.trace-detail{padding:20px;border:1px solid #234768;border-radius:14px;background:#0d2b48}.trace-detail h3{margin:4px 0 8px}.trace-detail p{margin:0;color:#c8d9e9;line-height:1.65}.trace-detail code{color:#8feafb}.trace-note{margin-top:13px;color:#8ea8c1;font-size:.84rem;line-height:1.5}
.event-table{width:100%;border-collapse:collapse;margin-top:22px}.event-table th,.event-table td{padding:14px;border:1px solid var(--os-line);text-align:left;vertical-align:top}.event-table th{background:#eaf2fc}.event-table td{color:#45607c;line-height:1.5}.event-table code{color:#0b5cb8}.classifier{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:18px;margin-top:23px}.classifier-case,.classifier-result{padding:22px;border-radius:16px}.classifier-case{background:#eef5ff}.classifier-case h3{margin:5px 0 8px}.classifier-case p{color:#4b6682;line-height:1.6}.classifier-options{display:grid;gap:9px}.classifier-options button{padding:13px;text-align:left}.classifier-options button:hover,.classifier-options button.is-selected{border-color:var(--os-blue);background:#e7f0ff;color:#0a55bb}.classifier-result{display:grid;align-content:center;border:1px solid var(--os-line);background:#fbfdff}.classifier-result.correct{border-color:#6bc6a8;background:#edf9f4}.classifier-result.wrong{border-color:#e8ad9f;background:#fff2ef}.classifier-result span{font-size:.73rem;font-weight:950;letter-spacing:.09em}.classifier-result h3{margin:8px 0}.classifier-result p{margin:0;color:#47617d;line-height:1.65}
.boot-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:24px}.boot-flow article{position:relative;padding:18px;border:1px solid var(--os-line);border-radius:14px;background:#f7faff}.boot-flow article:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;z-index:2;color:var(--os-blue);font-weight:950}.boot-flow b{display:block;color:var(--os-blue);font-size:.75rem}.boot-flow h3{margin:8px 0;font-size:1rem}.boot-flow p{margin:0;color:#526b85;font-size:.86rem;line-height:1.5}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service-grid article span{font-size:1.6rem}.service-grid article p{margin-bottom:0}.types-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.types-grid article{border-top:4px solid #8cbcf5}.types-grid strong{display:inline-block;margin-top:8px;color:#8b6800;font-size:.76rem}
.concept-check-list{display:grid;gap:15px;margin-top:24px}.concept-check{padding:20px;border:1px solid var(--os-line);border-radius:15px;background:#fbfdff}.concept-check h3{margin:0 0 15px;line-height:1.45}.check-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.check-options button{padding:13px;text-align:left;line-height:1.4}.check-options button:hover{border-color:var(--os-blue);background:#eef5ff}.check-options button.correct{border-color:#42ad86;background:#e6f8f0;color:#08744f}.check-options button.wrong{border-color:#e28c7b;background:#fff0ed;color:#a52b1c}.check-feedback{min-height:26px;margin:12px 0 0;color:#4a627d;line-height:1.55}.check-feedback strong{color:var(--os-ink)}.check-score{margin-top:18px;padding:15px;border-radius:12px;background:#0b2947;color:white;font-weight:900;text-align:center}
.question-bank-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.question-bank-grid article>span{font-size:.74rem;font-weight:950;letter-spacing:.09em;color:#9a7100}.question-bank-grid ol{padding-left:21px}.question-bank-grid li{margin:10px 0}.answer-framework{margin-top:18px;border:1px solid #b9cce4;border-radius:14px;background:#f7faff}.answer-framework summary{padding:17px;cursor:pointer;font-weight:900}.answer-framework>div{padding:0 20px 20px;color:#455f7a;line-height:1.65}
.summary-section{display:grid;grid-template-columns:1.35fr .65fr;gap:25px;background:linear-gradient(135deg,#fafdff,#e8f2ff)}.summary-section ul{padding-left:22px;line-height:1.75}.completion-panel{padding:22px;border-radius:17px;background:#071b32;color:white}.completion-panel>span{color:#5bd8ed;font-size:.74rem;font-weight:950;letter-spacing:.09em}.completion-panel p{color:#cbddeb;line-height:1.55}.completion-panel button{width:100%;padding:13px;border-color:#f1bd2d;background:#f1bd2d}.completion-panel button.is-complete{border-color:#5fd1a9;background:#39b989;color:#05291f}.completion-panel small{display:block;margin-top:10px;color:#94abc1}.os-topic-navigation{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.os-topic-navigation a{padding:14px 18px;border:1px solid #aac1dd;border-radius:12px;background:white;color:#104e98;font-weight:900;text-decoration:none}.os-topic-navigation a:last-child{border-color:var(--os-blue);background:var(--os-blue);color:white}
.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}
@media(max-width:1100px){.lesson-hero{grid-template-columns:1fr}.service-grid,.types-grid{grid-template-columns:repeat(2,1fr)}.question-bank-grid{grid-template-columns:1fr}.boot-flow{grid-template-columns:1fr 1fr}.boot-flow article:not(:last-child)::after{display:none}}
@media(max-width:820px){.os-lesson-page .os-main{padding:18px 14px 45px}.lesson-hero{padding:27px 22px}.lesson-jump-bar{top:60px;overflow:auto;flex-wrap:nowrap}.lesson-section{padding:23px 18px}.definition-grid,.service-grid,.types-grid,.mode-comparison,.tracer,.classifier,.summary-section{grid-template-columns:1fr}.mode-gate{padding:5px}.trace-path{grid-template-columns:repeat(2,1fr)}.check-options{grid-template-columns:1fr}.boot-flow{grid-template-columns:1fr}.os-topic-navigation{flex-direction:column}.os-topic-navigation a{text-align:center}.layer-stack article{grid-template-columns:1fr;gap:6px}}

/* =========================================================
   OS LESSON — FINAL MOBILE LAYOUT
   ========================================================= */

@media (max-width: 768px) {

    body.os-page.os-lesson-page {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.os-lesson-page > .os-sidebar-toggle {
        display: block !important;
        position: sticky !important;
        top: 64px !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }

    body.os-lesson-page > .os-layout {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.os-lesson-page > .os-layout > .os-sidebar {
        position: fixed !important;

        top: 108px !important;
        bottom: 0 !important;
        left: 0 !important;

        width: min(88vw, 320px) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        overflow-y: auto !important;

        transform: translateX(-105%) !important;

        z-index: 1200 !important;
    }

    body.os-lesson-page > .os-layout > .os-sidebar.is-open {
        transform: translateX(0) !important;
    }

    body.os-lesson-page > .os-layout > .os-main {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding:
            15px
            12px
            35px !important;

        top: auto !important;
        left: auto !important;

        clear: both !important;
    }

    body.os-lesson-page
    > .os-layout
    > .os-main
    > .lesson-hero {
        margin-top: 0 !important;
    }
}