/* Cubroid Edu.Lab — Remind reference, adapted to the existing lesson platform.
   Text and real learning photographs remain separate; learning hooks and print flow are preserved. */
:root{
  --primary:#0878ad; --blue-ink:#0878ad; --azure:#075e83;
  --ink:#282c2b; --ink2:#555d58; --ink3:#626a64;
  --line:#deded8; --line-ui:#818981; --surface-2:#f5f4ef; --chalk:#f3f2ee;
  --photo-surface:#fafbfc; --photo-line:#e7e9ec;
  --font:"Source Sans 3","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --header:73px; --radius-pill:6px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px;
  --focus:#0878ad; --shadow-hover:none;
}
/* Course identity is an accent, not a tint on every content block. */
body[data-course="basic"],.learn-course[data-learning-course="basic"]{
  --course-ink:#1468ce; --course-tint:#fff5df; --course-photo:#fff8e9; --course-wash:#fffcf5; --course-line:#eee0c2;
}
body[data-course="advanced"],.learn-course[data-learning-course="advanced"]{
  --course-ink:#62506f; --course-tint:#f5efff; --course-photo:#f8f3ff; --course-wash:#fcf9ff; --course-line:#e7daf4;
}
body[data-course="ai"],.learn-course[data-learning-course="ai"]{
  --course-ink:#42614d; --course-tint:#edf9f1; --course-photo:#f0faf4; --course-wash:#f6fcf8; --course-line:#d6ebdd;
}
body[data-course],.learn-course[data-learning-course]{ --primary:var(--course-ink); --focus:var(--course-ink); --photo-surface:var(--course-photo); --photo-line:var(--course-line); --surface-2:var(--course-wash); --chalk:var(--course-photo); }
body[data-course]{ --blue-ink:var(--course-ink); --azure:var(--course-ink); }
html:lang(ko){ --font:"Source Sans 3","Paperlogy","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
body{ background:#fff; font-size:1.0625rem; }
h1,h2,h3{ font-weight:600; }
.btn,.btn.small,.btn.big{ min-height:44px; padding:10px 18px; border-radius:6px; box-shadow:none; font-size:.9375rem; font-weight:600; gap:12px; }
.btn-cube.c-blue{ --c:var(--primary); }
.btn-cube.c-white{ border-color:var(--line-ui); }
.btn:active,.tile:active{ transform:none; }

/* Compact navigation on a white canvas. */
.top{ border-bottom:1px solid #edf2f3; }
.top-in{ height:72px; gap:24px; }
.logo img{ width:210px; height:28px; max-width:none; }
.brand-nav{ display:flex; flex:1; justify-content:center; gap:26px; min-width:0; }
.brand-nav a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink2); font-size:.9375rem; font-weight:500; line-height:1.3; }
.brand-nav a:hover,.brand-nav a[aria-current]{ color:var(--primary); text-decoration:underline; text-underline-offset:7px; }
.classic-link{ min-height:36px; padding:0 4px; background:none; color:var(--primary); font-weight:500; }
.classic-link:hover{ background:none; text-decoration:underline; }
.top-right{ gap:14px; }
.lang select{ width:119px; min-height:36px; font-size:.8125rem; border-color:#9cabb2; border-radius:5px; }

/* Hero: original classroom photos with the user's three small pattern PNGs. */
.learn-start{ background:#fff; border-bottom:0; }
.orbit-hero{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; min-height:570px; padding-block:78px 88px; }
.hero-orbit{ position:absolute; z-index:-1; inset:0; width:100%; height:100%; pointer-events:none; }
.orbit-copy{ width:58%; max-width:660px; text-align:center; }
.orbit-brand{ margin:0 0 20px; color:var(--primary); font-size:.8125rem; font-weight:600; letter-spacing:.07em; }
.orbit-copy h1{ max-width:13em; margin:0 auto; color:var(--ink); font-size:clamp(2.4rem,4.1vw,3.7rem); font-weight:600; line-height:1.16; letter-spacing:-.03em; }
.orbit-lead{ max-width:29em; margin:22px auto 0; color:var(--ink2); font-size:1.0625rem; line-height:1.7; }
.orbit-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px; margin-top:24px; }
.orbit-resource{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--primary); font-size:.875rem; font-weight:500; text-decoration:underline; text-underline-offset:4px; }
.orbit-note{ max-width:31em; margin:18px auto 0; color:var(--ink2); font-size:.8125rem; line-height:1.6; }
.orbit-photos{ position:absolute; inset:0; pointer-events:none; }
.orbit-photo{ position:absolute; margin:0; overflow:hidden; background:#edf7f8; }
.orbit-photo img{ width:100%; height:100%; object-fit:cover; }
.orbit-photo-left{ inset-inline-start:1%; top:37%; width:17%; aspect-ratio:1/1.12; border-radius:43% 56% 44% 55% / 52% 40% 58% 45%; }
.orbit-photo-left img{ object-position:39% center; }
.orbit-photo-top{ inset-inline-end:1.5%; top:13%; width:18%; aspect-ratio:1.42; border-radius:56% 44% 41% 59% / 40% 55% 45% 60%; }
.orbit-photo-top img{ object-position:62% 36%; }
.orbit-photo-bottom{ inset-inline-end:6%; bottom:10%; width:19%; aspect-ratio:1.5; border-radius:61% 39% 59% 41% / 42% 48% 52% 58%; }
.orbit-photo-bottom img{ object-position:55% 45%; }
.hero-patterns{ position:absolute; inset:0; pointer-events:none; }
.hero-pattern{ position:absolute; width:50px; height:50px; object-fit:contain; }
.hero-pattern-gear{ inset-inline-start:14%; top:17%; }
.hero-pattern-sparkles{ inset-inline-end:22%; top:40px; }
.hero-pattern-cube{ inset-inline-end:2.5%; top:52.5%; }

/* Course entry points: three course identities on a white canvas. */
.learn-start-in{ padding-top:8px; padding-bottom:80px; }
.learn-heading{ margin-top:0; margin-bottom:22px; padding:0; border:0; align-items:center; scroll-margin-top:calc(var(--header) + 24px); }
.learn-heading h2{ color:var(--ink); font-size:1.75rem; font-weight:600; }
.learn-heading p{ font-size:.9375rem; }
.learn-courses{ gap:20px; }
.learn-courses .learn-course{ background:var(--course-tint); border:1px solid var(--course-line); border-radius:8px; box-shadow:none; overflow:hidden; }
.learn-courses .learn-course:hover{ transform:none; box-shadow:none; background:var(--course-tint); border-color:var(--course-ink); }
.learn-courses .learn-image{ display:flex; align-items:center; justify-content:center; height:200px; aspect-ratio:auto; padding:12px 20px 0; border:0; background:transparent; }
.learn-courses .learn-image img{ width:100%; height:100%; object-fit:contain; object-position:center; mix-blend-mode:normal; }
.learn-image>.learn-model-preview{ display:block; position:relative; flex:none; width:min(100%,260px); aspect-ratio:1.45; overflow:hidden; }
.learn-courses .learn-model-preview>img.thumb-fitted{ position:absolute; inset:auto; left:var(--thumb-left); top:var(--thumb-top); width:var(--thumb-width); height:auto; max-width:none; max-height:none; padding:0; object-fit:contain; }
.learn-app-summary{ display:flex; justify-content:center; align-items:center; gap:8px; min-height:40px; margin-top:10px; color:var(--ink2); font-size:.8125rem; font-weight:400; line-height:1.5; }
.learn-app-icons{ display:inline-flex; align-items:center; gap:6px; flex:none; }
.learn-app-icons img{ width:32px; height:32px; object-fit:contain; border-radius:4px; }
.learn-courses .learn-app-summary{ font-size:1rem; font-weight:600; line-height:1.5; gap:10px; }
.learn-courses .learn-course-main{ padding:20px 28px 26px; text-align:center; }
.learn-courses .learn-course strong{ font-size:1.5rem; font-weight:600; color:var(--ink); }
.learn-courses .learn-meta{ justify-content:center; gap:6px 14px; margin-top:10px; }
.learn-meta>span{ padding:0; border-radius:0; background:none; font-size:.8125rem; font-weight:400; }
.learn-courses .learn-desc{ margin:15px 0 22px; font-size:1rem; line-height:1.6; }
.learn-progress-title{ margin-top:auto; font-size:.8125rem; font-weight:400; }
.learn-progress-title b{ color:var(--ink2); font-size:.875rem; font-weight:600; }
.learn-courses .progress{ gap:5px; margin-top:6px; }
.learn-courses .progress .bar{ height:8px; border-radius:3px; background:var(--course-line); }
.learn-courses .progress .bar i{ background:var(--primary); }
.learn-courses .progress-label{ font-size:.75rem; text-align:start; font-weight:400; }
.learn-action{ align-self:center; gap:18px; min-height:44px; margin-top:20px; padding:10px 18px; border:1px solid var(--primary); border-radius:6px; background:var(--primary); color:#fff; font-size:.9375rem; font-weight:600; }
.learn-action>span:last-child{ font-size:.8125rem; font-weight:400; }
.learn-course:hover .learn-action{ background:var(--course-ink); border-color:var(--course-ink); color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* Real learning images and concise feature descriptions. */
.home-about{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:46px 68px; margin-top:96px; padding:0; }
.home-section-label{ color:var(--primary); font-size:.8125rem; font-weight:600; }
.home-about-copy h2{ max-width:15em; margin-bottom:24px; font-size:clamp(1.75rem,2.9vw,2.4rem); font-weight:600; line-height:1.35; }
.home-about-copy>p:last-child{ font-size:1rem; line-height:1.9; }
.about-visual{ position:relative; margin:0; min-width:0; }
.about-visual>img{ width:100%; aspect-ratio:1.35; height:auto; object-fit:cover; }
.about-photo-line{ position:absolute; inset:-5% -5% 5% -7%; border:2px solid #b77bb8; border-radius:50%; transform:rotate(-14deg); pointer-events:none; }
.home-features{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:14px 0 0; border-top:1px solid var(--line); }
.home-features li{ display:block; padding:24px 0 0; border:0; }
.home-features li>span{ display:block; margin-bottom:12px; color:var(--primary); font-size:.75rem; font-weight:600; }
.home-features h3{ margin-bottom:10px; font-size:1.125rem; font-weight:600; }
.home-features p{ font-size:.9375rem; line-height:1.7; }
.home-invite{ padding-block:50px; background:var(--primary); color:#fff; }
.home-invite-in{ display:flex; align-items:center; justify-content:space-between; gap:32px; }
.home-invite .home-section-label{ color:#e6f7ff; }
.home-invite h2{ margin:0 0 12px; max-width:24em; font-size:clamp(1.7rem,2.7vw,2.3rem); font-weight:600; }
.home-invite p:last-child{ max-width:46em; margin:0; color:#e6f7ff; font-size:1rem; }
.home-invite .btn{ flex:none; gap:28px; border:1px solid #fff; background:#fff; color:var(--primary); }

/* Course pages carry the same restrained geometry. */
.page-course .course-tabs{ padding-top:8px; }
.page-course .course-tabs-in{ gap:30px; }
.page-course .course-tab{ padding-block:17px; font-weight:500; font-size:1rem; }
.page-course .course-tab[aria-current="page"]{ color:var(--primary); border-bottom-color:var(--primary); }
.page-course .course-head{ padding-block:30px 46px; }
.page-course .course-head-grid{ padding:34px 38px; border:1px solid var(--course-line); border-radius:8px; background:var(--course-tint); }
.page-course .course-head h1{ color:var(--ink); font-size:clamp(1.9rem,3vw,2.7rem); font-weight:600; }
.page-course .course-head p{ color:var(--ink2); font-size:1.0625rem; }
.page-course .course-head-copy>.tag{ padding:0; background:none; color:var(--primary); font-weight:500; }
.page-course .course-app-visual{ padding:22px; border:0; border-radius:6px; background:#fff; box-shadow:none; }
.page-course .course-head-photo.course-app-visual{ padding:0; background:transparent; }
.page-course .course-head-photo.course-app-visual img{ height:auto; aspect-ratio:1.6; border-radius:0; }
.page-course .course-app-visual .app-get{ margin-top:16px; padding-top:16px; }
.page-course .course-app-basic .course-app-screen{ height:auto; }
.page-course .course-banner-progress .bar{ height:8px; border-radius:3px; background:var(--course-line); }
.page-course .course-banner-progress .bar i{ background:var(--primary); }
.course-list-heading h2{ color:var(--ink); font-size:1.65rem; font-weight:600; }
.course-list-heading>span{ background:var(--course-photo); color:var(--course-ink); }
.tile-grid{ gap:24px; }
.tile-grid:not(.ls-grid)>.tile,.page-course .ls-card{ border:1px solid var(--line); border-radius:8px; box-shadow:none; }
.tile-grid:not(.ls-grid)>.tile:hover,.page-course .ls-card:hover{ transform:none; border-color:var(--primary); box-shadow:none; }
.tile-grid:not(.ls-grid) .tile-img,.ls-card .tile-img{ aspect-ratio:1.45; background:var(--photo-surface); border-bottom:1px solid var(--photo-line); }
.tile-grid:not(.ls-grid) .tile-img img,.tile-grid:not(.ls-grid) .tile-img img[src$="/thumbnail.jpg"]{ object-fit:contain; padding:10px; }
.tile-grid>.tile-cutout{ background:#fff; }
.tile-grid .tile-cutout .tile-img{ background:var(--photo-surface); border-bottom:1px solid var(--photo-line); }
.tile-grid .tile-cutout .tile-img img{ object-fit:contain; padding:12px; }
/* Fit all visible alpha pixels, not the empty source canvas. Source files stay intact.
   Percentages include breathing room: 7% sides, 10% top and 6% bottom. */
.tile-grid:not(.ls-grid) .tile-img img.thumb-fitted{ inset:auto; left:var(--thumb-left); top:var(--thumb-top); width:var(--thumb-width); height:auto; max-width:none; max-height:none; padding:0; object-fit:contain; }
.tile-grid:not(.ls-grid)>.tile{ background:#fff; }
.tile-grid:not(.ls-grid) .tile>b{ padding:18px 18px 12px; min-height:85px; font-size:1.0625rem; font-weight:600; line-height:1.5; }
.tile-grid:not(.ls-grid) .ls-tags{ padding:0 18px 20px; min-height:66px; row-gap:8px; font-size:.8125rem; font-weight:400; }
.tile-grid:not(.ls-grid) .tile-img .cube.num,.tile-img .cube.num{ top:10px; left:auto; right:auto; inset-inline-start:10px; width:29px; height:29px; border:1px solid var(--course-ink); border-radius:4px; background:var(--course-ink); color:#fff; font-family:var(--font); font-weight:600; box-shadow:none; text-shadow:none; }
.tile .check{ top:10px; inset-inline-end:10px; width:29px; height:29px; border-radius:3px; }
.tile-grid:not(.ls-grid)>.tile.is-done{ border-color:var(--course-ink); box-shadow:none; }
.level-bars i{ height:5px; }
.level-bars i.on{ background:var(--course-ink,var(--accent)); }

/* Reading and activity pages: keep authentic diagrams, code blocks and interactions. */
.m-cover{ gap:28px 40px; padding-top:14px; }
.m-title-row{ align-items:flex-start; }
.m-title-row h1{ color:var(--ink); font-weight:600; line-height:1.3; }
.m-cover-img{ border:1px solid var(--photo-line); border-radius:6px; background:#fff; }
.m-cover-media{ position:relative; aspect-ratio:1.45; overflow:hidden; background:var(--photo-surface); }
.m-cover-media>img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.m-cover-media>img.thumb-fitted{ inset:auto; left:var(--thumb-left); top:var(--thumb-top); width:var(--thumb-width); height:auto; max-width:none; max-height:none; }
.m-cover-img figcaption{ padding:12px 16px; border-top:1px solid var(--photo-line); color:var(--ink); font-weight:700; text-align:center; }
.blk-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.mission-brief{ padding:20px 22px; border:1px solid var(--course-line); border-radius:6px; background:var(--course-wash); }
.mission-brief h2{ color:var(--primary); font-weight:600; }
.mission-brief .mission-brief-goal{ color:var(--ink); font-size:1.125rem; font-weight:500; }
.mission-brief p{ font-size:1rem; }
.lead{ font-size:1.125rem; }
.panel>h2,.panel-head>h2{ font-weight:600; color:var(--ink); }
.panel>h2 .cube.sm,.panel-head>h2 .cube.sm,.m-title-row>.cube.num,.ls-step>.cube{ background:var(--course-tint); color:var(--primary); border:1px solid var(--course-line); border-radius:3px; background-image:none; box-shadow:none; text-shadow:none; font-family:var(--font); font-weight:600; }
.panel>h2 .cube.sm,.panel-head>h2 .cube.sm{ --s:36px; font-size:1.0625rem; }
.m-title-row>.cube.num{ --s:44px; margin-top:5px; font-size:1.25rem; }
.page-lesson .lesson-sec:not(.finish){ border-inline-start:0; padding-inline-start:0; }
.page-lesson .lesson-sec:not(.finish)>h2 .cube.sm{ margin-inline-start:0; outline:0; }
.stage{ font-weight:500; border-radius:2px; }
.stage .cube,.stage .cube.c-yellow{ border-radius:2px; background:var(--course-photo); color:var(--primary); font-weight:600; }
.stage.is-active{ background:var(--course-tint); border-color:var(--course-line); color:var(--primary); }
.stage.is-active .cube{ background:var(--primary); color:#fff; }
.prep-item{ border:1px solid var(--course-line); border-radius:6px; padding:10px 20px 20px; background:var(--course-wash); }
.prep-item>summary{ color:var(--ink); font-weight:600; }
.ls-needs li{ background:var(--course-photo); border-radius:2px; font-weight:400; }
.app-get{ border:1px solid var(--line); border-radius:6px; box-shadow:none; }
.app-name{ font-weight:600; }
.app-links a{ min-height:44px; border-radius:6px; font-weight:500; color:var(--primary); }
.ls-step-body h3,.ls-h{ font-weight:600; }
.ls-step{ margin-block:28px; }
.ls-gallery figure,.ls-col,.ls-tile,.ls-block,.ls-cards li,.ls-pairs li,.blocks li{ border-radius:6px; box-shadow:none; }
.ls-quiz{ padding:22px; border:1px solid var(--course-line); border-radius:6px; background:var(--course-wash); }
.ls-q{ font-weight:500; }
.ls-q>span{ color:var(--primary); background:#fff; }
.ls-tip{ background:#fff6df; font-weight:500; border-radius:6px; }
.steps img,.screen,.solution{ border-radius:6px; }
.step-no{ border-radius:3px; background:var(--course-ink); color:#fff; }
.steps li.has-no img{ border:1px solid var(--line); }
.task{ border-radius:6px; background:var(--course-wash); font-weight:500; }
.thinking{ background:#f3fbf4; }
.ls-a{ background:#effaf1; }
.ls-code,.ls-appmenu{ background:var(--course-wash); }
.ls-table th{ background:#4e5753; }
/* PDF-to-web activities: real text, readable code and original assembly photos. */
.ls-prompt{ margin:20px 0; padding:16px 20px; border-inline-start:3px solid var(--course-ink); background:var(--course-wash); border-radius:0 6px 6px 0; }
.ls-prompt figcaption,.ls-code-example>figcaption{ margin-bottom:8px; font-size:.8125rem; font-weight:600; color:var(--ink2); }
.ls-prompt blockquote{ margin:0; font-weight:500; line-height:1.8; overflow-wrap:anywhere; }
.ls-code-example{ margin:20px 0; min-width:0; }
.lesson-vibe .ls-code:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }
.ls-workflow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; list-style:none; margin:24px 0; padding:0; }
.ls-workflow li{ display:flex; align-items:flex-start; gap:12px; padding-block:14px; border-top:2px solid var(--course-line); min-width:0; }
.ls-flow-no{ flex:none; color:var(--course-ink); font-size:.875rem; font-weight:600; }
.ls-workflow b{ display:block; margin-bottom:6px; font-size:1rem; font-weight:600; }
.ls-workflow p{ margin:0; color:var(--ink2); font-size:.9375rem; line-height:1.7; }
.ls-table-wrap{ margin:22px 0; min-width:0; }
.ls-table-wrap .ls-table{ table-layout:fixed; margin:0; font-size:.9375rem; overflow:visible; border-collapse:collapse; }
.ls-table-wrap caption{ text-align:start; margin-bottom:10px; color:var(--ink2); font-weight:500; }
.ls-table-wrap th,.ls-table-wrap td{ padding:14px 16px; line-height:1.7; overflow-wrap:anywhere; }
.ls-table-wrap thead th{ background:var(--course-wash); color:var(--ink); font-weight:600; border-bottom:1px solid var(--course-line); }
.ls-table-wrap th:first-child{ width:26%; }
.ls-table-wrap tbody th{ background:#fff; color:var(--ink); font-weight:500; text-align:start; border-top:1px solid var(--line); }
.ls-disclosure{ margin:24px 0; border:1px solid var(--line); border-radius:6px; background:#fff; }
.ls-disclosure>summary{ padding:15px 18px; cursor:pointer; font-weight:500; color:var(--course-ink); }
.ls-disclosure>div{ padding:0 18px 18px; }
.ls-disclosure>summary:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }
.lesson-vibe .ls-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.lesson-vibe .ls-gallery figure{ max-width:none; padding:0 0 14px; overflow:hidden; }
.lesson-vibe .ls-gallery img{ height:auto; aspect-ratio:4/3; object-fit:contain; }
.lesson-vibe .ls-gallery figcaption{ padding-inline:16px; text-align:start; font-weight:500; }
.lesson-vibe .ls-gallery .ls-zoom span{ padding-inline:16px; font-size:.8125rem; font-weight:400; }
.lesson-vibe .ls-fig figcaption{ margin-top:10px; color:var(--ink2); font-size:.9375rem; }
.lesson-vibe .ls-screen .ls-zoom{ width:100%; max-width:var(--screen-width,600px); margin-inline:auto; }
.lesson-vibe .ls-screen img{ display:block; width:100%; height:auto; max-height:none; }
.lesson-vibe .ls-screen .ls-zoom span{ font-size:.8125rem; font-weight:400; }
.lesson-vibe .ls-screen figcaption{ text-align:center; }
.lesson-vibe .ls-pairs img{ max-height:130px; }
.lesson-vibe .ls-disclosure .ls-fig img{ max-height:420px; }
/* New PDF lessons share the same activity layout as Vibe Coding. */
.lesson-car .ls-code:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }
.lesson-car .ls-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.lesson-car .ls-gallery figure{ max-width:none; padding:0 0 14px; overflow:hidden; }
.lesson-car .ls-gallery img{ height:auto; aspect-ratio:4/3; object-fit:contain; }
.lesson-car .ls-gallery figcaption{ padding-inline:16px; text-align:start; font-weight:500; }
.lesson-car .ls-gallery .ls-zoom span{ padding-inline:16px; font-size:.8125rem; font-weight:400; }
.lesson-car .ls-fig figcaption{ margin-top:10px; color:var(--ink2); font-size:.9375rem; }
.lesson-car .ls-fig>.ls-zoom{ width:100%; max-width:640px; margin-inline:auto; }
.lesson-car .ls-fig>.ls-zoom img{ display:block; max-height:none; }
.lesson-car .ls-fig figcaption{ text-align:center; }
@media(max-width:700px){
  .ls-workflow{ grid-template-columns:minmax(0,1fr); gap:0; }
  .ls-workflow li{ padding-block:12px; }
  .ls-table-wrap th,.ls-table-wrap td{ padding:10px 9px; }
  .ls-table-wrap th:first-child{ width:30%; }
  .lesson-vibe .ls-gallery{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .lesson-car .ls-gallery{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .ls-disclosure>summary{ padding:14px; }
  .ls-disclosure>div{ padding-inline:12px; }
}
@media print{ .ls-disclosure>div{ display:block !important; } .ls-prompt,.ls-workflow li{ break-inside:avoid; } .lesson-vibe .ls-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lesson-vibe .ls-step,.lesson-vibe .ls-gallery{ break-inside:auto; } .lesson-vibe .ls-gallery figure{ break-inside:avoid; } }
@media print{ .lesson-car .ls-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lesson-car .ls-gallery figure{ break-inside:avoid; } }
.finish.panel{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:20px 32px; padding:22px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:#fff; box-shadow:none; }
.finish-record{ min-width:0; }
.finish-record>p{ margin:2px 0 0; color:var(--ink2); font-size:.8125rem; line-height:1.6; }
.completion-toggle{ display:inline-flex; align-items:center; gap:10px; min-height:44px; max-width:100%; padding:8px 0; border:0; border-radius:4px; background:none; color:var(--ink); font-family:var(--font); font-size:1rem; font-weight:500; line-height:1.5; text-align:start; cursor:pointer; }
.completion-box{ display:inline-flex; flex:none; align-items:center; justify-content:center; width:21px; height:21px; border:1.5px solid var(--line-ui); border-radius:4px; background:#fff; }
.completion-box svg{ visibility:hidden; }
.completion-toggle:hover .completion-box{ border-color:var(--primary); }
.completion-toggle:focus-visible{ outline:2px solid var(--focus); outline-offset:5px; }
.completion-toggle.is-done{ color:var(--green-ink); }
.completion-toggle.is-done .completion-box{ border-color:var(--green-ink); background:var(--green-ink); color:#fff; }
.completion-toggle.is-done .completion-box svg{ visibility:visible; }
.completion-control [hidden]{ display:none !important; }
.completion-control .completion-toggle{ padding:10px 16px; background:#00864a; color:#fff; gap:8px; }
.completion-result{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; min-height:44px; }
.completion-status{ display:inline-flex; gap:8px; align-items:center; color:#00864a; font-weight:600; }
.completion-undo{ min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--ink2); font:inherit; font-size:.8125rem; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.completion-undo:hover{ color:var(--ink); }
.completion-undo:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; }
.tile-grid:not(.ls-grid)>.tile .check{ width:auto; height:auto; min-height:28px; max-width:calc(100% - 64px); padding:5px 9px; gap:5px; border:0; border-radius:4px; background:#00864a; color:#fff; font-size:.75rem; font-weight:600; line-height:1.4; box-shadow:none; pointer-events:none; text-align:start; }
.finish-nav{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px 24px; min-width:0; }
.finish-link{ display:inline-flex; align-items:center; min-height:44px; padding:8px 0; color:var(--ink2); font-size:.9375rem; font-weight:500; text-decoration:underline; text-decoration-color:var(--line-ui); text-underline-offset:4px; }
.finish-link:hover{ color:var(--primary); text-decoration-color:currentColor; }
.finish-nav .finish-next{ min-width:0; min-height:44px; white-space:normal; text-align:center; }
@media(max-width:599px){ .finish.panel{ grid-template-columns:minmax(0,1fr); gap:14px; padding-block:20px; } .finish-nav{ gap:12px 20px; } }
.finish h2{ font-weight:600; }
.finish .btn{ min-width:120px; }
.pos-btn{ border-radius:6px; }
.notice{ border:1px solid #aacbd9; border-radius:8px; padding:30px; }
.notice h2{ color:var(--ink); font-weight:600; }
.notice-btns .btn{ flex:1 1 150px; }
.foot{ margin-top:0; padding-block:44px; border-top:1px solid var(--line); background:#fff; color:var(--ink2); }
.page-course .foot,.page-mission .foot{ margin-top:72px; }
.foot-brand{ display:inline-block; margin-bottom:20px; }
.foot-brand img{ width:190px; height:auto; }
.foot-info b{ font-weight:600; }
.foot-menu summary{ min-height:40px; border-width:1px; border-radius:3px; font-size:.875rem; font-weight:500; }
.foot-icon{ border-radius:3px; }

@media (min-width:1100px){
  /* Header course links are already visible at this breakpoint. */
  .page-course .course-tabs{ display:none; }
  .stage{ padding:10px 12px; }
  .stage.is-active{ box-shadow:none; border-inline-start:2px solid var(--primary); border-radius:0; }
  .page-lesson main>.prep{ gap:24px; }
}
@media (max-width:1099px){
  .brand-nav{ display:none; }
  .top-in{ gap:16px; }
  .orbit-hero{ min-height:530px; padding-block:72px 80px; }
  .orbit-copy{ width:61%; }
  .orbit-copy h1{ font-size:clamp(2.3rem,4.4vw,3.2rem); }
  .orbit-photo-left{ width:16%; inset-inline-start:.8%; }
  .orbit-photo-bottom{ width:17%; inset-inline-end:3%; }
  .orbit-lead{ font-size:1rem; }
  .about-photo-line{ inset:-2% -1% 4%; transform:rotate(-6deg); }
}
@media (max-width:899px){
  .learn-courses{ gap:14px; }
  .learn-courses .learn-course-main{ padding:20px; }
  .home-about{ gap:32px; }
  .home-invite-in{ gap:24px; }
  .page-course .course-head-grid{ padding:26px; }
  .page-course .course-head-grid.has-app-visual{ gap:24px; }
}
@media (min-width:720px) and (max-width:899px){
  .learn-courses{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .learn-courses .learn-course strong{ font-size:1.25rem; }
  .learn-courses .learn-desc{ font-size:.9375rem; }
}
@media (max-width:719px){
  :root{ --header:65px; }
  .top-in{ height:64px; gap:10px; }
  .logo img{ width:174px; height:auto; }
  .top-right{ gap:9px; }
  .classic-link{ display:none; }
  .lang select{ width:109px; min-height:34px; }
  .orbit-hero{ min-height:0; padding-block:46px 195px; }
  .orbit-copy{ width:100%; max-width:530px; }
  .orbit-copy h1{ max-width:13em; font-size:clamp(2rem,7.5vw,2.7rem); line-height:1.25; }
  .orbit-brand{ margin-bottom:16px; }
  .orbit-lead{ max-width:27em; margin-top:18px; font-size:1rem; }
  .orbit-note{ max-width:29em; font-size:.8125rem; }
  .orbit-actions{ gap:5px 18px; margin-top:20px; }
  .hero-orbit{ top:auto; bottom:4px; height:220px; opacity:.75; }
  .orbit-photo-left{ top:auto; bottom:35px; inset-inline-start:4%; width:28%; height:126px; }
  .orbit-photo-top{ top:auto; bottom:26px; inset-inline-end:4%; width:28%; height:115px; }
  .orbit-photo-bottom{ bottom:12px; inset-inline-end:35%; width:27%; height:114px; }
  .hero-pattern{ top:auto; width:30px; height:30px; }
  .hero-pattern-gear{ inset-inline-start:8%; bottom:164px; width:28px; height:28px; }
  .hero-pattern-sparkles{ inset-inline-end:8%; bottom:149px; }
  .hero-pattern-cube{ inset-inline-start:46%; inset-inline-end:auto; bottom:137px; }
  .learn-start-in{ padding-top:10px; padding-bottom:54px; }
  .learn-heading{ margin-bottom:18px; }
  .learn-heading h2{ font-size:1.45rem; }
  .learn-heading p{ font-size:.875rem; }
  .learn-courses{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .learn-courses .learn-image{ height:200px; aspect-ratio:auto; padding:12px 20px 0; }
  .learn-courses .learn-course-main{ padding:16px 24px 24px; }
  .learn-courses .learn-desc{ margin-bottom:18px; }
  .home-about{ grid-template-columns:minmax(0,1fr); gap:30px; margin-top:58px; }
  .home-about-copy h2{ max-width:18em; font-size:1.8rem; }
  .home-about-copy>p:last-child{ font-size:.9375rem; line-height:1.85; }
  .about-visual{ margin-inline:10px; }
  .about-photo-line{ inset:-2% -1% 4%; transform:rotate(-6deg); }
  .home-features{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:4px; }
  .home-features li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:20px 0; border-bottom:1px solid var(--line); }
  .home-features li>span{ margin-top:4px; }
  .home-invite{ padding-block:34px; }
  .home-invite-in{ flex-direction:column; align-items:flex-start; gap:24px; }
  .home-invite h2{ font-size:1.7rem; line-height:1.4; }
  .home-invite p:last-child{ font-size:.9375rem; }
  .page-course .course-head-grid{ padding:24px 20px; border-radius:8px; }
  .page-course .course-head h1{ font-size:1.9rem; }
  .page-course .course-head p{ font-size:1rem; }
  .tile-grid:not(.ls-grid){ gap:16px; }
  .tile-grid:not(.ls-grid)>.tile{ border-radius:8px; }
  .tile-grid:not(.ls-grid) .tile>b{ padding:14px 12px 12px; min-height:80px; font-size:.9375rem; }
  .tile-grid:not(.ls-grid) .ls-tags{ padding:0 12px 14px; min-height:64px; font-size:.75rem; }
  .tile-grid:not(.ls-grid) .tile-img .cube.num{ inset-inline-start:8px; top:8px; width:26px; height:26px; }
  .tile .check{ width:26px; height:26px; }
  .m-cover{ gap:24px; }
  .lead{ font-size:1rem; }
  .prep-item{ padding:8px 16px 18px; }
  .app-get{ padding:16px; }
  .app-name{ font-size:1rem; }
  .finish .btn{ min-width:0; }
  .foot{ padding-block:30px; }
}
@media print{
  :root{ --font:"Source Sans 3","Noto Sans",sans-serif; }
  .brand-nav,.orbit-actions,.home-invite,.hero-orbit,.orbit-photos,.hero-patterns{ display:none; }
  .orbit-hero{ padding-block:20px; min-height:0; }
  .orbit-copy{ width:100%; }
  .page-lesson .lesson-sec:not(.finish){ padding-inline-start:0; }
  .prep-item{ background:#fff; border:1px solid #bbb; }
}