/* BAROSTEP RTDB — locally bundled type, an electric product stage, and a calm paper reader. */
@font-face {
  font-family:'Guide Pretendard';
  src:url('guide.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
:root {
  --ink:#e6eefc;
  --muted:#a9bbd4;
  --blue:#a4c1ff;
  --deep:#111b33;
  --line:#344761;
  --soft:#17263c;
  --green:#b7e7ca;
  --canvas:#080d1b;
  --surface:#111a2c;
  --dark-line:#26324b;
  --text:#edf2ff;
  --dim:#aab7d0;
  --accent:#a0b8ff;
  --cyan:#95e7fb;
  --focus:#81d9ff;
  --chrome-bg:#090f1f;
  --chrome-line:#243049;
  --brand-text:#f2f6ff;
  --brand-bg:#152449;
  --brand-line:#45619a;
  --chrome-button:#101a2e;
  --chrome-button-line:#394964;
  --chrome-button-hover:#1a2843;
  --chrome-hover-line:#758cb9;
  --control-bg:#131e33;
  --control-hover:#1b2a45;
  --nav-text:#b1bed7;
  --nav-hover:#121f36;
  --nav-active:#162748;
  --nav-active-line:#354f83;
  --nav-active-text:#eff5ff;
  --nav-icon:#94a9d0;
  --nav-active-icon:#a6dcff;
  --nav-label:#a1afca;
  --scroll-thumb:#354567;
  --search-bg:#111b2f;
  --search-line:#334360;
  --search-text:#f0f4ff;
  --search-placeholder:#b4c0d9;
  --search-hover-line:#56709b;
  --search-focus-line:#85adff;
  --route-text:#e7efff;
  --route-divider:#92a2c0;
  --hero-bg:#0c1325;
  --hero-line:#26334f;
  --hero-eyebrow:#aebfff;
  --hero-title:#f6f8ff;
  --hero-accent:#8ee3ff;
  --hero-copy:#bfcde5;
  --hero-flow:#b8c7e2;
  --hero-ordinal:#93b5ff;
  --hero-flow-line:#29364f;
  --hero-frame:#10192c;
  --hero-frame-line:#506797;
  --hero-frame-copy:#bac9e1;
  --hero-window-copy:#b5c8e7;
  --hero-frame-link:#afdcff;
  --hero-dot:#778ab0;
  --stage-glow-a:#3852edaa;
  --stage-glow-b:#854ad180;
  --stage-grid:#769bff26;
  --photo-glow:#4c70ff35;
  --nav-card-text:#edf2ff;
  --nav-card-hover-text:#c8d8ff;
  --card-copy:#afbed7;
  --card-arrow:#a9bfff;
  --icon:#a2bbff;
  --quick-bg:#121e34;
  --quick-line:#303e59;
  --quick-hover:#182744;
  --quick-hover-line:#607db9;
  --quick-icon:#a4cbff;
  --quick-violet:#c4b3ff;
  --quick-mint:#a6e9e6;
  --topic-bg:#10192b;
  --topic-line:#2e3b55;
  --topic-hover:#142039;
  --topic-hover-line:#5976b3;
  --topic-icon:#93b3f9;
  --topic-role:#aebbd3;
  --topic-count:#b4c9ff;
  --help-bg:#111d33;
  --help-line:#354766;
  --help-copy:#b7c5de;
  --utility-bg:#1a2b47;
  --utility-line:#405775;
  --utility-text:#d5e2ff;
  --utility-hover:#233858;
  --utility-hover-line:#7b99c9;
  --paper:#111d30;
  --paper-card:#18283f;
  --paper-hover:#223751;
  --paper-line:#354863;
  --paper-line-soft:#2b3e59;
  --paper-soft:#15243a;
  --paper-chip:#203656;
  --paper-chip-text:#b9d2ff;
  --paper-goal:#becde2;
  --paper-callout:#1b314b;
  --paper-callout-text:#cbdfff;
  --paper-summary:#c8ddfa;
  --paper-timeline:#455f81;
  --paper-warning:#30281b;
  --paper-warning-text:#f0d8ad;
  --paper-warning-line:#77613b;
  --paper-warning-bar:#cba050;
  --paper-tip:#163329;
  --paper-tip-text:#bde8d2;
  --paper-tip-line:#355d49;
  --paper-tip-bar:#80b795;
  --paper-expected:#193628;
  --paper-expected-text:#ceeed8;
  --paper-expected-line:#3b654a;
  --paper-expected-bar:#80ba95;
  --paper-expected-label:#b4e9c8;
  --paper-table-head:#233850;
  --paper-table-text:#d6e6ff;
  --paper-icon-bg:#22395a;
  --paper-icon:#b2ccff;
  --paper-strong:#c6dbf8;
  --dialog-bg:#101c2e;
  --dialog-line:#617695;
  --zoom-bg:#0b1525;
  --photo-line:#6b81a2;
  --photo-ink:#182b43;
  --paper-shadow:0 16px 54px #02050e50;
  --footer-strong:#e6eeff;
  --mobile-drawer:#0d1629;
  --mobile-active:#1b2e51;
  --mobile-active-line:#466194;
  --mobile-close:#1a2943;
  --mobile-close-line:#3a5177;
  --header:78px; --radius:16px;
  color-scheme:dark;
}
html[data-theme='light'] {
  --ink:#182b43;
  --muted:#53647b;
  --blue:#244fa7;
  --deep:#111b33;
  --line:#dce4ed;
  --soft:#f4f7fb;
  --green:#245c43;
  --canvas:#eef3fa;
  --surface:#fff;
  --dark-line:#ccd8e9;
  --text:#1b3152;
  --dim:#526783;
  --accent:#244fa7;
  --cyan:#125e9c;
  --focus:#2355b6;
  --chrome-bg:#fff;
  --chrome-line:#d5deec;
  --brand-text:#183051;
  --brand-bg:#152449;
  --brand-line:#45619a;
  --chrome-button:#f3f6fb;
  --chrome-button-line:#c9d6e9;
  --chrome-button-hover:#e6eefb;
  --chrome-hover-line:#93abd0;
  --control-bg:#fff;
  --control-hover:#edf3fb;
  --nav-text:#4a617f;
  --nav-hover:#e5edf9;
  --nav-active:#dde8fc;
  --nav-active-line:#9eb7e3;
  --nav-active-text:#1e4685;
  --nav-icon:#4a6896;
  --nav-active-icon:#255899;
  --nav-label:#546987;
  --scroll-thumb:#bfcee4;
  --search-bg:#fff;
  --search-line:#c4d2e7;
  --search-text:#1b3152;
  --search-placeholder:#526987;
  --search-hover-line:#8fa7cc;
  --search-focus-line:#3b68b9;
  --route-text:#2b4971;
  --route-divider:#647d9c;
  --hero-bg:#e9f1ff;
  --hero-line:#b9ccec;
  --hero-eyebrow:#315b9b;
  --hero-title:#142d52;
  --hero-accent:#155b9e;
  --hero-copy:#3e5b7f;
  --hero-flow:#3c5b83;
  --hero-ordinal:#2d5398;
  --hero-flow-line:#b8ccea;
  --hero-frame:#f8fbff;
  --hero-frame-line:#9ab2d6;
  --hero-frame-copy:#475f80;
  --hero-window-copy:#435f83;
  --hero-frame-link:#245596;
  --hero-dot:#7b95bb;
  --stage-glow-a:#739af43d;
  --stage-glow-b:#8a9bdb33;
  --stage-grid:#476bba26;
  --photo-glow:#4777d526;
  --nav-card-text:#1b3152;
  --nav-card-hover-text:#234e91;
  --card-copy:#4b6281;
  --card-arrow:#2d589c;
  --icon:#365f9e;
  --quick-bg:#fff;
  --quick-line:#c5d3e9;
  --quick-hover:#f1f6ff;
  --quick-hover-line:#8faad6;
  --quick-icon:#2f5d9e;
  --quick-violet:#594699;
  --quick-mint:#1b6769;
  --topic-bg:#fff;
  --topic-line:#c9d6e9;
  --topic-hover:#f0f5ff;
  --topic-hover-line:#8fa9d4;
  --topic-icon:#3c5f9b;
  --topic-role:#546885;
  --topic-count:#2e5596;
  --help-bg:#e3ecfb;
  --help-line:#b4c8e8;
  --help-copy:#4a6488;
  --utility-bg:#fff;
  --utility-line:#b4c8e4;
  --utility-text:#234b89;
  --utility-hover:#edf4ff;
  --utility-hover-line:#8ca8d1;
  --paper:#fbfcfe;
  --paper-card:#fff;
  --paper-hover:#edf3ff;
  --paper-line:#d7e0ed;
  --paper-line-soft:#e5ebf3;
  --paper-soft:#f2f5fa;
  --paper-chip:#e9effc;
  --paper-chip-text:#234a93;
  --paper-goal:#465b78;
  --paper-callout:#edf3fa;
  --paper-callout-text:#243f63;
  --paper-summary:#244364;
  --paper-timeline:#bdcde3;
  --paper-warning:#fff8e9;
  --paper-warning-text:#58421f;
  --paper-warning-line:#e4d4b7;
  --paper-warning-bar:#a36d20;
  --paper-tip:#eef7f2;
  --paper-tip-text:#28513d;
  --paper-tip-line:#c7ded4;
  --paper-tip-bar:#42795f;
  --paper-expected:#eff7f1;
  --paper-expected-text:#214a32;
  --paper-expected-line:#c6dece;
  --paper-expected-bar:#3c7756;
  --paper-expected-label:#235d3e;
  --paper-table-head:#ebf0f8;
  --paper-table-text:#254261;
  --paper-icon-bg:#e7eefb;
  --paper-icon:#335ca2;
  --paper-strong:#244364;
  --dialog-bg:#fff;
  --dialog-line:#a6b9d4;
  --zoom-bg:#f0f4fa;
  --photo-line:#bdcce0;
  --photo-ink:#182b43;
  --paper-shadow:0 10px 36px #1a315415;
  --footer-strong:#263f65;
  --mobile-drawer:#f7faff;
  --mobile-active:#dce8fc;
  --mobile-active-line:#9ab5df;
  --mobile-close:#eaf1fc;
  --mobile-close-line:#b6c8e4;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:118px;scroll-behavior:auto}
body{margin:0;background:var(--canvas);color:var(--text);font:20px/1.75 'Guide Pretendard','Malgun Gothic','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;word-break:keep-all;overflow-wrap:anywhere}
button,input,select{font:inherit;color:inherit}
button,a,input,select,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:var(--accent);text-underline-offset:5px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.view h1:focus,.view h2:focus,section[data-task-owner]>h3:focus{outline:none}
[hidden]{display:none!important}
h1,h2,h3,h4{color:inherit;line-height:1.3;letter-spacing:-.035em}
h2{font-size:36px;margin:0 0 18px;font-weight:750}
h3{font-size:26px;margin:26px 0 14px;font-weight:700}
h4{font-size:22px;margin:12px 0}
p{margin:12px 0}
button{border:1px solid var(--dark-line);border-radius:9px;background:var(--control-bg);min-height:44px;padding:8px 16px;font-size:18px;line-height:1.6}
button:hover{border-color:#516990;background:var(--control-hover)}
input,select{font-size:18px;min-height:44px}
.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{z-index:100;top:12px;left:16px;width:auto;height:auto;clip:auto;margin:0;padding:10px 18px;background:var(--paper-card);color:var(--ink);border-radius:8px}
.asset-library{position:absolute;width:0;height:0;overflow:hidden}

/* Shared product chrome; the theme tokens also recolor the complete mobile drawer. */
.site-header{height:var(--header);position:sticky;top:0;z-index:30;background:var(--chrome-bg);border-bottom:1px solid var(--chrome-line)}
.header-inner{height:100%;max-width:1500px;margin:auto;padding:0 36px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:13px;color:var(--brand-text);text-decoration:none;font-size:21px;font-weight:650;white-space:nowrap;letter-spacing:-.02em}
.brand b{font-weight:800}
.brand-mark{display:grid;place-items:center;background:var(--brand-bg);color:#fff;width:43px;height:43px;border:1px solid var(--brand-line);border-radius:11px;flex-shrink:0;box-shadow:0 0 22px #426fe326}
.barostep-symbol{display:block;width:32px;height:32px;overflow:visible}
.barostep-trail{fill:none;stroke:#728fc9;stroke-width:2;stroke-linejoin:round}
.barostep-rise{fill:none;stroke:#f1f7ff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.barostep-arrow{fill:none;stroke:#8de4ff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.barostep-origin{fill:#8de4ff}
.brand-divider{margin-left:20px;padding-left:20px;border-left:1px solid var(--dark-line);font-size:18px;color:var(--dim);font-weight:450;letter-spacing:-.02em}
.header-actions{display:flex;flex-shrink:0;gap:10px}
.header-actions button{white-space:nowrap;border-color:var(--chrome-button-line);padding:8px 15px;color:var(--text);background:var(--chrome-button)}
.header-actions button:hover{border-color:var(--chrome-hover-line);background:var(--chrome-button-hover)}
.print-mobile{display:none}
.site-shell{display:grid;grid-template-columns:222px minmax(0,1fr);gap:36px;max-width:1500px;margin:auto;padding:0 36px}
.guide-sidebar{position:sticky;top:var(--header);height:calc(100vh - var(--header));overflow-y:auto;padding:35px 10px 28px 0;font-size:18px;scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
.menu-heading{display:flex;justify-content:space-between;align-items:center;padding:0 10px 18px;font-size:18px;font-weight:750;color:var(--text)}
.guide-sidebar nav{display:flex;flex-direction:column;gap:4px}
.guide-sidebar nav>a{display:flex;align-items:center;gap:10px;min-height:49px;padding:7px 10px;border:1px solid transparent;border-radius:8px;color:var(--nav-text);text-decoration:none;line-height:1.5}
.guide-sidebar nav>a:hover{background:var(--nav-hover);color:var(--brand-text)}
.guide-sidebar nav>a[aria-current]{background:var(--nav-active);color:var(--nav-active-text);border-color:var(--nav-active-line);font-weight:700;box-shadow:inset 3px 0 #698fff}
.menu-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;color:var(--nav-icon)}
.menu-icon .ui-icon{width:22px;height:22px;flex:0 0 22px}
.guide-sidebar a[aria-current] .menu-icon{color:var(--nav-active-icon)}
.menu-copy{min-width:0;font-size:18px}
.menu-group-label,.menu-label{padding:12px 10px 9px;font-size:18px;color:var(--nav-label)}
.menu-help{margin-top:24px;padding-top:15px;border-top:1px solid var(--dark-line)}
.guide-sidebar .menu-help>a{min-height:46px}
#print-all{text-align:left;border:0;color:var(--nav-text);padding:7px 10px;min-height:46px;background:transparent}
#print-all:hover{color:var(--text);background:var(--nav-hover)}
.guide-main{min-width:0;padding:28px 0 0}
#menu-toggle,#menu-close,.js #menu-toggle,.js #menu-close,#menu-backdrop{display:none}


/* The action names the mode that a click will open; mobile keeps an accessible label. */
#theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;font-size:18px}
.theme-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;line-height:1}
.theme-icon svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-moon{display:none!important}
html[data-theme='light'] .theme-sun{display:none!important}
html[data-theme='light'] .theme-moon{display:block!important}
.theme-label{font-size:18px;line-height:1.6;white-space:nowrap}
html[data-theme='light'] .hero-preview{box-shadow:0 0 0 5px #a8bde233,0 22px 48px #24478028,0 0 54px #4775d51a}
html[data-theme='light'] .home-hero{box-shadow:0 18px 54px #16376016}
html[data-theme='light'] .quick-card,html[data-theme='light'] .topic-card{box-shadow:0 4px 16px #25487808}

/* A single large search field — helpful on a first visit and still present in the reader. */
.search-tools{margin:0 0 24px}
.search-primary{display:flex;gap:10px}
.search-primary input{flex:1;min-width:0;height:58px;border:1px solid var(--search-line);border-radius:11px;background:var(--search-bg);color:var(--search-text);padding:12px 20px;font-size:20px;box-shadow:inset 0 1px #ffffff04}
.search-primary input::placeholder{color:var(--search-placeholder);opacity:1}
.search-primary input:hover{border-color:var(--search-hover-line)}
.search-primary input:focus{border-color:var(--search-focus-line)}
.search-primary button{border-color:#4151cf;min-width:86px;border-radius:11px;background:#344dd0;color:#fff;font-size:18px;font-weight:700;box-shadow:0 5px 20px #344dd020}
.search-primary button:hover{border-color:#6c83ff;background:#415bdd}
.search-secondary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:54px;font-size:18px;color:var(--dim)}
.search-secondary label{display:flex;align-items:center;gap:10px}
.search-secondary select{border:1px solid var(--search-line);border-radius:8px;background:var(--search-bg);padding:6px 28px 6px 12px;color:var(--text)}
.search-secondary button{padding:6px 4px;border:0;color:var(--accent);background:transparent}
.route-bar{display:flex;align-items:center;gap:12px;min-height:44px;margin:-4px 0 20px;font-size:18px;flex-wrap:wrap;line-height:1.5}
.route-bar a{display:inline-flex;align-items:center;min-height:44px;color:var(--search-placeholder);text-decoration:none}
.route-bar a:hover{color:var(--route-text);text-decoration:underline}
.route-divider{color:var(--route-divider)}
#route-label{color:var(--text)}
.view{min-width:0;scroll-margin-top:108px}
.view[hidden]{display:none!important}
.eyebrow{font-size:18px;font-weight:650;letter-spacing:.015em;color:var(--accent);margin:0 0 10px}

/* Expansive home stage. The real screen is the hero visual, rather than a tiny nested card. */
.home-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px;align-items:center;padding:40px 28px 38px 36px;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--hero-line);border-radius:22px;background:var(--hero-bg);box-shadow:0 22px 70px #02061170}
.home-hero::before{content:'';position:absolute;z-index:-1;pointer-events:none;width:740px;height:620px;right:-220px;top:-190px;background:radial-gradient(ellipse at 48% 52%,var(--stage-glow-a),transparent 60%),radial-gradient(ellipse at 70% 74%,var(--stage-glow-b),transparent 65%);filter:blur(18px)}
.home-hero::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:730px;height:570px;right:-170px;bottom:-330px;background-image:linear-gradient(var(--stage-grid) 1px,transparent 1px),linear-gradient(90deg,var(--stage-grid) 1px,transparent 1px);background-size:38px 38px;transform:perspective(460px) rotateX(48deg) rotateZ(-14deg)}
.home-intro{position:relative;z-index:2;min-width:0;padding:0;background:transparent}
.home-intro .eyebrow{display:flex;align-items:center;gap:11px;color:var(--hero-eyebrow);margin-bottom:20px;font-size:18px;line-height:1.5}
.home-intro .eyebrow::before{content:'';width:3px;height:19px;border-radius:2px;background:#86deff;box-shadow:0 0 14px #54b6ff60}
.home-intro h1{color:var(--hero-title);font-size:clamp(50px,4.2vw,68px);line-height:1.11;letter-spacing:-.055em;margin:0 0 22px;font-weight:800}
.hero-title-accent{color:var(--hero-accent)}
.home-intro>p:not(.eyebrow){color:var(--hero-copy);margin:0 0 26px;font-size:20px;line-height:1.7}
.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:27px;min-height:50px;padding:11px 20px;border:1px solid #7389ff;border-radius:9px;background:#3d52d8;color:#fff;font-size:18px;font-weight:700;text-decoration:none;box-shadow:0 0 25px #4d64f535,inset 0 1px #ffffff26}
.primary-link:hover{background:#4b63e8;border-color:#97acff;box-shadow:0 0 34px #4d64f54d}
.primary-link>span{font-size:23px;line-height:1}
.hero-flow{display:flex;align-items:flex-start;gap:15px;list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--hero-flow-line)}
.hero-flow-step{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:18px;color:var(--hero-flow);line-height:1.5}
.hero-flow-step b{font-size:18px;line-height:1.4;color:var(--hero-ordinal);font-weight:650;letter-spacing:.02em}
.hero-preview{position:relative;z-index:1;min-width:0;padding:13px 13px 0;border:1px solid var(--hero-frame-line);border-radius:13px;background:var(--hero-frame);box-shadow:0 0 0 5px #1729544d,0 26px 60px #02050e99,0 0 54px #476cff26;transform:perspective(1800px) rotateY(-5deg) rotateX(2deg);transform-origin:center}
.hero-preview::before{content:'';position:absolute;inset:20px -55px -35px;z-index:-1;pointer-events:none;border-radius:40%;background:radial-gradient(ellipse,var(--photo-glow),transparent 70%);filter:blur(22px)}
.hero-window-bar{display:flex;align-items:center;gap:11px;min-height:35px;padding:0 2px 11px;color:var(--hero-window-copy);font-size:18px;line-height:1.4;background:var(--hero-frame)}
.window-dots{display:flex;align-items:center;gap:5px;flex-shrink:0}
.window-dots i{width:6px;height:6px;border-radius:50%;background:var(--hero-dot)}
.window-dots i:first-child{background:#879bf2}
.hero-preview .screen{margin:0}
.hero-preview .image-open{border:1px solid #8295b1;border-radius:6px;background:#fff;color:var(--photo-ink);box-shadow:none}
.hero-preview .image-open:hover{border-color:#bddeff;background:#fff}
.hero-preview figcaption{margin:0;padding:13px 2px 14px;color:var(--hero-frame-copy);font-size:18px;line-height:1.5;background:var(--hero-frame)}
.hero-preview .image-hint{color:var(--hero-frame-link);margin-top:2px}
.hero-preview .annotation-list{display:none}
.hero-preview-label,.hero-preview-caption{color:var(--hero-frame-copy);font-size:18px;line-height:1.5;margin:10px 0 0}
.home-section{margin-top:34px}
.home-section-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:17px}
.home-section-header h3,.home-section>h3{font-size:27px;margin:0;font-weight:700;color:var(--search-text)}
.home-section>h3{margin-bottom:17px}
.home-section-header p{font-size:18px;color:var(--dim);margin:0}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nav-card{display:flex;align-items:center;gap:16px;color:var(--text);text-decoration:none;min-width:0}
.nav-card strong{font-size:22px;line-height:1.45;font-weight:650;letter-spacing:-.025em}
.nav-card:hover strong{color:var(--nav-card-hover-text)}
.nav-card:hover .card-arrow{transform:translateX(3px)}
.card-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.card-description{font-size:18px;color:var(--card-copy);line-height:1.65;margin-top:7px}
.card-arrow{font-size:22px;line-height:1.4;color:var(--card-arrow);transition:transform .15s}
.ui-icon{width:26px;height:26px;flex:0 0 26px;color:var(--icon)}
.quick-card{min-height:83px;padding:16px 18px;gap:13px;border:1px solid var(--quick-line);border-radius:9px;background:var(--quick-bg);box-shadow:inset 0 1px #ffffff05}
.quick-card:hover{border-color:var(--quick-hover-line);background:var(--quick-hover);box-shadow:0 5px 24px #02050e30}
.quick-card>.ui-icon{width:28px;height:28px;flex-basis:28px;padding:0;color:var(--quick-icon)}
.quick-card:nth-child(3)>.ui-icon{color:var(--quick-violet)}
.quick-card:nth-child(6)>.ui-icon{color:var(--quick-mint)}
.quick-card strong{font-size:20px}
.quick-card .card-arrow{font-size:20px}
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.topic-card{display:grid;grid-template-columns:42px minmax(0,1fr) 24px;align-items:start;column-gap:17px;min-height:190px;padding:25px;border:1px solid var(--topic-line);border-radius:12px;background:var(--topic-bg);box-shadow:inset 0 1px #ffffff04}
.topic-card>.ui-icon{grid-column:1;width:35px;height:35px;padding:0;margin-top:3px;color:var(--topic-icon)}
.topic-card>.card-copy{grid-column:2}
.topic-card>.card-arrow{grid-column:3;padding-top:4px}
.topic-card:hover{border-color:var(--topic-hover-line);background:var(--topic-hover);box-shadow:0 8px 25px #02050e33}
.topic-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 13px;margin-top:19px;font-size:18px}
.topic-role{font-size:18px;color:var(--topic-role)}
.topic-count{font-size:18px;color:var(--topic-count)}
.home-help{margin-top:34px;padding:28px 30px;border:1px solid var(--help-line);border-left:3px solid #708cff;border-radius:3px 12px 12px 3px;background:var(--help-bg)}
.home-help h3{margin-top:0;font-size:27px}
.home-help p{color:var(--help-copy);margin-bottom:18px}
.utility-links{display:flex;flex-wrap:wrap;gap:10px}
.utility-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:7px;background:var(--utility-bg);border:1px solid var(--utility-line);color:var(--utility-text);font-size:18px;font-weight:550;text-decoration:none}
.utility-links a:hover{border-color:var(--utility-hover-line);background:var(--utility-hover)}

/* A quiet reader surface in either theme, with the original screenshot colors preserved. */
.task,.aux-view,.topic-view,.search-view{padding:32px 34px;color:var(--ink);background:var(--paper);border:1px solid var(--paper-line);border-radius:14px;box-shadow:var(--paper-shadow)}
.task h1,.task h2,.task h3,.task h4,.aux-view h2,.aux-view h3,.aux-view h4,.topic-view h2,.search-view h2{color:var(--ink)}
.task a,.aux-view a,.topic-view a,.search-view a{color:var(--blue)}
.task .eyebrow,.aux-view .eyebrow,.topic-view .eyebrow{color:var(--blue)}
.task button,.aux-view button{background:var(--paper-card);color:var(--ink);border-color:var(--paper-line)}
.task button:hover,.aux-view button:hover{background:var(--paper-hover);border-color:var(--chrome-hover-line)}
.reader-header{padding:0 0 25px;border-bottom:1px solid var(--paper-line);background:transparent}
.reader-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;margin-bottom:17px;font-size:18px}
.reader-topic{font-size:18px;color:var(--muted)}
.level,.task-level{font-size:18px;white-space:nowrap}
.reader-header .level{display:inline-block;padding:4px 10px;border-radius:5px;background:var(--paper-chip);color:var(--paper-chip-text);font-weight:600}
.reader-step-count{font-size:18px;color:var(--muted)}
.reader-header h2{margin-bottom:14px;font-size:36px;font-weight:750}
.goal{color:var(--paper-goal);font-size:22px;line-height:1.7;margin:0}
.section-links{display:flex;flex-wrap:wrap;gap:9px;padding:18px 0;margin:0 0 12px}
.section-links a{min-height:44px;display:inline-flex;align-items:center;padding:7px 15px;border:1px solid var(--paper-line);border-radius:7px;background:var(--paper-card);font-size:18px;font-weight:600;color:var(--blue);text-decoration:none}
.section-links a:hover{border-color:var(--chrome-hover-line);background:var(--paper-hover)}
section[data-task-owner]{scroll-margin-top:100px}
.preparation{padding:22px 24px;border:1px solid var(--paper-line);border-left:3px solid #768fbd;border-radius:3px 9px 9px 3px;background:var(--paper-soft)}
.preparation h3{margin-top:0}
.plain-list{padding-left:26px;margin:14px 0}
.plain-list li{padding:5px 0}
.callout{margin:20px 0;padding:18px 21px;border:1px solid var(--paper-line);border-left:4px solid #557daf;border-radius:0 8px 8px 0;background:var(--paper-callout);color:var(--paper-callout-text)}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.warning{border-color:var(--paper-warning-line);border-left-color:var(--paper-warning-bar);background:var(--paper-warning);color:var(--paper-warning-text)}
.tip{border-color:var(--paper-tip-line);border-left-color:var(--paper-tip-bar);background:var(--paper-tip);color:var(--paper-tip-text)}
.task details>summary{cursor:pointer;min-height:48px;padding:17px 0;margin:16px 0 0;border-bottom:1px solid var(--paper-line);font-size:22px;font-weight:650;color:var(--paper-summary)}
.section-heading{margin:32px 0 22px}
.steps{list-style:none;padding:0 0 0 18px;counter-reset:steps;margin:26px 0}
.step{counter-increment:steps;position:relative;margin:0 0 25px;padding:23px 25px;border:1px solid var(--paper-line);border-radius:10px;background:var(--paper-card);box-shadow:0 3px 10px #17325103}
.step::before{content:'';position:absolute;top:0;bottom:-27px;left:-19px;border-left:2px solid var(--paper-timeline)}
.step:last-child::before{bottom:30px}
.step>h3{margin:0 0 17px;padding-left:49px;position:relative;font-size:25px;line-height:1.5}
.step>h3::before{content:counter(steps,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;width:36px;height:36px;border-radius:7px;background:#234879;color:#fff;font-size:20px;font-weight:700;line-height:1}
.step>p{margin:14px 0}
.meta{font-size:18px;color:var(--muted)}
.field-label{font-size:18px;font-weight:650;margin-bottom:6px}
.example{white-space:pre-wrap;font-family:inherit;font-size:20px;line-height:1.75;background:var(--paper-soft);color:var(--ink);border:1px solid var(--paper-line);border-radius:7px;padding:14px 18px;overflow-wrap:anywhere;word-break:break-word;margin:6px 0 18px}
.expected{border:1px solid var(--paper-expected-line);border-left:4px solid var(--paper-expected-bar);border-radius:0 8px 8px 0;background:var(--paper-expected);padding:14px 18px;color:var(--paper-expected-text);margin:20px 0 0}
.expected b{font-size:18px;color:var(--paper-expected-label)}
.screen{margin:24px 0 28px}
.image-open{display:block;width:100%;min-height:44px;padding:0;border:1px solid var(--photo-line);border-radius:8px;background:var(--paper-card);color:var(--ink);overflow:hidden;box-shadow:0 5px 20px #1434400d}
.image-open svg{display:block;width:100%;height:auto}
.image-open:hover{border-color:#758ebd;background:var(--paper-card)}
figcaption{font-size:18px;color:var(--muted);margin-top:12px;line-height:1.6}
.image-hint{display:block;color:var(--blue);margin-top:3px}
.annotation-list{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;padding:0;margin:14px 0;font-size:18px;line-height:1.65}
.annotation-list b{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid #bd882f;background:#fff4cc;color:#67440c;border-radius:50%;margin-right:8px}
html:not(.js) .image-open[data-deferred]>.viewport-screen{display:none}

/* Topic/search lists are useful paths into the paper reader, rather than decorative dashboards. */
.topic-header{display:flex;align-items:flex-start;gap:22px;padding:0 0 24px;border-bottom:1px solid var(--paper-line);background:transparent}
.topic-icon{display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;border-radius:10px;background:var(--paper-icon-bg);color:var(--paper-icon)}
.topic-icon .ui-icon{width:31px;height:31px;color:var(--paper-icon)}
.topic-heading{min-width:0}
.topic-heading .eyebrow{margin-bottom:7px}
.topic-heading h2{margin-bottom:10px}
.view-intro{color:var(--muted);margin:0 0 10px}
.task-grid{display:flex;flex-direction:column;gap:11px;margin-top:23px}
.task-card,.search-result{padding:21px 23px;min-height:84px;border:1px solid var(--paper-line);border-radius:9px;background:var(--paper-card);color:var(--ink);gap:18px}
.task-card:hover,.search-result:hover{border-color:#89a0c8;background:var(--paper-hover);box-shadow:0 4px 16px #16315d08}
.task-card strong,.search-result strong{color:var(--ink)}
.task-card:hover strong,.search-result:hover strong{color:var(--blue)}
.task-card .card-description{color:var(--muted)}
.task-card .card-arrow,.search-result .card-arrow{color:var(--blue)}
.task-level{padding:5px 10px;border-radius:5px;background:var(--paper-chip);color:var(--muted)}
.status{font-size:18px;color:var(--muted)}
.search-view>h2{margin-bottom:12px}
#no-results{padding:22px;border:1px solid var(--paper-line);border-radius:9px;background:var(--paper-soft);color:var(--ink)}

/* All original six-column button details survive the conversion to labelled phone cards. */
.table-scroll{width:100%;margin:16px 0 28px;border:1px solid var(--paper-line);border-radius:9px;overflow:hidden;background:var(--paper-card)}
table{width:100%;border-collapse:collapse;font-size:18px;line-height:1.7;table-layout:fixed}
th,td{text-align:left;vertical-align:top;border-bottom:1px solid var(--paper-line);padding:15px 11px;overflow-wrap:anywhere}
th{font-weight:700;background:var(--paper-table-head);color:var(--paper-table-text)}
td:first-child{font-weight:650}
td+td,th+th{border-left:1px solid var(--paper-line-soft)}
tbody tr:last-child td{border-bottom:0}
.trouble{margin:14px 0;padding:20px 23px;border:1px solid var(--paper-line);border-radius:9px;background:var(--paper-card);color:var(--ink)}
.trouble h4{margin-top:0}
.next{font-weight:600;margin:26px 0}
.task-route{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px;padding-top:23px;border-top:1px solid var(--paper-line)}
.task-route a{display:inline-flex;align-items:center;min-height:48px;padding:10px 15px;border:1px solid var(--paper-line);border-radius:7px;background:var(--paper-card);font-size:18px;text-decoration:none}
.task-route a:hover{border-color:#89a0c8;background:var(--paper-hover)}
.previous-task,.next-task{flex-basis:calc(50% - 6px)}
.aux-view>h2{margin-bottom:20px}
.start-list{list-style:none;padding:0;margin-top:24px;display:grid;gap:12px}
.start-list li{padding:20px 23px;border:1px solid var(--paper-line);border-radius:9px;background:var(--paper-card)}
.daily{list-style:none;padding:0;display:grid;gap:12px;margin-top:24px}
.daily li{border:1px solid var(--paper-line);border-radius:9px;background:var(--paper-card);padding:20px 23px}
.daily label{display:flex;gap:16px;align-items:flex-start;cursor:pointer;min-height:44px}
.daily input{flex-shrink:0;width:25px;height:25px;min-height:25px;margin-top:6px;accent-color:#315bd0}
.term{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:24px;padding:22px 23px;margin-bottom:12px;border:1px solid var(--paper-line);border-radius:9px;background:var(--paper-card)}
.term dt{font-weight:650;color:var(--paper-summary)}
.term dd{margin:0}
.site-footer{margin-top:46px;padding:26px 0 32px;border-top:1px solid var(--dark-line);font-size:18px;color:var(--dim);text-align:left}
.site-footer b{color:var(--footer-strong)}
.site-footer span{margin-left:20px}
.site-footer p{margin:8px 0}
.no-js-note{background:#182746;color:#dce8ff;padding:16px 20px;border-left:4px solid #849fff;border-radius:0 8px 8px 0}

/* Actual screenshot zoom is a clean light workspace with familiar native controls. */
dialog{border:1px solid #a6b9d4;border-radius:13px;padding:22px;width:1500px;max-width:96vw;max-height:96vh;color:var(--ink);background:var(--dialog-bg);box-shadow:0 28px 90px #01030aaa}
dialog::backdrop{background:#020511dc}
.dialog-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:18px}
.dialog-tools h2{font-size:24px;margin:0 auto 0 0;color:var(--ink)}
.dialog-tools label{display:flex;align-items:center;gap:8px;font-size:18px}
.dialog-tools select{border:1px solid var(--paper-line);border-radius:7px;background:var(--paper-card);color:var(--ink);padding:6px 12px}
.dialog-tools button{border-color:var(--paper-line);background:var(--paper-chip);color:var(--paper-strong)}
.zoom-viewport{max-height:76vh;overflow:auto;background:var(--zoom-bg);border:1px solid var(--paper-line);border-radius:7px}
.zoom-viewport svg{display:block;width:100%;height:auto;max-width:none}

/* Keep the product stage broad on larger screens while the reader remains comfortable. */
@media(min-width:1700px){
  .header-inner,.site-shell{max-width:1590px}
  .site-shell{grid-template-columns:238px minmax(0,1fr);gap:42px}
  .home-hero{padding:46px 35px 44px 42px;gap:32px}
  .home-intro h1{font-size:72px}
  .topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topic-card{grid-template-columns:35px minmax(0,1fr) 20px;padding:23px;gap:14px}
}
@media(max-width:1200px){
  .header-inner{padding:0 26px}
  .site-shell{grid-template-columns:202px minmax(0,1fr);gap:26px;padding:0 26px}
  .guide-sidebar nav>a{padding-left:7px;padding-right:7px;gap:6px}
  .home-hero{gap:20px;padding:30px 20px 30px 27px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .home-intro h1{font-size:51px}
  .hero-flow{gap:11px}
  .hero-preview{padding:10px 10px 0;transform:none}
  .hero-window-bar{font-size:18px}
  .hero-preview figcaption{padding-top:10px;font-size:18px}
  .quick-card{gap:10px;padding:15px 13px}
  .quick-card .card-arrow{display:none}
  .topic-card{padding:22px;grid-template-columns:35px minmax(0,1fr);gap:14px}
  .topic-card>.card-arrow{display:none}
  .task,.aux-view,.topic-view,.search-view{padding:28px}
  .task-card{flex-wrap:wrap}
  .task-card .task-level{margin-left:auto}
}
@media(min-width:801px) and (max-width:1000px){
  .site-shell{grid-template-columns:188px minmax(0,1fr);gap:22px;padding:0 22px}
  .home-hero{display:block;padding:30px}
  .home-intro{max-width:none}
  .home-intro h1{font-size:55px}
  .hero-flow{gap:24px}
  .hero-preview{margin-top:30px;max-width:none;transform:none}
  .hero-preview figcaption .image-hint{display:inline;margin-left:12px}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic-card{display:block;min-height:235px}
  .topic-card>.ui-icon{margin-bottom:15px}
  .task,.aux-view,.topic-view,.search-view{padding:24px}
}

/* Phone: the same visual identity, a short opening and a drawer that is easy to touch. */
@media(max-width:800px){
  :root{--header:68px}
  html{scroll-padding-top:94px}
  .header-inner{padding:0 18px;gap:10px}
  .brand{font-size:18px;gap:9px}
  .brand-mark{width:35px;height:35px;border-radius:9px}
  .barostep-symbol{width:27px;height:27px}
  .brand-divider{display:none}
  .header-actions{gap:6px}
  .header-actions button{padding:7px 11px;border-radius:7px}

  #theme-toggle{width:44px;height:44px;min-height:44px;padding:0;gap:0;flex:0 0 44px}
  .theme-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .print-desktop{display:none}
  .print-mobile{display:inline}
  .site-shell{display:block;padding:0 22px}
  .guide-main{padding-top:20px}
  .guide-sidebar{position:static;height:auto;padding:22px 0;border-bottom:1px solid var(--dark-line)}
  .guide-sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-sidebar .menu-help{display:flex}
  .js .guide-sidebar{position:fixed;inset:var(--header) auto 0 0;width:min(350px,calc(100vw - 26px));height:calc(100dvh - var(--header));z-index:40;background:var(--mobile-drawer);padding:22px 18px 30px;box-shadow:14px 0 46px #01030a66;overflow-y:auto;visibility:hidden;transform:translateX(-105%);border-right:1px solid #344566}
  .js .guide-sidebar.menu-open{visibility:visible;transform:translateX(0)}
  .js .guide-sidebar nav{display:flex}
  .js .guide-sidebar nav>a{min-height:52px;padding:9px 12px;gap:12px}
  .js .guide-sidebar nav>a[aria-current]{background:var(--mobile-active);border-color:var(--mobile-active-line);box-shadow:inset 3px 0 #88aaff}
  .js .guide-sidebar .menu-help>a{min-height:48px}
  .js #menu-toggle,.js #menu-close{display:inline-flex;align-items:center}
  .js #menu-backdrop:not([hidden]){display:block;position:fixed;inset:var(--header) 0 0;z-index:35;border:0;background:#01040ab8;border-radius:0}
  .menu-heading{padding:0 12px 18px}
  .menu-heading button{background:var(--mobile-close);border-color:var(--mobile-close-line);color:var(--text)}
  .search-tools{margin-bottom:18px}
  .search-primary{gap:8px}
  .search-primary input{height:56px;border-radius:9px;padding:10px 16px;font-size:18px}
  .search-primary button{min-width:70px;border-radius:9px;padding:8px 14px}
  .search-secondary{gap:8px;font-size:18px;flex-wrap:wrap}
  .search-secondary label{gap:6px}
  .search-secondary select{max-width:150px;padding-right:10px}
  .route-bar{gap:8px;margin-bottom:18px}
  .home-hero{display:block;padding:22px 25px;border-radius:15px;border-color:#33456c;box-shadow:0 16px 40px #02050e55}
  .home-hero::before{width:420px;height:300px;right:-260px;top:-120px;opacity:.65}
  .home-hero::after{width:350px;height:320px;right:-230px;bottom:-230px;opacity:.6}
  .home-intro{background:transparent}
  .hero-preview,.hero-flow{display:none}
  .hero-line-break{display:none}
  .home-intro .eyebrow{display:none}
  .home-intro h1{font-size:38px;line-height:1.15;margin:0 0 12px;letter-spacing:-.04em}
  .home-intro>p:not(.eyebrow){font-size:18px;line-height:1.5;margin:0 0 16px}
  .primary-link{min-height:44px;padding:8px 15px;border-radius:7px;gap:24px}
  .primary-link>span{font-size:22px}
  .home-section{margin-top:28px}
  .home-section-header{gap:10px;margin-bottom:14px}
  .home-section-header h3,.home-section>h3{font-size:24px}
  .home-section-header p{display:none}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .quick-card{min-height:74px;padding:13px 12px;gap:10px;border-radius:8px}
  .quick-card>.ui-icon{width:25px;height:25px;flex-basis:25px}
  .quick-card strong{font-size:20px}
  .quick-card .card-arrow{display:none}
  .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .topic-card{display:block;padding:21px 19px;min-height:229px}
  .topic-card>.ui-icon{width:31px;height:31px;margin:0 0 15px}
  .topic-card strong{font-size:22px}
  .topic-meta{margin-top:15px;gap:4px 10px}
  .home-help{padding:24px;margin-top:28px}
  .home-help h3{font-size:25px}
  .utility-links{gap:8px}
  .utility-links a{padding:8px 12px}
  .task,.aux-view,.topic-view,.search-view{padding:25px 24px;border-radius:11px}
  .topic-header{gap:16px}
  .topic-icon{width:49px;height:49px;flex-basis:49px;border-radius:9px}
  .topic-icon .ui-icon{width:27px;height:27px}
  .topic-heading h2,h2,.reader-header h2{font-size:32px}
  .task-grid{margin-top:20px}
  .task-card,.search-result{padding:20px;gap:12px}
  .task-card .card-copy{flex-basis:calc(100% - 32px)}
  .task-card .task-level{order:2;margin-left:0}
  .task-card .card-arrow{margin-left:auto}
  .reader-header{padding:0 0 22px}
  .reader-meta{margin-bottom:14px;gap:8px}
  .reader-header .goal{font-size:21px}
  .section-links{padding:16px 0;gap:8px;margin-bottom:8px}
  .section-links a{padding:7px 12px}
  .preparation{padding:20px}
  .callout{padding:16px 18px}
  .steps{padding-left:0}
  .step{padding:20px;margin-bottom:18px}
  .step::before{display:none}
  .step>h3{font-size:23px;padding-left:44px;line-height:1.5}
  .step>h3::before{width:33px;height:33px;font-size:20px;border-radius:6px}
  .example{padding:12px 14px}
  .screen{margin:22px 0 24px}
  .table-scroll{overflow:visible;border:0;border-radius:0;background:transparent}
  table,tbody{display:block}
  thead{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
  tr{display:block;border:1px solid #c9d7ea;border-radius:9px;margin:0 0 16px;padding:8px 18px 14px;background:var(--paper-card)}
  td{display:block;padding:12px 0;border:0;font-size:20px}
  td+td{border-left:0;border-top:1px solid #e5ebf4}
  td::before{content:attr(data-label);display:block;font-size:18px;font-weight:600;color:var(--muted);margin-bottom:4px}
  td:first-child{font-size:22px;color:var(--paper-summary)}
  .trouble{padding:20px}
  .previous-task,.next-task{flex-basis:100%}
  .start-list li,.daily li{padding:20px}
  .term{display:block;padding:20px}
  .term dd{margin-top:10px}
  .dialog-tools h2{flex-basis:100%;font-size:22px}
  .dialog-tools{gap:10px}
  dialog{padding:16px;border-radius:10px}
  .site-footer{margin-top:40px}
  .site-footer span{display:block;margin:8px 0 0}
}
@media(max-width:430px){
  .brand>span:last-child{max-width:112px;white-space:normal;line-height:1.18}
  .site-shell{padding:0 18px}
  .header-inner{padding:0 12px}
  .search-primary input{padding:10px 13px}
  .search-primary button{min-width:62px;padding:8px 12px}
  .home-hero{padding:19px 21px}
  .home-intro h1{font-size:34px;line-height:1.15;margin-bottom:11px}
  .home-intro>p:not(.eyebrow){line-height:1.45;margin-bottom:12px}
  .home-section{margin-top:26px}
  .quick-card{min-height:72px;gap:8px;padding:12px 10px}
  .quick-card>.ui-icon{width:23px;height:23px;flex-basis:23px}
  .quick-card strong{font-size:20px}
  .topic-card{padding:20px 17px;min-height:231px}
  .topic-card strong{font-size:21px}
  .topic-card .card-description{font-size:18px}
  .task,.aux-view,.topic-view,.search-view{padding:23px 20px}
  .topic-icon{width:40px;height:40px;flex-basis:40px}
  .topic-icon .ui-icon{width:24px;height:24px}
  .topic-heading h2{font-size:30px}
  .preparation,.step{padding:18px 16px}
  .step>h3{font-size:23px}
  .expected{padding:12px 14px}
  .annotation-list{gap:10px}
  .route-bar #route-label{max-width:100%}
}
@media(max-width:360px){
  .site-shell{padding:0 14px}
  .header-inner{padding:0 10px;gap:8px}
  .brand{font-size:18px;gap:7px}
  .brand-mark{width:30px;height:33px}
  .barostep-symbol{width:24px;height:24px}
  .brand>span:last-child{max-width:95px;white-space:normal;line-height:1.2}
  .header-actions{gap:4px}
  .header-actions button{padding:7px 7px}
  .header-actions #theme-toggle{padding:0}
  .search-secondary{align-items:flex-start;flex-direction:column;gap:8px}
  .home-hero{padding:18px}
  .home-intro h1{font-size:32px}
  .quick-card{min-height:72px;padding:12px 10px}
  .quick-card>.ui-icon{width:22px;height:22px;flex-basis:22px}
  .quick-card strong{font-size:18px}
  .topic-grid{grid-template-columns:1fr}
  .topic-card{display:grid;grid-template-columns:35px minmax(0,1fr);min-height:0;padding:20px}
  .topic-card>.card-copy{grid-column:2}
  .topic-header{display:block}
  .topic-icon{margin-bottom:14px}
  .home-help{padding:22px 20px}
  .task,.aux-view,.topic-view,.search-view{padding:22px 17px}
}
@media(max-width:800px) and (max-height:500px){
  .js .guide-sidebar{padding-top:14px}
  .menu-heading{padding-bottom:10px}
  .js .guide-sidebar nav>a{min-height:46px}
  .zoom-viewport{max-height:52vh}
  dialog{max-height:96vh}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.hero-preview{transform:none}}

/* Printing is a plain paper document, with every requested explanation and original photo. */
@media print{
  html,html[data-theme='dark'],html[data-theme='light']{
  --ink:#111;
  --muted:#111;
  --blue:#111;
  --line:#dce4ed;
  --soft:#f4f7fb;
  --green:#245c43;
  --paper:#fff;
  --paper-card:#fff;
  --paper-hover:#fff;
  --paper-line:#d7e0ed;
  --paper-line-soft:#e5ebf3;
  --paper-soft:#fff;
  --paper-chip:#fff;
  --paper-chip-text:#111;
  --paper-goal:#111;
  --paper-callout:#fff;
  --paper-callout-text:#111;
  --paper-summary:#111;
  --paper-timeline:#bdcde3;
  --paper-warning:#fff;
  --paper-warning-text:#111;
  --paper-warning-line:#e4d4b7;
  --paper-warning-bar:#a36d20;
  --paper-tip:#fff;
  --paper-tip-text:#111;
  --paper-tip-line:#c7ded4;
  --paper-tip-bar:#42795f;
  --paper-expected:#fff;
  --paper-expected-text:#111;
  --paper-expected-line:#c6dece;
  --paper-expected-bar:#3c7756;
  --paper-expected-label:#111;
  --paper-table-head:#fff;
  --paper-table-text:#111;
  --paper-icon-bg:#fff;
  --paper-icon:#111;
  --paper-strong:#111;
  --dialog-bg:#fff;
  --zoom-bg:#f0f4fa;
  --paper-shadow:none;
    color-scheme:light;
  }
  @page{size:A4;margin:14mm}
  body{font-size:18px;color:#111;background:var(--paper-card)}
  #theme-toggle{display:none!important}
  .site-header,.guide-sidebar,#menu-backdrop,.route-bar,.search-tools,.home-view,.topic-view,.search-view,.task-route,.section-links,dialog,.skip,.no-js-note,.image-hint{display:none!important}
  .site-shell{display:block;padding:0;max-width:none}
  .guide-main{padding:0;max-width:none}
  .view.task,.view.aux-view,.view.task[hidden],.view.aux-view[hidden]{display:block!important}
  .task,.aux-view{padding:0;background:var(--paper-card);border:0;border-radius:0;box-shadow:none;color:#111}
  .task{break-before:page}
  .task details>summary{display:none!important}
  .task details>*{display:block!important}
  .task h2{font-size:28px}
  .reader-header,.preparation{padding:0;border:0;border-radius:0;background:var(--paper-card);box-shadow:none}
  .reader-meta{margin-bottom:12px}
  .reader-header .level{background:none;color:#111;padding:0}
  .steps{padding-left:0}
  .step,figure,.callout,.trouble{break-inside:avoid}
  .step{padding:14px 0;margin-bottom:20px;border:0;border-radius:0;box-shadow:none}
  .step::before{display:none}
  .step>h3::before{background:none;color:#111;border:1px solid #b4bcc5}
  .image-open{box-shadow:none;border:1px solid #b4bcc5;border-radius:3px}
  .expected,.callout,.warning,.tip{background:none;color:#111}
  .trouble,.start-list li,.daily li,.term{border-radius:0;box-shadow:none;background:var(--paper-card)}
  .table-scroll{overflow:visible;border:0;border-radius:0}
  table{display:table;font-size:18px}
  thead{display:table-header-group;position:static;width:auto;height:auto;clip:auto;white-space:normal}
  tbody{display:table-row-group}
  tr{display:table-row}
  td,th{display:table-cell;font-size:18px;padding:8px;border-bottom:1px solid #bbb}
  td::before{display:none}
  td:first-child{font-size:18px}
  .site-footer{margin-top:24px;color:#354358}
  .site-footer b{color:#111}
  a{color:inherit;text-decoration:none}
  .asset-library{display:block}
  body[data-print-scope="current"] .view.task[hidden],body[data-print-scope="current"] .view.aux-view[hidden]{display:none!important}
  body[data-print-scope="current"] .task{break-before:auto}
  #print-status{display:none!important}
}