@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root {
    --bg: #f7f8fa;
    --panel: #fff;
    --text: #20262e;
    --muted: #7c8491;
    --border: #e8ebef;
    --accent: #e87945;
    --soft: #fff2e9;
    --green: #337e6c;
    --code: #202732;
    --shadow: 0 4px 18px #26324a04
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
}

body.dark {
    --bg: #171c23;
    --panel: #202731;
    --text: #e9edf3;
    --muted: #9aa5b3;
    --border: #313a47;
    --soft: #483125;
    --code: #10151d
}

button,
input,
textarea,
select {
    font: inherit
}

button,
a,
input,
textarea {
    outline-offset: 4px
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

a {
    color: inherit;
    text-decoration: none
}

button {
    cursor: pointer;
    color: inherit
}

button:disabled {
    opacity: .5;
    cursor: default
}

button {
    border: 0
}

svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle
}

.sidebar {
    width: 250px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    padding: 31px 20px 0;
    z-index: 20
}

.brand {
    font: 800 23px Manrope, sans-serif;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 5px
}

.brand-icon {
    width: 34px;
    height: 36px;
    background: var(--accent);
    border-radius: 11px;
    color: white;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-style: italic
}

.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-left: -7px;
    margin-top: 12px
}

.workspace {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 12px 9px;
    margin: 32px 0;
    font-size: 12px;
    font-weight: 600
}

.workspace small,
.profile small {
    display: block;
    font-size: 10px;
    color: var(--muted);
    font-weight: 400;
    margin-top: 4px
}

.workspace-icon {
    background: #e9edf4;
    color: #68758b;
    display: grid;
    place-items: center;
    width: 29px;
    height: 30px;
    border-radius: 6px
}

.lock {
    margin-left: auto;
    color: var(--muted)
}

.nav-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--muted);
    margin: 0 13px 14px
}

nav a {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border-radius: 7px;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 12px;
    color: #747d8b
}

nav a.active {
    color: #cf673b;
    background: var(--soft)
}

nav a:hover {
    background: var(--bg)
}

nav a.active:hover {
    background: var(--soft)
}

.nav-count {
    margin-left: auto;
    font-size: 10px;
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 5px
}

.nav-new {
    background: #f6e8dd;
    color: #bb693f;
    font-size: 8px;
    padding: 3px 5px;
    border-radius: 4px;
    margin-left: auto
}

.sidebar-bottom {
    margin-top: auto
}

.focus-card {
    background: var(--bg);
    padding: 17px 13px;
    border-radius: 9px;
    margin: 24px 0
}

.focus-card span {
    color: #b58766;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .8px
}

.focus-card p {
    font: 650 15px/1.6 Manrope, sans-serif;
    margin: 11px 0
}

.focus-card small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
    display: block
}

.profile {
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 19px 0;
    font-size: 11px;
    font-weight: 600
}

.avatar {
    display: grid;
    place-items: center;
    background: #ece5dc;
    color: #8a7056;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700
}

.small {
    width: 29px;
    height: 29px
}

.icon-btn {
    padding: 5px;
    background: transparent;
    color: var(--muted);
    border-radius: 6px
}

.profile .icon-btn {
    margin-left: auto
}

.app {
    margin-left: 250px
}

.topbar {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 38px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    gap: 20px
}

.breadcrumb {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 11px
}

.breadcrumb>span {
    color: var(--muted)
}

.breadcrumb strong {
    font-weight: 500
}

.slash {
    color: #cdd1d7
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 22px
}

.version {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap
}

.version i {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #5d9c80;
    border-radius: 50%;
    margin-right: 6px
}

.search-trigger {
    width: 204px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 11px
}

kbd {
    margin-left: auto;
    font-size: 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0px 4px
}

#menu {
    display: none
}

main {
    max-width: 1500px;
    margin: auto;
    padding: 35px 38px 50px
}

.eyebrow {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase
}

.page-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 28px
}

.page-heading h1 {
    font: 750 27px/1.3 Manrope, sans-serif;
    letter-spacing: -1px;
    margin: 7px 0 9px
}

.page-heading p {
    color: var(--muted);
    font-size: 12px;
    margin: 0;
    line-height: 1.7
}

.date {
    font-size: 10px;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px 13px;
    white-space: nowrap;
    background: var(--panel)
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 25px
}

.stat {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 19px 19px 17px;
    box-shadow: var(--shadow)
}

.stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: 11px
}

.stat-icon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 7px;
    background: #eff2f8;
    color: #8999b5
}

.stat:nth-child(2) .stat-icon {
    background: #e9f4ee;
    color: #73a18a
}

.stat:nth-child(3) .stat-icon {
    background: #fff2e5;
    color: #cc9c63
}

.stat:nth-child(4) .stat-icon {
    background: #f0ecf9;
    color: #a08bbb
}

.stat strong {
    font: 750 27px Manrope, sans-serif;
    display: inline-block;
    margin: 7px 0 6px;
    letter-spacing: -1px
}

.stat small {
    color: var(--muted);
    font-size: 10px;
    margin-left: 5px
}

.stat-bottom {
    font-size: 9px;
    color: var(--muted)
}

.green {
    color: var(--green)
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px
}

.hero {
    border: 1px solid #ebdacb;
    background: linear-gradient(115deg, #fbede0, #fff7ef);
    border-radius: 12px;
    padding: 27px 29px;
    position: relative;
    overflow: hidden;
    min-height: 222px;
    color: #3e352e
}

.hero-label {
    font-size: 8px;
    letter-spacing: 1.3px;
    color: #a07a5d;
    display: flex;
    align-items: center;
    gap: 7px
}

.hero-label i {
    width: 5px;
    height: 5px;
    background: #d58c57;
    border-radius: 50%
}

.hero h2 {
    font: 750 24px/1.4 Manrope, sans-serif;
    letter-spacing: -.7px;
    max-width: 360px;
    margin: 15px 0 10px;
    position: relative;
    z-index: 1
}

.hero p {
    font-size: 11px;
    color: #9a816e;
    line-height: 1.8;
    max-width: 340px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--accent);
    color: white;
    border-radius: 6px;
    padding: 11px 15px;
    font-size: 11px;
    font-weight: 600;
    transition: transform .15s
}

.button:hover {
    transform: translateY(-1px);
    filter: brightness(.97)
}

.button.secondary {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border)
}

.button.ghost {
    background: transparent;
    color: var(--accent);
    padding: 6px 0
}

.hero .button {
    background: #303c39;
    position: relative;
    z-index: 2
}

.hero-art {
    position: absolute;
    right: 8px;
    top: 10px;
    width: 215px;
    height: 215px;
    opacity: .8;
    pointer-events: none
}

.orbit {
    border: 1px solid #e3cdb7;
    border-radius: 50%;
    position: absolute;
    inset: 12px;
    transform: rotate(-20deg)
}

.orbit:nth-child(2) {
    inset: 36px
}

.orbit:nth-child(3) {
    inset: 60px
}

.swift-tile {
    position: absolute;
    left: 66px;
    top: 65px;
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: linear-gradient(135deg, #efb183, #d4794e);
    transform: rotate(-12deg);
    box-shadow: 0 12px 25px #b66d3b22;
    display: grid;
    place-items: center;
    color: #fff8ed;
    font: 800 italic 55px Manrope
}

.float-code {
    position: absolute;
    left: 8px;
    bottom: 24px;
    background: #fffaf4;
    padding: 10px 12px;
    border: 1px solid #eadbc8;
    border-radius: 9px;
    font: 10px monospace;
    color: #a38061;
    transform: rotate(-5deg)
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 27px 0 15px;
    gap: 12px
}

.section-header h2 {
    font: 700 15px Manrope, sans-serif;
    margin: 0;
    letter-spacing: -.3px
}

.section-header small {
    font-size: 10px;
    color: var(--muted);
    margin-left: 8px;
    font-weight: 400
}

.section-header a {
    font-size: 10px;
    color: var(--muted)
}

.tracks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px
}

.track {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 18px;
    transition: transform .15s, box-shadow .15s
}

.track:hover,
.lesson-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px #26324a0b
}

.track-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font: 700 19px Manrope;
    border-radius: 9px;
    background: var(--soft);
    color: #d87848;
    margin-bottom: 16px
}

.track:nth-child(2) .track-icon {
    background: #eaf1fc;
    color: #7291c3
}

.track:nth-child(3) .track-icon {
    background: #f0eefa;
    color: #9e89ca
}

.track h3 {
    font-size: 13px;
    margin: 0 0 6px
}

.track p {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 16px;
    min-height: 34px
}

.track-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--muted);
    margin-bottom: 9px
}

.progress {
    height: 4px;
    border-radius: 4px;
    background: var(--border);
    overflow: hidden
}

.progress i {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 4px
}

.lesson-list {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden
}

.lesson-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border)
}

.lesson-row:last-child {
    border-bottom: 0
}

.lesson-row:hover {
    background: var(--bg)
}

.lesson-num {
    width: 30px;
    height: 31px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    font-size: 10px
}

.lesson-row h3 {
    font-size: 11px;
    margin: 0 0 5px
}

.lesson-row p {
    font-size: 9px;
    color: var(--muted);
    margin: 0
}

.lesson-row .tag {
    margin-left: auto
}

.arrow {
    color: var(--muted);
    font-size: 15px
}

.tag {
    border-radius: 4px;
    background: var(--bg);
    font-size: 8px;
    font-weight: 500;
    padding: 4px 7px;
    white-space: nowrap;
    color: var(--muted)
}

.tag.orange {
    color: #bd714b;
    background: var(--soft)
}

.rail-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    padding: 20px;
    margin-bottom: 18px
}

.rail-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px
}

.rail-title h3 {
    font: 700 12px Manrope;
    margin: 0
}

.rail-title span {
    font-size: 9px;
    color: var(--muted)
}

.week {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 20px
}

.day {
    text-align: center;
    font-size: 8px;
    color: var(--muted)
}

.day span {
    display: grid;
    place-items: center;
    width: 25px;
    height: 29px;
    border-radius: 6px;
    margin-top: 8px;
    border: 1px solid var(--border);
    font-size: 10px
}

.day.done span {
    background: #eaf4ee;
    border-color: #d6e9de;
    color: #538b6f
}

.day.today span {
    border-color: var(--accent);
    color: var(--accent)
}

.rail-card p {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.8
}

.target {
    padding-top: 15px;
    border-top: 1px solid var(--border);
    margin-top: 17px;
    display: flex;
    justify-content: space-between;
    font-size: 10px
}

.target strong {
    color: var(--green);
    font-size: 10px
}

.timeline {
    position: relative
}

.timeline-item {
    display: flex;
    gap: 13px;
    padding-bottom: 20px;
    position: relative
}

.timeline-item:last-child {
    padding-bottom: 0
}

.timeline-item:not(:last-child):before {
    content: '';
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    border-left: 1px dashed var(--border)
}

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 9px;
    background: var(--panel);
    color: var(--muted);
    z-index: 1
}

.timeline-dot.current {
    border-color: #ebbf9f;
    background: var(--soft);
    color: var(--accent)
}

.timeline-item h4 {
    font-size: 10px;
    margin: 2px 0 5px
}

.timeline-item p {
    font-size: 9px;
    margin: 0
}

.update-pill {
    display: inline-block;
    color: #9b7c56;
    font-size: 8px;
    background: #f8f1e6;
    border-radius: 4px;
    padding: 4px 6px
}

.rail-update {
    background: linear-gradient(130deg, var(--panel), var(--soft))
}

.rail-update h3 {
    font: 700 16px Manrope;
    margin: 12px 0 5px
}

.rail-update a {
    display: block;
    color: var(--accent);
    font-size: 10px;
    margin-top: 15px
}

.note-hint {
    font-size: 9px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px
}

.filters {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 20px 0
}

.filter {
    font-size: 11px;
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 9px 13px;
    border-radius: 6px;
    color: var(--muted)
}

.filter.active {
    background: var(--text);
    color: var(--panel);
    border-color: var(--text)
}

.inline-search {
    margin-left: auto;
    padding: 9px 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 210px;
    color: var(--text)
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.lesson-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    padding: 22px;
    transition: transform .15s;
    display: flex;
    flex-direction: column;
    min-height: 215px
}

.lesson-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.lesson-card h3 {
    font: 700 16px/1.55 Manrope;
    margin: 20px 0 7px
}

.lesson-card p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
    margin: 0 0 20px
}

.lesson-card-bottom {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: auto;
    font-size: 10px;
    color: var(--muted)
}

.lesson-card-bottom span:last-child {
    margin-left: auto
}

.bookmark {
    background: transparent;
    color: var(--muted);
    padding: 4px
}

.bookmark.on {
    color: var(--accent)
}

.empty {
    padding: 70px 20px;
    text-align: center;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--muted);
    line-height: 2
}

.reader-layout {
    display: grid;
    grid-template-columns: minmax(0, 790px) 240px;
    gap: 30px;
    justify-content: center
}

.reader {
    min-width: 0
}

.back {
    display: inline-block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 22px
}

.reader h1 {
    font: 750 32px/1.4 Manrope;
    letter-spacing: -.9px;
    margin: 16px 0 10px
}

.reader-sub {
    color: var(--muted);
    line-height: 1.8
}

.reader-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 20px 0 26px
}

.reader-section {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 27px;
    border-radius: 10px;
    margin: 16px 0
}

.reader-section h2 {
    font: 700 17px Manrope;
    margin: 0 0 16px
}

.reader-section p {
    font-size: 14px;
    line-height: 2;
    color: var(--text);
    margin: 0 0 16px;
    white-space: pre-line
}

.reader-section p:last-child {
    margin: 0
}

.reader-section h3 {
    font-size: 12px;
    color: var(--accent);
    margin: 22px 0 10px
}

.code-box {
    background: var(--code);
    border-radius: 9px;
    overflow: hidden;
    margin-top: 15px
}

.code-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #a3adb9;
    border-bottom: 1px solid #ffffff12;
    padding: 10px 16px;
    font-size: 10px
}

.code-top button {
    color: #c4cedb;
    background: #ffffff0b;
    border: 1px solid #ffffff15;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 10px
}

pre {
    margin: 0;
    padding: 22px;
    color: #dde5f1;
    line-height: 1.85;
    font: 12px/1.9 ui-monospace, SFMono-Regular, Consolas, monospace;
    overflow: auto;
    tab-size: 4
}

.code-keyword {
    color: #e3a5ca
}

.code-string {
    color: #c5d6a1
}

.code-comment {
    color: #82909d
}

.result {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.9;
    white-space: pre-line
}

.callout {
    padding: 16px;
    border-left: 3px solid #d6aa72;
    background: #fbf5eb;
    color: #977548;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.9
}

.dark .callout {
    background: #3a3023;
    color: #e2c499
}

.answer {
    display: block;
    width: 100%;
    padding: 14px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg);
    margin: 9px 0;
    font-size: 12px
}

.answer:hover {
    border-color: var(--accent)
}

.answer.correct {
    background: #e6f4ed;
    border-color: #86b89d;
    color: #347356
}

.answer.wrong {
    background: #fae9e6;
    border-color: #d79b91;
    color: #a35347
}

.feedback {
    font-size: 12px;
    line-height: 1.8;
    margin: 15px 0
}

.notes-area {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 7px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.8
}

.reader-side {
    position: sticky;
    top: 20px;
    align-self: start
}

.toc a {
    display: block;
    font-size: 11px;
    color: var(--muted);
    padding: 10px 0
}

.reader-actions {
    display: flex;
    gap: 9px;
    margin-top: 20px;
    flex-wrap: wrap
}

.source {
    color: var(--accent);
    text-decoration: underline;
    font-size: 12px;
    overflow-wrap: anywhere
}

.roadmap-step {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 25px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 14px
}

.step-number {
    font: 750 30px Manrope;
    color: #cbd1da
}

.roadmap-step h3 {
    font: 700 17px Manrope;
    margin: 0 0 8px
}

.roadmap-step p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    margin: 0
}

.roadmap-step .progress {
    margin-top: 15px;
    max-width: 400px
}

.project {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    margin-bottom: 18px
}

.project h2 {
    font: 700 20px Manrope
}

.project p,
.project li {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted)
}

.project li {
    list-style: none;
    padding: 8px 0;
    border-bottom: 1px solid var(--border)
}

.project ul {
    padding: 0
}

.project input {
    accent-color: var(--accent);
    margin-right: 12px
}

.saved-note {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 23px;
    border-radius: 10px;
    margin-bottom: 15px
}

.saved-note h3 {
    font: 700 15px Manrope
}

.saved-note p {
    white-space: pre-wrap;
    line-height: 1.9;
    font-size: 13px
}

.local-note {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.8
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: #19212c55;
    backdrop-filter: blur(4px);
    z-index: 50;
    padding: 12vh 20px;
    overflow: auto
}

.modal-backdrop[hidden] {
    display: none
}

.search-modal {
    max-width: 650px;
    margin: auto;
    background: var(--panel);
    border-radius: 12px;
    box-shadow: 0 20px 80px #0002;
    overflow: hidden
}

.search-input {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--border);
    padding: 20px
}

.search-input input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 15px
}

.search-input button {
    font-size: 10px
}

.search-hit {
    display: block;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border)
}

.search-hit:hover {
    background: var(--bg)
}

.search-hit strong {
    font-size: 12px
}

.search-hit small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 6px
}

#searchResults {
    max-height: 420px;
    overflow: auto
}

#toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #2d3d36;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 12px;
    z-index: 100;
    transition: transform .2s
}

#toast.show {
    transform: translateX(-50%) translateY(0)
}

footer {
    max-width: 1500px;
    margin: auto;
    border-top: 1px solid var(--border);
    padding: 21px 38px;
    display: flex;
    gap: 15px;
    font-size: 9px;
    color: var(--muted)
}

footer a {
    margin-left: auto
}

footer span {
    color: var(--muted)
}

.loading {
    padding: 50px;
    text-align: center;
    color: var(--muted)
}

.reading-size {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 12px
}

.reading-size button {
    padding: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 5px
}

.reader.large .reader-section p {
    font-size: 17px
}

.reader.large pre {
    font-size: 14px
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 20px
}

@media(min-width:1550px) {
    .hero-art {
        right: 35px
    }

    .hero h2 {
        max-width: 420px
    }
}

@media(max-width:1200px) {
    .sidebar {
        width: 220px;
        padding-inline: 14px
    }

    .app {
        margin-left: 220px
    }

    .topbar {
        padding-inline: 25px
    }

    main {
        padding: 30px 25px
    }

    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 18px
    }

    .hero-art {
        right: -50px;
        opacity: .45
    }

    .tracks {
        gap: 10px
    }

    .track {
        padding: 14px
    }

    .library-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .reader-layout {
        grid-template-columns: minmax(0, 1fr) 200px;
        gap: 20px
    }
}

@media(max-width:1000px) {
    .dashboard-grid {
        grid-template-columns: 1fr
    }

    .rail {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px
    }

    .rail-card {
        padding: 16px
    }

    .hero-art {
        right: 20px;
        opacity: .8
    }

    .hero h2 {
        max-width: 440px
    }

    .reader-layout {
        grid-template-columns: 1fr
    }

    .reader-side {
        position: static;
        grid-row: 1
    }

    .reader-side .toc,
    .reader-side .reading-size,
    .reader-side p {
        display: none
    }

    .reader-side .rail-card {
        margin: 0
    }

    .reader-side .rail-title {
        margin-bottom: 5px
    }

    .stats {
        gap: 10px
    }

    .stat {
        padding: 15px
    }

    .rail .week {
        gap: 2px
    }

    .day span {
        width: 20px
    }

    .date {
        display: none
    }
}

@media(max-width:760px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s;
        box-shadow: 20px 0 100px #0002
    }

    .sidebar.open {
        transform: translateX(0)
    }

    .app {
        margin-left: 0
    }

    .topbar {
        height: 65px;
        padding: 0 18px
    }

    .breadcrumb {
        gap: 10px
    }

    .breadcrumb>span:first-of-type,
    .slash {
        display: none
    }

    #menu {
        display: block
    }

    .top-actions {
        gap: 12px
    }

    .search-trigger {
        width: auto;
        padding: 7px 10px
    }

    .search-trigger span,
    .search-trigger kbd,
    .version {
        display: none
    }

    main {
        padding: 25px 18px
    }

    .page-heading h1 {
        font-size: 25px
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .stat {
        padding: 15px
    }

    .dashboard-grid {
        gap: 10px
    }

    .hero {
        padding: 23px;
        min-height: 235px
    }

    .hero h2 {
        font-size: 23px;
        max-width: 250px
    }

    .hero p {
        max-width: 245px
    }

    .hero-art {
        right: -65px;
        opacity: .35
    }

    .tracks {
        grid-template-columns: 1fr
    }

    .track {
        display: grid;
        grid-template-columns: 42px 1fr;
        column-gap: 13px;
        padding: 18px
    }

    .track-icon {
        grid-row: 1/5;
        margin: 0
    }

    .track h3 {
        margin-bottom: 4px
    }

    .track p {
        min-height: auto;
        margin-bottom: 12px
    }

    .track-meta,
    .track .progress {
        grid-column: 2
    }

    .rail {
        display: block
    }

    .rail-card {
        padding: 20px
    }

    .week .day span {
        width: 33px
    }

    .library-grid {
        grid-template-columns: 1fr
    }

    .inline-search {
        width: 100%;
        margin: 8px 0 0
    }

    .roadmap-step {
        grid-template-columns: 40px 1fr;
        padding: 20px;
        gap: 10px
    }

    .roadmap-step .button {
        grid-column: 2;
        justify-self: start
    }

    .reader h1 {
        font-size: 27px
    }

    .reader-section {
        padding: 20px
    }

    .reader-section p {
        font-size: 13px
    }

    pre {
        font-size: 11px;
        padding: 17px
    }

    .reader-meta {
        gap: 6px
    }

    .reader-side {
        display: none
    }

    footer {
        padding: 20px 18px;
        flex-wrap: wrap;
        gap: 8px
    }

    footer a {
        margin-left: 0;
        width: 100%
    }

    .lesson-row .tag {
        display: none
    }

    .page-heading {
        align-items: flex-start
    }

    .page-heading .button {
        font-size: 9px;
        padding: 9px
    }

    .stat-top {
        font-size: 10px
    }

    .section-header small {
        display: none
    }
}

.logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap
}

.logout-button:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--soft)
}

.logout-button svg {
    width: 16px;
    height: 16px
}

@media(max-width:760px) {
    .logout-button {
        min-height: 40px;
        padding: 8px;
        gap: 5px;
        font-size: 10px
    }

    .top-actions {
        gap: 8px
    }

    .top-actions>.avatar {
        display: none
    }
}

.language-select {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 9px 8px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    min-height: 36px
}

.catalog-summary {
    display: flex;
    align-items: center;
    gap: 30px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 25px;
    background: var(--panel);
    margin: 24px 0
}

.catalog-summary>div:not(.catalog-guide) {
    min-width: 125px
}

.catalog-summary strong {
    font: 750 30px Manrope;
    display: block;
    letter-spacing: -1px
}

.catalog-summary span {
    font-size: 11px;
    color: var(--muted);
    display: block;
    margin-top: 5px
}

.catalog-guide {
    margin-left: auto;
    padding-left: 24px;
    border-left: 1px solid var(--border);
    max-width: 510px
}

.catalog-guide b {
    font: 650 12px Manrope;
    color: var(--accent)
}

.catalog-guide p {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.8;
    margin: 7px 0 0
}

.catalog-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 26px 0 20px;
    flex-wrap: wrap
}

.catalog-toolbar .inline-search {
    margin: 0;
    flex: 1;
    min-width: 230px;
    min-height: 41px
}


.catalog-saved {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer
}

.catalog-saved input {
    accent-color: var(--accent);
    width: 15px;
    height: 15px
}

.catalog-layout {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 24px;
    align-items: start
}

.catalog-categories {
    position: sticky;
    top: 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px
}

.catalog-categories button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: transparent;
    width: 100%;
    padding: 11px 10px;
    color: var(--muted);
    font-size: 11px;
    text-align: left;
    border-radius: 6px;
    margin: 1px 0
}

.catalog-categories button small {
    font-size: 9px;
    opacity: .7
}

.catalog-categories button.active {
    background: var(--soft);
    color: var(--accent)
}

.catalog-categories button:hover {
    background: var(--bg)
}

.catalog-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0 17px
}

.catalog-results-head b {
    font: 700 14px Manrope
}

.catalog-results-head span {
    font-size: 11px;
    color: var(--muted)
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.catalog-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 21px;
    background: var(--panel);
    display: flex;
    flex-direction: column;
    min-height: 255px;
    transition: transform .15s, box-shadow .15s
}

.catalog-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow)
}

.catalog-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.catalog-kind {
    font-size: 9px;
    padding: 4px 7px;
    border-radius: 4px;
    background: #edf3f9;
    color: #6d86a1
}

.catalog-kind.package {
    background: #eef5ee;
    color: #6b8e72
}

.catalog-kind.sdk {
    background: #f4edf7;
    color: #9a7aaa
}

.catalog-kind.tool {
    background: var(--soft);
    color: var(--accent)
}

.catalog-card h2 {
    font: 750 18px Manrope;
    margin: 16px 0 6px;
    overflow-wrap: anywhere
}

.catalog-category-label {
    font-size: 9px;
    color: var(--muted)
}

.catalog-card p {
    font-size: 12px;
    line-height: 1.9;
    color: var(--muted);
    margin: 16px 0 22px
}

.catalog-card>a {
    font-size: 10px;
    color: var(--accent);
    margin-top: auto;
    align-self: flex-start;
    border-bottom: 1px solid transparent
}

.catalog-card>a:hover {
    border-bottom-color: var(--accent)
}

.catalog-card .bookmark {
    font-size: 23px;
    line-height: 1
}

.catalog-disclaimer {
    margin-top: 26px;
    line-height: 2
}

.catalog-disclaimer a {
    color: var(--accent)
}

.catalog-grid>.empty {
    grid-column: 1/-1
}

.sidebar .workspace {
    margin: 24px 0
}

.sidebar .focus-card {
    margin: 15px 0
}

.sidebar nav a {
    padding-block: 10px
}

@media(min-width:1600px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:1100px) {
    .catalog-layout {
        grid-template-columns: 180px 1fr;
        gap: 16px
    }

    .catalog-grid {
        grid-template-columns: 1fr
    }

    .catalog-summary {
        gap: 20px
    }

    .catalog-summary>div:not(.catalog-guide) {
        min-width: 90px
    }

    .catalog-guide {
        padding-left: 20px
    }

    .top-actions {
        gap: 13px
    }
}

@media(max-width:760px) {
    .top-actions {
        gap: 6px
    }

    .language-select {
        font-size: 10px;
        padding: 7px 5px;
        min-height: 36px
    }

    .topbar {
        gap: 10px
    }

    .catalog-summary {
        padding: 20px;
        flex-wrap: wrap;
        gap: 20px
    }

    .catalog-guide {
        padding: 16px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border);
        max-width: none;
        flex-basis: 100%
    }

    .catalog-layout {
        display: block
    }

    .catalog-categories {
        position: static;
        display: flex;
        gap: 5px;
        overflow: auto;
        margin-bottom: 20px;
        scrollbar-width: thin
    }

    .catalog-categories button {
        width: auto;
        flex-shrink: 0;
        white-space: nowrap;
        gap: 10px
    }

    .catalog-toolbar .inline-search {
        min-width: 100%;
        width: 100%
    }

    .catalog-toolbar select {
        flex: 1
    }

    .catalog-grid {
        grid-template-columns: 1fr
    }

    .catalog-card {
        min-height: 220px
    }

    .catalog-card p {
        font-size: 13px
    }

    .catalog-summary strong {
        font-size: 27px
    }

    .sidebar {
        overflow-y: auto
    }
}

.lesson-summary {
    font-size: 14px;
    line-height: 2;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 24px
}

.walkthrough {
    scroll-margin-top: 24px;
    border-top: 1px solid var(--border);
    margin-top: 24px;
    padding-top: 2px
}

.walkthrough ol {
    list-style: none;
    counter-reset: steps;
    padding: 0;
    margin: 18px 0
}

.walkthrough li {
    counter-increment: steps;
    position: relative;
    padding: 0 0 22px 40px;
    font-size: 13px;
    line-height: 1.95
}

.walkthrough li:before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--soft);
    color: var(--accent);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700
}

.walkthrough li:not(:last-child):after {
    content: '';
    position: absolute;
    left: 12px;
    top: 30px;
    bottom: 5px;
    border-left: 1px dashed var(--border)
}

.reader-section p.example-hint {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.9
}

.reader.large .walkthrough li,
.reader.large .lesson-summary {
    font-size: 16px
}

.reader-section>h3 {
    line-height: 1.7
}

.reader-section p {
    overflow-wrap: break-word
}

@media(max-width:760px) {
    .walkthrough li {
        font-size: 13px;
        padding-left: 35px
    }

    .lesson-summary {
        font-size: 13px;
        padding: 14px
    }

    .reader-section h2 {
        line-height: 1.6
    }
}

.lesson-terms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 26px
}

.lesson-terms>div {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg)
}

.lesson-terms dt {
    font: 600 11px/1.7 ui-monospace, SFMono-Regular, monospace;
    color: var(--accent);
    margin-bottom: 7px;
    overflow-wrap: anywhere
}

.lesson-terms dd {
    margin: 0;
    font-size: 11px;
    line-height: 1.9;
    color: var(--muted)
}

.reader.large .lesson-terms dd {
    font-size: 14px
}

@media(max-width:760px) {
    .lesson-terms {
        grid-template-columns: 1fr;
        gap: 9px
    }

    .lesson-terms>div {
        padding: 13px
    }

    .lesson-terms dd {
        font-size: 12px
    }
}

.chapter-section .chapter-index {
    display: inline-block;
    color: var(--accent);
    font: 700 10px Manrope;
    letter-spacing: 1px;
    padding: 4px 8px;
    background: var(--soft);
    border-radius: 4px;
    margin-bottom: 13px
}

.chapter-section h2 {
    line-height: 1.6;
    font-size: 19px
}

.chapter-section .code-box {
    margin: 20px 0
}

.chapter-section .code-box+p {
    margin-top: 20px
}

.chapter-section .result {
    font-size: 12px;
    line-height: 1.8;
    color: var(--text);
    padding: 14px;
    white-space: pre-wrap;
    margin-bottom: 18px
}

.chapter-question {
    border: 0;
    border-top: 1px solid var(--border);
    padding: 25px 0 5px;
    min-width: 0;
    margin: 20px 0
}

.chapter-question legend {
    padding: 0;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 600;
    max-width: 100%
}

.chapter-question .answer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.8;
    white-space: pre-wrap
}

.chapter-question .answer>span:first-child {
    font-weight: 700;
    flex-shrink: 0
}

.test-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 15px 0 24px;
    font-size: 11px;
    color: var(--muted)
}

.test-summary .button {
    font-size: 9px;
    padding: 8px
}

.chapter-toc {
    max-height: 55vh;
    overflow: auto;
    margin: 0
}

.chapter-toc a {
    padding: 9px 0;
    line-height: 1.6;
    font-size: 10px;
    border-radius: 0;
    margin: 0
}

.reader.large .chapter-question legend,
.reader.large .chapter-question .answer {
    font-size: 16px
}

@media(max-width:760px) {
    .chapter-section h2 {
        font-size: 18px
    }

    .test-summary {
        align-items: flex-start
    }

    .chapter-question {
        padding-top: 18px
    }
}

.material-list {
    display: grid;
    gap: 14px;
    margin-top: 20px
}

.material-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px
}

.material-card .source {
    overflow-wrap: anywhere;
    line-height: 1.5
}

.material-card p {
    margin-bottom: 0;
    font-size: 14px
}

/* Interview recall bank */
/* Page gutters come from main, shared with the overview on every screen size. */
.interview,
.quick-review {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0
}

.interview .page-heading p {
    max-width: 760px
}

.interview-summary {
    display: flex;
    gap: 38px;
    flex-wrap: wrap;
    padding: 23px 28px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px
}

.interview-summary span {
    display: flex;
    align-items: baseline;
    gap: 9px;
    color: var(--muted);
    font-size: 12px
}

.interview-summary strong {
    font: 750 28px Manrope;
    color: var(--text)
}

.interview-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
    margin: 18px 0
}

.interview-controls {
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-top: 24px
}

.interview-search {
    display: block
}

.interview-search input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--text);
    font-size: 14px
}

.interview-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px
}

.interview-selects label {
    display: grid;
    gap: 8px;
    font-size: 11px;
    color: var(--muted)
}

.interview-selects select {
    width: 100%;
    min-width: 0;
    max-width: 100%
}

.interview-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px
}

.interview-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    cursor: pointer;
    margin-right: auto
}

.interview-checkbox input {
    accent-color: var(--accent);
    width: 16px;
    height: 16px
}

.interview-actions .button {
    font-size: 11px;
    padding: 10px 14px;
    min-height: 40px
}

.interview-result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--muted);
    font-size: 11px;
    margin: 20px 0 12px;
    min-height: 32px
}

.interview-topic {
    border-left: 3px solid var(--accent);
    padding: 8px 18px;
    margin-bottom: 20px
}

.interview-topic h2 {
    font: 700 18px Manrope;
    margin: 0 0 12px
}

.interview-topic a {
    color: var(--accent);
    font-size: 11px;
    display: inline-block;
    margin: 0 20px 6px 0
}

.interview-list {
    display: grid;
    gap: 16px
}

.interview-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 26px;
    scroll-margin-top: 24px
}

.interview-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px
}

.interview-card-meta .tag {
    max-width: 75%;
    white-space: normal;
    line-height: 1.6
}

.interview-number {
    font-size: 10px;
    color: var(--muted);
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

.interview-save {
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 23px;
    cursor: pointer;
    display: grid;
    place-items: center
}

.interview-save.is-saved {
    color: var(--accent);
    background: var(--soft)
}

.interview-card summary {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    list-style: none;
    cursor: pointer;
    border-radius: 4px
}

.interview-card summary::-webkit-details-marker {
    display: none
}

.interview-card summary h2 {
    font: 650 16px/1.75 Manrope;
    margin: 0;
    flex: 1;
    color: var(--text)
}

.interview-chevron {
    font-size: 22px;
    color: var(--muted);
    line-height: 1.4;
    transition: transform .15s
}

.interview-card details[open] .interview-chevron {
    transform: rotate(180deg)
}

.interview-answer {
    margin-top: 18px;
    padding: 18px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px
}

.interview-answer>span {
    font-size: 9px;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px
}

.interview-answer p {
    font-size: 14px;
    line-height: 1.95;
    margin: 10px 0 15px;
    color: var(--text);
    overflow-wrap: anywhere
}

.interview code {
    font: 0.9em/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
    background: var(--soft);
    color: var(--text);
    border-radius: 4px;
    padding: 2px 5px;
    overflow-wrap: anywhere
}

.interview-lesson {
    font-size: 11px;
    color: var(--accent)
}

.interview-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0;
    font-size: 12px;
    color: var(--muted)
}

.interview-pagination button {
    font-size: 11px;
    min-height: 42px
}

.interview-pagination button:disabled {
    opacity: .4;
    cursor: default
}

.interview #interviewResults {
    scroll-margin-top: 22px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap
}

@media(max-width:760px) {
    .interview-summary {
        gap: 23px;
        padding: 20px
    }

    .interview-summary strong {
        font-size: 25px
    }

    .interview-selects {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .interview-controls {
        padding: 18px
    }

    .interview-card {
        padding: 18px 16px
    }

    .interview-card summary h2 {
        font-size: 15px
    }

    .interview-answer {
        padding: 15px
    }

    .interview-answer p {
        font-size: 14px
    }

    .interview-result-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px
    }

    .interview-result-heading p {
        margin: 8px 0
    }

    .interview-card-meta {
        gap: 8px
    }

    .interview-card-meta .tag {
        font-size: 9px
    }

    .interview-checkbox {
        flex-basis: 100%;
        margin-bottom: 5px
    }

    .interview-pagination {
        font-size: 10px
    }

    .interview-pagination button {
        padding: 10px
    }

    .sidebar nav a {
        padding-block: 9px
    }
}

.quick-review .page-heading {
    margin-top: 0
}

.review-check-panel,
.review-section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    margin: 24px 0;
    scroll-margin-top: 24px
}

.review-check-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center
}

.review-check-head h2 {
    font: 700 19px Manrope;
    margin: 0
}

.review-check-head>span {
    font-size: 11px;
    color: var(--muted)
}

.review-checklist {
    list-style: none;
    padding: 0;
    margin: 16px 0 0
}

.review-checklist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid var(--border);
    padding: 14px 0;
    font-size: 13px
}

.review-checklist label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer
}

.review-checklist input {
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    flex-shrink: 0
}

.review-checklist a {
    color: var(--accent);
    white-space: nowrap;
    font-size: 11px
}

.review-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0
}

.review-toc a {
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1.7
}

.review-section>h2 {
    font: 700 21px/1.6 Manrope;
    margin: 0 0 14px
}

.review-intro,
.review-text p {
    font-size: 14px;
    line-height: 1.95;
    color: var(--text);
    margin: 16px 0
}

.review-intro {
    color: var(--muted)
}

.review-section .chapter-index {
    font-size: 11px;
    color: var(--accent);
    background: var(--soft);
    padding: 5px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 13px
}

.review-section .code-box {
    margin-top: 20px
}

.review-cards {
    margin: 20px 0
}

.review-cards>div {
    border-top: 1px solid var(--border);
    padding: 18px 0
}

.review-cards dt {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 650
}

.review-cards dd {
    font-size: 13px;
    line-height: 1.95;
    color: var(--muted);
    margin: 10px 0 0
}

.review-table-wrap {
    overflow-x: auto;
    margin: 22px 0;
    border: 1px solid var(--border);
    border-radius: 8px
}

.review-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    line-height: 1.9
}

.review-table th,
.review-table td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border)
}

.review-table thead {
    background: var(--bg);
    color: var(--muted);
    font-size: 10px
}

.review-table tbody th {
    font-weight: 600;
    min-width: 135px;
    width: 26%
}

.review-table tr:last-child>* {
    border-bottom: 0
}

.review-traps {
    display: grid;
    gap: 10px;
    margin-top: 20px
}

.review-traps details {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px
}

.review-traps summary {
    font-size: 14px;
    line-height: 1.8;
    cursor: pointer
}

.review-traps p {
    font-size: 13px;
    line-height: 1.9;
    margin: 14px 0 0;
    color: var(--muted)
}

.review-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.8;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    margin: 9px 0;
    cursor: pointer
}

.review-option input {
    margin-top: 5px;
    accent-color: var(--accent)
}

.review-option.is-correct {
    border-color: var(--green);
    color: var(--green)
}

.review-explanation {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted)
}

.review-score {
    font-size: 18px;
    color: var(--green);
    font-weight: 700
}

.review-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--accent);
    font-size: 12px
}

@media(max-width:760px) {

    .review-section,
    .review-check-panel {
        padding: 20px 16px
    }

    .review-check-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px
    }

    .review-checklist li {
        font-size: 12px
    }

    .review-section>h2 {
        font-size: 19px
    }

    .review-table {
        min-width: 440px
    }

    .review-intro,
    .review-text p {
        font-size: 13px
    }

    .review-cards dt {
        font-size: 14px
    }
}

.device-search {
    display: block;
    margin: 26px 0 16px
}

.device-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 14px
}

.device-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.device-filters button {
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px 13px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px
}

.device-filters button.active {
    background: var(--soft);
    color: var(--accent);
    border-color: var(--accent)
}

.device-section>h2 {
    margin-top: 17px
}

.device-tip {
    font-size: 13px;
    line-height: 1.9;
    padding: 15px;
    background: var(--soft);
    border-radius: 8px;
    margin-top: 22px
}

.device-source {
    font-size: 12px;
    color: var(--accent)
}

.device-guide button:focus-visible,
.device-guide input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px
}

.sidebar #nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain
}

.sidebar-bottom {
    flex-shrink: 0
}

.sidebar .brand,
.sidebar .workspace,
.sidebar .nav-label {
    flex-shrink: 0
}

.device-update-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    padding: 17px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    font-size: 12px;
    line-height: 1.7
}

.device-update-note span {
    color: var(--muted)
}

.device-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

.device-meta>span:last-child:not(.tag) {
    color: var(--muted);
    font-size: 10px
}

.device-references {
    display: flex;
    gap: 14px 24px;
    flex-wrap: wrap;
    line-height: 1.8
}

.device-toc {
    margin: 24px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    background: var(--panel)
}

.device-toc summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 650
}

.device-toc nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 22px;
    margin-top: 20px
}

.device-toc a {
    font-size: 12px;
    line-height: 1.8;
    color: var(--accent)
}

.device-table {
    min-width: 850px
}

.device-table caption {
    text-align: left;
    padding: 14px 16px;
    font-weight: 650
}

.device-table tbody th {
    width: 20%;
    min-width: 140px
}

.device-table th,
.device-table td {
    padding: 14px 12px;
    font-size: 12px
}

.device-table th a {
    color: var(--accent)
}

.device-table td:nth-child(2),
.device-table td:nth-child(3) {
    white-space: nowrap
}

.device-table td:last-child {
    min-width: 230px
}

.device-section:focus {
    outline: 2px solid var(--accent);
    outline-offset: 3px
}

@media(max-width:760px) {
    .device-toc nav {
        grid-template-columns: 1fr
    }

    .device-meta {
        gap: 8px
    }

    .device-update-note {
        align-items: flex-start;
        flex-direction: column
    }
}

.workflow-section h3 {
    font-size: 14px;
    margin: 24px 0 12px
}

.workflow-steps {
    padding-left: 24px;
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.95
}

.workflow-steps li {
    padding-left: 7px;
    margin: 8px 0
}

.workflow-section .code-top span {
    white-space: nowrap
}

.workflow-section:focus {
    outline: 2px solid var(--accent);
    outline-offset: 3px
}

.workflow-guide .page-heading>a {
    white-space: normal;
    line-height: 1.6;
    flex-shrink: 0;
    max-width: 230px
}

.workflow-reference {
    display: inline-block;
    margin-left: 20px;
    line-height: 2
}

@media(max-width:760px) {
    .workflow-reference {
        display: block;
        margin-left: 0;
        margin-top: 12px
    }

    .workflow-guide .page-heading>a {
        max-width: none;
        align-self: flex-start
    }
}

.brand-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: transparent;
    border-radius: 0
}

.brand-icon svg {
    width: 36px;
    height: 36px;
    stroke: none;
    display: block
}

.sidebar>.profile {
    margin: 25px 0 22px;
    padding: 13px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    flex-shrink: 0;
    gap: 9px
}

.profile-details {
    min-width: 0;
    flex: 1
}

.profile #profileName {
    display: block;
    line-height: 1.5;
    overflow-wrap: anywhere
}

.profile .avatar {
    flex-shrink: 0
}

.profile #theme {
    flex-shrink: 0;
    min-width: 34px;
    min-height: 36px;
    padding: 5px;
    font-size: 18px
}

.sidebar #nav {
    margin-bottom: 18px
}

.history-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 24px 0
}

.history-controls .device-search {
    flex: 1;
    margin: 0
}

.history-controls select {
    max-width: 230px
}

.history-controls select[hidden] {
    display: none
}

.history-stamp {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px
}

.history-stamp>span {
    font-size: 19px;
    color: var(--accent);
    font-weight: 750
}

.history-stamp>strong {
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 11px;
    color: var(--muted)
}

.history-event {
    border-left: 3px solid var(--accent)
}

.history-status {
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 11px;
    background: var(--soft);
    color: var(--accent)
}

.history-status.removed {
    background: #a13a3217;
    color: #bb5046
}

.history-status.alternative {
    background: #337e6c15;
    color: var(--green)
}

.history-status.mode {
    background: #7d64bd18;
    color: #9478c9
}

.history-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0
}

.history-code-grid>div {
    min-width: 0
}

.history-code-grid h3 {
    font-size: 12px;
    margin: 0 0 12px
}

.history-code-grid .code-box {
    margin: 0
}

.history-code-grid .code-top {
    gap: 8px;
    flex-wrap: wrap
}

.history-code-grid .code-top button {
    font-size: 10px
}

.history-code-grid pre {
    font-size: 11px
}

.history-migration>h2 {
    margin-top: 18px
}

@media(max-width:1000px) {
    .history-code-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:760px) {
    .history-controls {
        flex-wrap: wrap
    }

    .history-controls .device-search {
        flex-basis: 100%
    }

    .history-controls select {
        width: 100%;
        max-width: none
    }

    .sidebar>.profile {
        margin-top: 22px
    }
}

.swift-tile {
    background: transparent;
    border-radius: 20px
}

.swift-tile svg {
    width: 84px;
    height: 84px;
    display: block;
    stroke: none
}

.admin-table {
    min-width: 830px
}

.admin-table td,
.admin-table th {
    overflow-wrap: anywhere
}

.admin-table td:nth-child(3),
.admin-table td:nth-child(4) {
    min-width: 160px;
    white-space: nowrap
}

.admin-table tbody th {
    min-width: 150px
}

.admin-table td:nth-child(2) {
    min-width: 190px
}

/* Optional Google sign-in for personal tools. */
.auth-gate { padding:48px 32px;border:1px solid var(--border);border-radius:16px;background:var(--panel); }
.auth-gate p,.sign-in-dialog p { max-width:600px;color:var(--muted);line-height:1.8; }
.auth-gate.is-compact { padding:20px; }
.auth-gate-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:20px; }
.sign-in-dialog { width:min(480px,calc(100vw - 32px));padding:28px;border:1px solid var(--border);border-radius:16px;background:var(--panel);color:var(--text); }
.sign-in-dialog::backdrop { background:#10182780; }
@media(max-width:760px) { .auth-gate { padding:28px 20px; }.google-sign-in { padding:9px;font-size:10px; } }

/* Feedback is public to send, private to the owner's inbox. */
.feedback-page { max-width:760px; }
.feedback-form { display:grid;gap:10px;padding:24px;border:1px solid var(--border);border-radius:14px;background:var(--panel); }
.feedback-form label { margin-top:8px;font-size:12px;font-weight:600; }
.feedback-form input,.feedback-form select,.feedback-form textarea { width:100%;min-width:0;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit; }
.feedback-form textarea { resize:vertical; }
.feedback-form small { color:var(--muted);font-size:11px; }
.feedback-form .button { justify-self:start;margin-top:12px; }
.feedback-form[hidden],#feedbackAgain[hidden],#accountFeedbackInbox[hidden] { display:none; }
#accountFeedbackInbox { margin:0 20px 16px;font-size:11px; }
.feedback-trap { position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden; }
.feedback-item { padding:24px;margin:16px 0;border:1px solid var(--border);border-radius:14px;background:var(--panel); }
.feedback-item-heading { display:flex;flex-wrap:wrap;align-items:center;gap:10px; }
.feedback-body { white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.9; }

.analytics-cards { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0; }
.analytics-cards strong { font-size:28px;font-variant-numeric:tabular-nums; }
.analytics-cards p { color:var(--muted);font-size:12px; }
#accountAnalytics { margin:0 20px 16px;font-size:11px; }
#accountAnalytics[hidden] { display:none; }
@media(max-width:900px) { .analytics-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Header: quiet surfaces, compact controls and account details. */
.topbar { position: relative; z-index: 15; }
.top-actions { gap: 14px; }
.top-actions .version { font-size: 11px; font-weight: 550; margin-right: 5px; }
.top-actions .version i { width: 6px; height: 6px; margin-right: 7px; box-shadow: 0 0 0 3px #5d9c800d; }
.language-picker, .account-menu { position: relative; flex-shrink: 0; }
.top-actions .search-trigger {
    height: 42px; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 1px 2px #20262e03, inset 0 1px 0 #ffffff40;
    transition: background .18s, border-color .18s, box-shadow .18s;
}
.language-trigger {
    display: flex; align-items: center; gap: 8px;
}
.language-trigger .language-globe { width: 15px; height: 15px; color: var(--muted); }
.picker-chevron { width: 13px; height: 13px; color: var(--muted); transition: transform .18s; }
.language-trigger[aria-expanded="true"] .picker-chevron { transform: rotate(180deg); }
.top-actions .search-trigger { width: clamp(180px, 20vw, 260px); gap: 11px; padding: 0 12px; background: var(--bg); font-size: 12px; }
.top-actions .search-trigger:hover { border-color: #e8794566; box-shadow: 0 3px 12px #26324a06; }
.search-trigger .search-icon { width: 17px; height: 17px; flex-shrink: 0; }
.search-trigger kbd { display: grid; place-items: center; width: 23px; height: 24px; padding: 0; border-radius: 6px; background: var(--panel); font: 12px 'DM Sans',sans-serif; box-shadow: 0 1px 2px #20262e05; }
.profile-trigger { display: grid; place-items: center; position: relative; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: transparent; transition: box-shadow .18s; }
.profile-trigger .avatar { width: 36px; height: 36px; font-size: 11px; letter-spacing: .02em; background: linear-gradient(140deg,#f2e9de,#e8dfd3); box-shadow: inset 0 0 0 1px #8a705610; }
.profile-trigger:hover, .profile-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--soft); }
.profile-status { position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; background: #5d9c80; border: 2px solid var(--panel); border-radius: 50%; }
.header-popover { position: absolute; top: calc(100% + 12px); right: 0; z-index: 50; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 50px #17233315, 0 3px 10px #17233306; animation: header-reveal .16s ease-out; }
.header-popover[hidden] { display: none; }
.popover-eyebrow { display: block; color: var(--muted); font-size: 9px; line-height: 1.5; font-weight: 700; letter-spacing: .12em; }
.language-options { width: 238px; padding: 8px; }
.language-options>.popover-eyebrow { padding: 9px 10px 10px; }
.language-options [role="option"] { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border-radius: 9px; background: transparent; text-align: left; font-size: 12px; }
.language-options [role="option"]:hover { background: var(--bg); }
.language-options [aria-selected="true"] { background: var(--soft); }
.language-code { display: grid; place-items: center; width: 29px; height: 27px; flex-shrink: 0; border: 1px solid var(--border); background: var(--panel); border-radius: 6px; font-size: 9px; font-weight: 700; color: var(--muted); }
.language-check { width: 16px; height: 16px; margin-left: auto; color: var(--accent); visibility: hidden; }
[aria-selected="true"]>.language-check { visibility: visible; }
.profile-panel { width: 340px; overflow: hidden; }
.account-menu[hidden],.google-sign-in[hidden] { display:none; }
.google-sign-in { font-size:11px;white-space:nowrap; }
.breadcrumb { min-width:0; }
.breadcrumb strong { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.breadcrumb #menu,.top-actions { flex-shrink:0; }
.profile-panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px 0; }
.profile-close { display: grid; place-items: center; padding: 5px; background: transparent; border-radius: 7px; color: var(--muted); }
.profile-close svg { width: 14px; height: 14px; }
.profile-close:hover { background: var(--bg); color: var(--text); }
.profile-identity { display: flex; align-items: center; gap: 12px; padding: 17px 20px 23px; }
.profile-identity>div { min-width: 0; }
.profile-identity .account-avatar { flex-shrink: 0; width: 48px; height: 48px; font-size: 14px; background: linear-gradient(140deg,#f2e9de,#e8dfd3); }
.profile-identity h2 { margin: 0 0 5px; font-family: 'Manrope',sans-serif; font-size: 15px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.profile-identity p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.profile-facts { margin: 0 20px; padding: 16px 0; border-top: 1px solid var(--border); display: grid; gap: 14px; }
.profile-facts>div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.profile-facts dt { color: var(--muted); font-size: 11px; }
.profile-facts dd { margin: 0; font-size: 11px; font-weight: 600; text-align: right; }
.profile-facts .is-admin { padding: 4px 8px; color: var(--accent); background: var(--soft); border-radius: 6px; font-size: 10px; }
.profile-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 20px; background: var(--bg); border-top: 1px solid var(--border); }
.account-session { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.account-session i { width: 5px; height: 5px; border-radius: 50%; background: #5d9c80; }
.profile-panel .logout-button { border: 0; padding: 7px 8px; border-radius: 7px; min-height: 32px; font-size: 11px; background: transparent; color: var(--text); }
.profile-panel .logout-button:hover { background: var(--panel); color: var(--accent); }
.profile-panel .logout-button svg { width: 15px; height: 15px; }
.profile-trigger:focus-visible, .search-trigger:focus-visible, .language-options button:focus-visible, .profile-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.search-modal { border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 28px 100px #17233326; overflow: hidden; }
.search-input>svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.search-input #closeSearch { border: 1px solid var(--border); background: var(--bg); border-radius: 6px; padding: 4px 7px; font-size: 10px; }
.search-hit { transition: background .15s; }
.search-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
body.dark .header-popover { box-shadow: 0 18px 50px #0005; }
body.dark .profile-trigger .avatar, body.dark .profile-identity .account-avatar { background: linear-gradient(140deg,#4a3e33,#382f29); color: #e5c7a7; }
@keyframes header-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:1100px) and (min-width:761px) {
    .top-actions { gap: 10px; }
    .top-actions .search-trigger { width: 180px; }
    .language-trigger .language-globe { display: none; }
}
@media(max-width:760px) {
    .top-actions { gap: 8px; }
    .top-actions .version { display: none; }
    .language-trigger { gap: 5px; }
    .language-trigger .language-globe { display: none; }
    .top-actions .search-trigger { width: 38px; height: 38px; padding: 0; justify-content: center; background: var(--panel); }
    .top-actions .search-trigger span, .top-actions .search-trigger kbd { display: none; }
    .profile-trigger { width: 38px; height: 38px; }
    .profile-trigger .avatar { width: 32px; height: 32px; }
    .header-popover { position: fixed; top: 76px; right: 16px; max-width: calc(100vw - 32px); }
    .profile-panel { width: 340px; }
    .language-options { width: 260px; }
}
@media(prefers-reduced-motion:reduce) {
    .header-popover { animation: none; }
    .language-trigger, .top-actions .search-trigger, .profile-trigger, .picker-chevron { transition: none; }
}

/* Swift Playground */
.pg-runtime { display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:11px;color:var(--muted); }
.pg-runtime>i { width:6px;height:6px;border-radius:50%;background:var(--muted); }
.pg-runtime.is-ready>i { background:#5d9c80;box-shadow:0 0 0 3px #5d9c8015; }
.pg-runtime small { margin-left:auto;font-size:10px; }
.pg-workspace { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start; }
.pg-editor-panel,.pg-output-panel { border:1px solid var(--border);border-radius:14px;background:var(--panel);overflow:hidden;min-width:0; }
.pg-toolbar { display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border); }
.pg-file { display:flex;align-items:center;gap:7px;font:11px ui-monospace,monospace;white-space:nowrap; }
.pg-file i { width:6px;height:6px;border-radius:50%;background:var(--accent); }
.pg-toolbar select { min-width:0;max-width:190px;margin-left:auto; }
.pg-toolbar .button { padding:7px 6px;font-size:10px; }
.pg-code-layout { display:grid;grid-template-columns:45px minmax(0,1fr);background:#202732;color:#e9edf3; }
.pg-code-stack { position:relative;height:420px;min-width:0; }
.pg-highlight,.pg-code-input,.pg-gutter { margin:0;border:0;border-radius:0;font:13px/24px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;tab-size:4;font-variant-ligatures:none; }
.pg-gutter { padding:20px 9px 20px 0;text-align:right;color:#727d90;background:#1c232d;height:420px;overflow:hidden;user-select:none; }
.pg-highlight,.pg-code-input { position:absolute;inset:0;width:100%;height:100%;padding:20px 18px;white-space:pre;overflow:auto;background:transparent; }
.pg-highlight { pointer-events:none;overflow:hidden; }
.pg-highlight code { font:inherit;color:inherit;white-space:inherit;padding:0;background:none; }
.pg-code-input { resize:none;color:transparent;caret-color:#fff;-webkit-text-fill-color:transparent;outline:none; }
.pg-code-input::selection { background:#e8794545; }
.pg-code-stack:focus-within { box-shadow:inset 0 0 0 1px #e8794580; }
.pg-editor-footer { display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font-size:9px;color:var(--muted);border-bottom:1px solid var(--border); }
.pg-runbar { display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--border); }
.pg-runbar small { margin-right:auto;color:var(--muted);font-size:9px; }
.pg-runbar .button { font-size:11px;padding:10px 14px; }
.pg-runbar [hidden],.pg-output[hidden],.pg-result-empty[hidden],.pg-execution-message[hidden] { display:none; }
.pg-right { display:grid;gap:20px;min-width:0; }
.pg-output-heading { display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid var(--border); }
.pg-output-heading h2 { font:700 12px Manrope,sans-serif;margin:0; }
#pgResultStatus { margin-left:auto;font-size:9px;color:var(--muted); }
#pgResultStatus[data-state="success"] { color:var(--green); }
#pgResultStatus[data-state="error"] { color:#c76c54; }
.pg-output-heading .icon-btn { font-size:10px; }
.pg-result-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:260px;padding:30px 20px;color:var(--muted); }
.pg-result-empty>span { font:25px ui-monospace,monospace;color:var(--accent);margin-bottom:16px; }
.pg-result-empty strong { font-size:12px;color:var(--text);font-weight:550; }
.pg-result-empty p { font-size:11px;line-height:1.8;margin:8px 0 0; }
.pg-output { margin:0;padding:18px;min-height:260px;max-height:500px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.9 ui-monospace,monospace;color:var(--text);background:var(--bg); }
.pg-execution-message { padding:12px 16px;margin:0;background:var(--soft);color:var(--text);font-size:11px;line-height:1.8;border-top:1px solid var(--border); }
@media(max-width:1100px) { .pg-workspace { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) { .pg-right { grid-template-columns:minmax(0,1fr); }.pg-toolbar { flex-wrap:wrap;padding:10px;gap:6px; }.pg-file { margin-right:auto; }.pg-toolbar select { max-width:190px;margin-left:0; }.pg-code-stack,.pg-gutter { height:340px; }.pg-code-input,.pg-highlight { padding:16px 12px;font-size:12px; }.pg-gutter { padding-top:16px;font-size:11px; }.pg-code-layout { grid-template-columns:34px minmax(0,1fr); }.pg-runbar { flex-wrap:wrap; }.pg-runbar small { flex-basis:100%; }.pg-editor-footer { font-size:8px; } }

/* Playground focus mode, including browsers without the Fullscreen API. */
.pg-fullscreen-button { flex-shrink:0;gap:8px;font-size:11px; }
.pg-fullscreen-button svg { width:15px;height:15px; }
.swift-playground.is-expanded {
    position:fixed;inset:0;z-index:100;width:100%;height:100vh;height:100dvh;
    display:flex;flex-direction:column;min-height:0;padding:24px;
    background:var(--bg);overflow:auto;
}
.swift-playground.is-expanded .page-heading { flex-shrink:0;margin-bottom:16px;align-items:center; }
.swift-playground.is-expanded .page-heading h1 { margin:0;font-size:22px; }
.swift-playground.is-expanded .page-heading .eyebrow,
.swift-playground.is-expanded .page-heading p { display:none; }
.swift-playground.is-expanded .pg-runtime { flex-shrink:0;margin-bottom:14px; }
.swift-playground.is-expanded .pg-workspace { flex:1;min-height:0;align-items:stretch;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
.swift-playground.is-expanded .pg-editor-panel { display:flex;flex-direction:column;min-height:0; }
.swift-playground.is-expanded .pg-toolbar,
.swift-playground.is-expanded .pg-editor-footer,
.swift-playground.is-expanded .pg-runbar { flex-shrink:0; }
.swift-playground.is-expanded .pg-code-layout { flex:1;min-height:0; }
.swift-playground.is-expanded .pg-code-stack,
.swift-playground.is-expanded .pg-gutter { height:100%;min-height:0; }
.swift-playground.is-expanded .pg-right { display:flex;flex-direction:column;min-height:0; }
.swift-playground.is-expanded .pg-output-panel { display:flex;flex-direction:column;flex:1;min-height:0; }
.swift-playground.is-expanded .pg-output-heading,
.swift-playground.is-expanded .pg-execution-message { flex-shrink:0; }
.swift-playground.is-expanded .pg-output { flex:1;min-height:0;max-height:none; }
.swift-playground.is-expanded .pg-result-empty { flex:1;min-height:0; }
@media(max-width:760px) {
    .swift-playground>.page-heading { flex-wrap:wrap; }
    .swift-playground.is-expanded { padding:14px; }
    .swift-playground.is-expanded .page-heading { flex-wrap:nowrap;gap:8px; }
    .swift-playground.is-expanded .page-heading h1 { font-size:18px; }
    .swift-playground.is-expanded .pg-workspace { grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(260px,1.5fr) minmax(150px,1fr);gap:12px; }
    .swift-playground.is-expanded .pg-toolbar { padding:8px; }
    .swift-playground.is-expanded .pg-runbar { padding:8px 12px; }
    .swift-playground.is-expanded .pg-runbar small { display:none; }
    .pg-fullscreen-button { padding:9px 11px; }
}


/* Keep the console present while the runner returns its result. */
.pg-output-panel { min-height:310px; }
.pg-output-panel[aria-busy="true"] .pg-output { color:var(--muted); }
#pgResultStatus[data-state="running"] { display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums; }
#pgResultStatus[data-state="running"]::before { content:"";width:9px;height:9px;border:1.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:pg-spin .8s linear infinite; }
@keyframes pg-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { #pgResultStatus[data-state="running"]::before { animation:none; } }
.swift-playground.is-expanded .pg-output-panel { min-height:0; }
/* Reusable selection field. Pages only control width and placement.
   Use <select class="atlas-select"> with its accessible label.
   Custom selection triggers share .atlas-select-button. */
:root {
    --select-height: 42px;
    --select-radius: 11px;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c8491' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
body.dark {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa5b3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
select.atlas-select,
.atlas-select-button {
    height: var(--select-height);
    min-height: var(--select-height);
    border: 1px solid var(--border);
    border-radius: var(--select-radius);
    background-color: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.4;
    box-shadow: 0 1px 2px #20262e04, inset 0 1px 0 #ffffff18;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}
select.atlas-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 0 39px 0 13px;
    background-image: var(--select-chevron);
    background-position: right 12px center;
    background-size: 15px 15px;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
    color-scheme: light;
}
.atlas-select-button { padding: 0 12px; }
select.atlas-select:hover:not(:disabled),
.atlas-select-button:hover:not(:disabled) {
    border-color: #e8794570;
    box-shadow: 0 2px 8px #26324a06;
}
select.atlas-select:focus-visible,
.atlas-select-button:focus-visible,
.atlas-select-button[aria-expanded="true"] {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 3px #e879451c, 0 2px 6px #26324a05;
}
select.atlas-select:disabled,
.atlas-select-button:disabled {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none;
}
select.atlas-select option,
select.atlas-select optgroup {
    background: var(--panel);
    color: var(--text);
    font-weight: 450;
}
body.dark select.atlas-select { color-scheme: dark; }
@media(max-width:760px) {
    :root { --select-height: 40px; }
    select.atlas-select { padding-left: 12px; padding-right: 35px; background-position: right 10px center; }
}
@media(prefers-reduced-motion:reduce) {
    select.atlas-select, .atlas-select-button { transition: none; }
}
@media(forced-colors:active) {
    select.atlas-select { appearance:auto;background-image:none;padding-right:12px; }
    select.atlas-select:focus-visible, .atlas-select-button:focus-visible { outline:2px solid Highlight; }
}