/* Public landing only: no dashboard, editor or lesson selectors are changed. */
.public-site {
    background: #080e17;
    --ph-ink: #f3f6fa;
    --ph-muted: #a3b4c6;
    --ph-line: rgba(160, 193, 228, .17);
}
.public-site::before { background: radial-gradient(ellipse at 80% 5%, #17375d50, transparent 42%); }
.public-site .site-shell { max-width: 1440px; padding-inline: 48px; }
.public-site .site-header { gap: 24px; height: 92px; }
.public-site .brand { width: 190px; flex-shrink: 0; }
.public-site .main-nav a { font-size: .82rem; padding: 10px; }
.public-site .auth-nav { white-space: nowrap; gap: 16px; }
.public-site .auth-signup { padding: 11px 14px; }
.public-site .language-switcher form { margin: 0; }
.public-site .site-footer { margin-top: 0; padding: 32px 0; }
.public-site .site-footer nav { align-items: center; }
.public-site a:focus-visible,
.public-site summary:focus-visible,
.public-site button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; }
.public-home { isolation: isolate; color: var(--ph-ink); }
.public-home h1, .public-home h2, .public-home h3 { text-wrap: balance; }
.public-home h2 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.15; letter-spacing: -.045em; margin: 16px 0 24px; }
.public-home h3 { letter-spacing: -.025em; }
.public-home h2 em { font-style: normal; color: #92c6f4; }
.public-home p { line-height: 1.75; }
.public-home pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-home code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.ph-section { padding-block: 88px; border-top: 1px solid var(--ph-line); scroll-margin-top: 24px; }
.ph-kicker { display: flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; color: #8cbcf0; margin: 0; }
.ph-signal { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 16px #ffd43b90; }
.ph-section-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 80px; align-items: end; margin-bottom: 48px; }
.ph-section-intro .ph-kicker { grid-column: 1 / -1; }
.ph-section-intro h2 { margin-bottom: 0; }
.ph-section-intro > p:last-child { margin: 0; max-width: 500px; color: var(--ph-muted); font-size: .96rem; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.ph-actions .button { min-height: 52px; padding: 15px 24px; border-radius: 9px; }
.ph-actions .button span { font-size: 1.15rem; }
.ph-text-link { display: inline-flex; gap: 14px; align-items: center; font-size: .86rem; font-weight: 700; line-height: 1.6; color: #d5e8f8; }
.ph-text-link:hover { color: var(--yellow); }
.public-home .ph-caption { color: #98a9bd; font-size: .74rem; line-height: 1.65; margin: 24px 0 0; }
.ph-hero { position: relative; display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; min-height: 690px; gap: 30px; padding-block: 70px; }
.ph-hero-copy { position: relative; z-index: 2; }
.ph-hero h1 { font-size: clamp(2.8rem, 4.5vw, 4.45rem); font-weight: 740; line-height: 1.06; letter-spacing: -.06em; margin: 26px 0; max-width: 680px; }
.ph-hero h1 > span { display: block; color: #9baec5; font-size: .63em; letter-spacing: -.045em; margin-bottom: 16px; line-height: 1.2; }
.ph-hero h1 em { color: var(--yellow); }
.ph-lead { max-width: 530px; color: var(--ph-muted); font-size: 1rem; margin-bottom: 30px; }
.ph-scene { position: relative; min-width: 0; height: 540px; isolation: isolate; }
.ph-scene::before { content: ""; position: absolute; inset: -25px -10px; z-index: -2; background: linear-gradient(#559de30b 1px, transparent 1px), linear-gradient(90deg, #559de30b 1px, transparent 1px), radial-gradient(ellipse at 60% 40%, #2667a34d, transparent 65%); background-size: 38px 38px, 38px 38px, auto; mask-image: radial-gradient(ellipse, black 30%, transparent 72%); }
.ph-orbit { position: absolute; top: 22px; right: 0; width: 370px; height: 370px; border: 1px solid #71b6f32b; border-radius: 50%; box-shadow: 0 0 0 42px #71b6f307, 0 0 0 85px #71b6f304; z-index: -1; }
.ph-hero-mascot { position: absolute; width: 510px; max-width: 110%; height: 340px; object-fit: contain; top: -14px; right: -20px; mix-blend-mode: screen; filter: drop-shadow(0 10px 30px #1b84cd30); }
.ph-scene-label { position: absolute; top: 38px; left: 4px; color: #dfebf6; font-size: .8rem; font-weight: 750; }
.ph-scene-label > span { color: var(--yellow); margin-right: 6px; }
.ph-scene-label small { display: block; margin: 6px 0 0 22px; font-size: .65rem; color: #96abc2; font-weight: 450; }
.ph-editor { position: absolute; top: 230px; left: 0; width: 89%; border: 1px solid #6594c64d; border-radius: 14px; background: linear-gradient(135deg, #172638f5, #0b1321fa); box-shadow: 0 25px 70px #0008, 0 0 45px #1e73c31a; transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); overflow: hidden; }
.ph-window-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #a0c1e41c; color: #94a9bf; font: .63rem ui-monospace, monospace; }
.ph-window-dots { letter-spacing: 3px; color: #62778e; font-size: .54rem; }
.ph-editor pre { padding: 23px; font-size: .8rem; line-height: 1.85; }
.ph-comment { color: #8298af; }
.ph-purple { color: #c9acff; }
.ph-blue { color: #87c6fc; }
.ph-yellow { color: #f4d572; }
.ph-terminal { padding: 14px 23px; background: #080f1abf; border-top: 1px solid #a0c1e41c; }
.ph-terminal > span { display: block; color: #8b9fb4; font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 7px; }
.ph-terminal code { color: #b6e7d1; font-size: .77rem; }
.ph-terminal b { color: #72d2aa; margin-right: 10px; }
.ph-hint { position: absolute; right: -4px; top: 137px; display: flex; gap: 11px; max-width: 270px; padding: 16px 18px; border: 1px solid #f3d56c4d; border-radius: 13px 13px 13px 2px; background: linear-gradient(120deg, #233449, #142235); box-shadow: 0 14px 40px #0007; font-size: .72rem; }
.ph-hint-icon { color: var(--yellow); font-size: 1.05rem; }
.ph-hint strong { color: #f4d572; }
.ph-hint p { color: #d2deeb; margin: 5px 0 0; line-height: 1.55; }
.ph-flow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; }
.ph-flow-steps li { padding: 0 26px 0 0; position: relative; }
.ph-flow-steps li::before { content: ""; position: absolute; height: 1px; top: 20px; left: 45px; right: 10px; background: linear-gradient(90deg, #4783c4a0, #4783c420); }
.ph-flow-steps li:last-child::before { display: none; }
.ph-flow-steps li > span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #77b8ed45; border-radius: 50%; font: .75rem ui-monospace, monospace; color: #9ecdf6; background: #102235; }
.ph-flow-steps li:first-child > span { border-color: #f4d57260; color: var(--yellow); }
.ph-flow-steps h3 { font-size: 1.03rem; margin: 22px 0 9px; }
.ph-flow-steps p { color: var(--ph-muted); font-size: .8rem; max-width: 180px; margin: 0; }
.ph-mentor { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; }
.ph-mentor::before { content: ""; position: absolute; pointer-events: none; inset: 10% 0; z-index: -1; background: radial-gradient(ellipse at 80% 50%, #255d9921, transparent 65%); }
.ph-mentor-copy > p:not(.ph-kicker):not(.ph-caption) { color: var(--ph-muted); font-size: .93rem; }
.ph-mentor-tools { margin: 30px 0; display: grid; gap: 22px; }
.ph-mentor-tools > div { padding-left: 18px; border-left: 2px solid #4a94d0; }
.ph-mentor-tools > div:last-child { border-color: #f4d572; }
.ph-mentor-tools dt { font-size: .94rem; font-weight: 750; }
.ph-mentor-tools dt span { margin-left: 10px; color: #8cbcf0; }
.ph-mentor-tools dd { margin: 7px 0 0; color: var(--ph-muted); font-size: .85rem; line-height: 1.6; }
.ph-dialog { border: 1px solid #6b99c540; border-radius: 20px; padding: 28px; background: linear-gradient(145deg, #172638d9, #101a28d9); box-shadow: 0 32px 80px #0004; }
.ph-dialog-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 30px; }
.ph-dialog-heading img { width: 72px; height: 60px; object-fit: cover; mix-blend-mode: screen; }
.ph-dialog-heading strong { font-size: 1rem; }
.ph-dialog-heading small { display: block; margin-top: 4px; font-size: .66rem; color: #9eb2c9; }
.ph-dialog-heading > span { margin-left: auto; color: var(--yellow); }
.ph-dialog-user { max-width: 88%; margin-left: auto; padding: 17px 20px; border: 1px solid #6096cf30; border-radius: 12px 12px 2px 12px; background: #29415e50; }
.ph-dialog small { font-size: .62rem; letter-spacing: .08em; color: #9abadd; }
.ph-dialog p { margin: 8px 0 0; font-size: .86rem; line-height: 1.7; }
.ph-dialog pre { margin: 20px 0; padding: 20px; border-left: 2px solid #f4d57280; background: #080f19b3; border-radius: 4px; font-size: .82rem; line-height: 1.85; }
.ph-code-focus { border-bottom: 1px dashed #f4d57290; }
.ph-dialog-answer { padding: 3px 4px 20px; }
.ph-dialog-answer small { color: var(--yellow); }
.ph-dialog-answer p { color: #c2d1e0; }
.ph-dialog-answer strong { display: block; color: #f3d67f; font-size: .9rem; line-height: 1.65; margin-top: 14px; }
.ph-dialog-foot { padding-top: 17px; border-top: 1px solid var(--ph-line); color: #96b4ce; font-size: .7rem; }
.ph-dialog-foot span { margin-right: 6px; color: var(--yellow); }
.ph-path-list { position: relative; }
.ph-path { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 32px; padding: 34px 40px; position: relative; }
.ph-path--current { border: 1px solid #619ed34d; border-radius: 16px; background: radial-gradient(ellipse at 0 0, #234c773d, transparent 70%), #101b28; }
.ph-path--planned { margin-inline: 1px; }
.ph-path--planned + .ph-path--planned { border-top: 1px solid var(--ph-line); }
.ph-level { align-self: start; font-size: 2.7rem; font-weight: 750; letter-spacing: -.08em; color: #8abce7; }
.ph-path--current .ph-level { color: var(--yellow); }
.ph-path-heading { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.ph-path h3 { font-size: 1.45rem; margin: 0; }
.ph-badge { border: 1px solid #a9bdd330; border-radius: 30px; padding: 6px 12px; color: #9fb2c7; text-transform: uppercase; font-size: .6rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.ph-path--current .ph-badge { border-color: #92d8bf40; color: #b1e2ce; background: #92d8bf08; }
.ph-path-body > p { color: var(--ph-muted); font-size: .87rem; margin: 12px 0 0; }
.ph-path-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; color: #b1c5d8; font-size: .82rem; }
.ph-path-meta strong { color: var(--yellow); }
.ph-curriculum { margin-top: 25px; border-top: 1px solid var(--ph-line); }
.ph-curriculum summary { padding: 18px 0 0; cursor: pointer; font-size: .8rem; color: #c2d8eb; }
.ph-curriculum summary > span { float: right; color: #85b6e0; }
.ph-curriculum[open] summary > span { transform: rotate(45deg); }
.ph-curriculum ol { padding: 0; margin: 18px 0 0; list-style: none; }
.ph-curriculum li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid #a0c1e415; font-size: .78rem; align-items: center; }
.ph-curriculum li > span { color: #86aed0; font-family: ui-monospace, monospace; }
.ph-curriculum li strong { font-weight: 550; }
.ph-curriculum li small { color: var(--ph-muted); font-size: .7rem; }
.ph-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.ph-project { min-width: 0; }
.ph-project-art { position: relative; overflow: hidden; min-height: 220px; padding: 22px; border: 1px solid #5486be40; border-radius: 14px; background: radial-gradient(ellipse at 100% 100%, #1b64a45c, transparent 85%), #101b2a; }
.ph-project-art--expense { background: radial-gradient(ellipse at 100% 100%, #ae8c1a30, transparent 85%), #151c25; border-color: #c6a45b30; }
.ph-project-art--quiz { background: radial-gradient(ellipse at 100% 100%, #7154a640, transparent 85%), #131b2b; }
.ph-code-label { display: block; padding-bottom: 16px; font: .68rem ui-monospace, monospace; color: #9db6d1; }
.ph-project-art pre { position: relative; z-index: 1; font-size: .73rem; line-height: 1.9; }
.ph-art-symbol { position: absolute; right: 13px; bottom: -22px; font: 800 7rem/1.3 ui-monospace, monospace; color: #a1c8f012; }
.ph-project-info { padding: 23px 2px 0; }
.ph-project-status { color: #9db6d1; text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; }
.ph-project h3 { margin: 11px 0 12px; font-size: 1.17rem; }
.ph-project p { color: var(--ph-muted); font-size: .86rem; margin-bottom: 18px; }
.ph-account { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ph-account h2 { margin-bottom: 0; }
.ph-account-benefits p { color: var(--ph-muted); font-size: .93rem; margin-bottom: 20px; }
.ph-journal-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 36px; }
.ph-journal-heading h2 { margin-bottom: 0; }
.ph-journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ph-article-link { display: block; height: 100%; border-top: 1px solid #699ac65c; padding-top: 22px; }
.ph-article-link img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; margin-bottom: 22px; }
.ph-article-link time { color: #9ab4ce; font-size: .7rem; }
.ph-article-link h3 { font-size: 1.2rem; line-height: 1.4; margin: 12px 0; }
.ph-article-link h3 span { color: #8abce7; }
.ph-article-link:hover h3 { color: var(--yellow); }
.ph-article-link p { color: var(--ph-muted); font-size: .85rem; margin: 0; }
.ph-final { position: relative; overflow: hidden; text-align: center; padding-block: 100px; isolation: isolate; }
.ph-final::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 100%, #295e944d, transparent 65%), linear-gradient(90deg, transparent, #22446c12, transparent); }
.ph-final-mark { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; font: 800 19rem/1.2 ui-monospace, monospace; letter-spacing: -.13em; color: #8db5e008; pointer-events: none; }
.ph-final .ph-kicker, .ph-final .ph-actions { justify-content: center; }
.ph-final h2 { font-size: clamp(2.4rem, 4.2vw, 4rem); margin-block: 25px; }
.ph-final h2 em { color: var(--yellow); }
.ph-final > p:not(.ph-kicker) { max-width: 560px; margin: 0 auto 30px; color: #b1c4d7; font-size: .95rem; }
@media (min-width: 1500px) { .ph-hero { min-height: 750px; } }
@media (max-width: 1100px) {
    .public-site .site-shell { padding-inline: 32px; }
    .public-site .site-header { gap: 16px; flex-wrap: wrap; height: auto; min-height: 86px; padding-block: 16px; }
    .public-site .brand { width: 165px; }
    .public-site .main-nav a { padding-inline: 8px; }
    .public-site .auth-nav { gap: 12px; }
    .ph-hero { gap: 10px; min-height: 650px; }
    .ph-hero h1 { font-size: 3.35rem; }
    .ph-scene { height: 510px; }
    .ph-hint { right: 0; max-width: 235px; top: 130px; }
    .ph-editor { width: 96%; }
    .ph-editor pre { font-size: .72rem; padding: 20px 16px; }
    .ph-hero-mascot { right: -12px; }
    .ph-mentor, .ph-account { gap: 40px; }
    .ph-section-intro { gap: 0 40px; }
    .ph-project-grid { gap: 20px; }
    .ph-project-art { padding: 17px; }
}
@media (max-width: 900px) {
    .public-site .site-header { gap: 16px; }
    .public-site .main-nav { order: 5; width: 100%; display: flex; justify-content: center; }
    .public-site .nav-trigger { display: none; }
    .ph-hero { grid-template-columns: 1fr; padding-block: 55px 65px; }
    .ph-hero-copy { max-width: 650px; }
    .ph-hero h1 { font-size: clamp(3rem, 7vw, 4.3rem); max-width: 700px; }
    .ph-lead { max-width: 610px; }
    .ph-scene { width: min(560px, 100%); justify-self: center; height: 555px; margin-top: 20px; }
    .ph-editor { width: 89%; }
    .ph-editor pre { font-size: .85rem; padding: 23px; }
    .ph-hint { top: 137px; max-width: 270px; }
    .ph-hero-mascot { width: 530px; max-width: 100%; right: -8px; }
    .ph-section { padding-block: 65px; }
    .ph-mentor { gap: 30px; }
    .ph-dialog { padding: 20px; }
    .ph-section-intro { grid-template-columns: 1fr; gap: 20px; }
    .ph-section-intro > p:last-child { max-width: 640px; }
    .ph-flow-steps li { padding-right: 15px; }
    .ph-project-grid { grid-template-columns: 1fr; gap: 30px; }
    .ph-project { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
    .ph-project-info { padding-top: 0; }
    .ph-journal-grid { gap: 20px; }
}
@media (max-width: 640px) {
    .public-site .site-shell { padding-inline: 20px; }
    .public-site .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px 12px; padding-block: 18px; }
    .public-site .brand { width: min(157px, 100%); min-width: 0; }
    .public-site .language-switcher { grid-column: 2; grid-row: 1; }
    .public-site .nav-trigger { display: flex; grid-column: 3; grid-row: 1; margin-left: 0; }
    .public-site .nav-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
    .public-site .nav-toggle:focus-visible + .nav-trigger { outline: 2px solid var(--yellow); outline-offset: 4px; }
    .public-site .auth-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; margin-left: 0; font-size: .8rem; }
    .public-site .main-nav { grid-column: 1 / -1; display: none; padding: 8px 0 0; margin: 0; position: static; background: none; border: 0; }
    .public-site .nav-toggle:checked ~ .main-nav { display: flex; flex-wrap: wrap; justify-content: flex-start; }
    .public-site .site-footer { grid-template-columns: 1fr; gap: 20px; }
    .public-site .site-footer nav { justify-content: flex-start; }
    .ph-hero { padding-block: 44px 40px; }
    .ph-hero h1 { font-size: clamp(2.7rem, 9.5vw, 3.7rem); margin-block: 22px; }
    .ph-hero h1 > span { font-size: .63em; max-width: 320px; }
    .ph-kicker { font-size: .6rem; letter-spacing: .12em; }
    .ph-lead { font-size: .93rem; }
    .ph-actions { gap: 20px; }
    .ph-actions .button { padding-inline: 19px; font-size: .84rem; }
    .ph-text-link { font-size: .8rem; gap: 8px; }
    .ph-scene { height: 535px; margin-top: 24px; }
    .ph-orbit { width: 245px; height: 245px; right: 0; top: 32px; box-shadow: 0 0 0 25px #71b6f307; }
    .ph-hero-mascot { width: 100%; height: 280px; top: -8px; right: -10px; }
    .ph-scene-label { top: 18px; left: 0; }
    .ph-editor { top: 248px; width: 100%; transform: none; }
    .ph-editor pre { font-size: .72rem; padding: 19px 16px; }
    .ph-window-bar { padding: 13px 16px; font-size: .57rem; }
    .ph-terminal { padding: 14px 16px; }
    .ph-hint { top: 158px; max-width: 225px; padding: 12px 15px; font-size: .67rem; }
    .ph-section { padding-block: 52px; }
    .public-home h2 { font-size: 2rem; }
    .ph-section-intro { margin-bottom: 32px; }
    .ph-flow-steps { grid-template-columns: 1fr; gap: 0; }
    .ph-flow-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 20px; padding: 0 0 25px; }
    .ph-flow-steps li::before { top: 42px; left: 20px; bottom: 3px; width: 1px; height: auto; right: auto; background: #4783c45c; }
    .ph-flow-steps li > span { grid-row: 1 / span 2; }
    .ph-flow-steps h3 { margin: 2px 0 0; }
    .ph-flow-steps p { max-width: none; }
    .ph-flow-steps li:last-child { padding-bottom: 0; }
    .ph-mentor, .ph-account { grid-template-columns: 1fr; gap: 32px; }
    .ph-dialog { padding: 20px 17px; }
    .ph-dialog pre { padding: 16px 12px; font-size: .75rem; }
    .ph-path { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 26px 18px; }
    .ph-level { font-size: 1.75rem; }
    .ph-path h3 { font-size: 1.25rem; }
    .ph-path-heading { gap: 14px; }
    .ph-path-body > p { font-size: .82rem; }
    .ph-path-meta { gap: 15px; }
    .ph-curriculum li { grid-template-columns: 24px 1fr; gap: 7px; }
    .ph-curriculum li small { grid-column: 2; }
    .ph-project { grid-template-columns: 1fr; gap: 20px; }
    .ph-project-grid { gap: 38px; }
    .ph-project-art { min-height: 210px; padding: 22px; }
    .ph-project-art pre { font-size: .78rem; }
    .ph-journal-heading { align-items: start; flex-direction: column; }
    .ph-journal-grid { grid-template-columns: 1fr; gap: 32px; }
    .ph-final { padding-block: 64px; }
    .ph-final .ph-kicker { max-width: 270px; margin-inline: auto; }
    .ph-final .ph-actions { flex-direction: column; }
    .ph-final-mark { font-size: 14rem; top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    html:has(.public-site) { scroll-behavior: auto; }
    .public-site .button { transition: none; }
}