:root{--bg:#0c1218;--panel:#141e28;--ink:#f5f5ef;--soft:#becbd4;--accent:#c6f58d;--cyan:#c6f58d;--line:#35434e;--violet:#c8bbf9;color-scheme:dark}
.studio{background:radial-gradient(ellipse at 95% 0,#28324c66,transparent 40%),var(--bg);color:var(--ink);font-family:Inter,'Segoe UI',Arial,sans-serif;line-height:1.6}.studio main{max-width:1160px;padding:0 32px}.studio p,.studio li{font-size:18px;line-height:1.7}.studio p{max-width:70ch}.studio h1{font-size:clamp(46px,6.7vw,88px);letter-spacing:-.06em;line-height:1.02;max-width:15ch}.studio h2{font-size:clamp(28px,3.5vw,44px);letter-spacing:-.035em;line-height:1.18}.studio h3{line-height:1.3}.studio em{color:var(--accent)}.studio .eyebrow{font:11px/1.65 Consolas,monospace;letter-spacing:.13em;color:var(--accent)}.studio .small{font-size:14px;line-height:1.65}.studio .lead{font-size:clamp(20px,2.3vw,27px);line-height:1.5;max-width:50ch}.studio .intro{padding:52px 0 30px}.studio a{color:var(--accent)}.studio .primary{background:var(--accent);color:#17210f;border:1px solid var(--accent);border-radius:10px;padding:14px 20px;font-weight:650;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;justify-content:center}.studio button{border-radius:9px;min-height:44px}.studio a:focus-visible,.studio button:focus-visible,.studio input:focus-visible,.studio select:focus-visible,.studio summary:focus-visible{outline:3px solid var(--violet);outline-offset:4px}.studio .studio-header{max-width:1420px;padding:20px 32px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line);font:13px/1.5 'Segoe UI',Arial,sans-serif;letter-spacing:0}.studio-brand{font-size:13px;font-weight:750;letter-spacing:.09em;color:var(--ink)!important;text-decoration:none;white-space:nowrap}.studio-brand span{display:block;font:10px/1.8 Consolas,monospace;letter-spacing:.1em;color:var(--soft)!important}.studio-header nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.studio-header nav a{padding:10px 12px;border-radius:8px;color:var(--soft);text-decoration:none;min-height:44px}.studio-header nav a[aria-current=page]{background:#c6f58d16;color:var(--accent)}.studio-header .qr-nav{border:1px solid var(--line)}.studio-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px}.studio-tags span{padding:7px 12px;font:12px/1.5 Consolas,monospace;border:1px solid var(--line);border-radius:30px;color:var(--soft)}.studio .studio-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:center;padding:55px 0 65px}.studio-hero h1{max-width:none}.hero-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.hero-photo{display:block;position:relative;height:460px;border-radius:20px;overflow:hidden;border:1px solid var(--line);text-decoration:none}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 70%}.hero-photo:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#0c1218ed)}.hero-photo>span{position:absolute;z-index:1;left:24px;right:24px;bottom:24px;color:#fff;font-size:18px;line-height:1.5}.hero-photo strong{color:#fff}.studio-section{padding:40px 0}.route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}.route-grid>a{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:270px;padding:26px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,#202c38,#121b24);text-decoration:none;color:var(--ink)}.route-grid>a:nth-child(3n+2){background:linear-gradient(150deg,#29263c,#141b24)}.route-grid .route-icon{font:26px/1.3 Consolas,monospace;color:var(--violet);margin-bottom:22px}.route-grid h3{font-size:25px;letter-spacing:-.025em;margin:12px 0 5px}.route-grid p{font-size:16px;line-height:1.6;margin:8px 0 24px}.route-grid b{font-size:14px;margin-top:auto;color:var(--accent)}.help-banner{margin:50px 0;padding:35px;border:1px solid #788b624d;border-radius:18px;background:#c6f58d08}.help-banner h2{font-size:34px}.help-strip{display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:10px 0 40px}.help-strip img{border-radius:50%;object-fit:cover}.help-strip p{font-size:16px;line-height:1.5;margin:0;flex:1}.help-strip>a{font-size:14px}.studio details{border:1px solid var(--line);border-radius:11px;background:#121c2480;padding:0;margin:14px 0}.studio summary{padding:17px 20px;min-height:54px;font-size:16px;color:var(--ink)}.studio details[open]>summary{border-bottom:1px solid var(--line);color:var(--accent)}.studio details>p,.studio details>ol,.studio details>ul,.studio details>blockquote,.studio details>figure,.studio details>div,.studio details>pre{margin:20px}.studio details>pre{max-width:calc(100% - 40px)}.studio details .official-shot{margin:20px}.studio .step{padding:35px 0}.studio .look{background:#c6f58d0b;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;font-size:17px;max-width:none}.studio .important{font-size:17px}.studio .official-shot img{border-radius:10px;max-height:560px;width:auto;max-width:100%;object-fit:contain}.studio .official-shot figcaption{max-width:75ch;font-size:13px}.studio pre{border:1px solid var(--line);border-radius:0 0 11px 11px;line-height:1.8;font-size:14px}.studio .code-heading{border-radius:11px 11px 0 0;background:#202c38}.studio .check{border-radius:10px;background:#c6f58d0c}.studio .progress-box{border:1px solid var(--line);border-radius:12px;padding:20px}.studio .reading-note{font-size:14px;color:var(--violet)}
/* Programme: a single selected session, with the full plan always available. */
.studio .lab-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:24px 0}.studio .lab-nav a{border-radius:12px;background:var(--panel);padding:18px;min-height:108px}.studio .lab-nav a[aria-current=true]{border-color:var(--accent);background:#c6f58d12}.studio .lab-nav strong{font-size:22px}.studio .lab-nav span{font-size:11px}.studio .programme-controls{border-radius:12px;background:var(--panel);padding:20px;gap:15px}.studio select{border-radius:8px;min-height:44px;padding:10px;font-size:14px}.studio .programme-controls label{font-size:12px}.studio .programme-controls p{font-size:13px}.studio .lab{padding:38px 0 50px;border-top:0}.studio .lab h2{font-size:clamp(32px,4.3vw,54px)}.studio .lab-title{padding:30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(120deg,#263344,#141e27)}.studio .lab-title .lead{font-size:22px}.studio .session-window{font-size:13px}.studio .agenda{display:grid;gap:10px;margin-top:22px}.studio .agenda-row{padding:22px;border:1px solid var(--line);border-radius:12px;grid-template-columns:128px minmax(0,1fr);gap:22px;background:#131e27}.studio .activity h4{font-size:21px;line-height:1.35;margin-bottom:9px}.studio .row-prompt{font-size:17px;line-height:1.6;margin:0}.studio .row-detail{margin:13px 0 0;border-color:#35434e80;background:transparent}.studio .row-detail summary{font-size:13px;padding:9px 13px;min-height:36px;color:var(--soft)}.studio .row-detail>p{margin:14px;font-size:16px}.studio .break-row{border-color:#c6f58d66;background:#c6f58d0c}.studio .break-row h4{color:var(--accent)}.studio .extension{background:#c8bbf908;border-color:#c8bbf955}.studio .finish-detail>div{margin:20px}.studio .lab-finish h3{font-size:22px;margin-top:12px}.studio .support-section{border:0;padding:5px 0}.studio .outcome{background:none;padding:0}.studio .lab-picker-status{font-size:13px;color:var(--soft)}.lab-switch-controls{display:flex;gap:15px;justify-content:space-between;align-items:center;margin:20px 0}.lab-switch-controls button{font-size:14px}.lab-switch-controls p{margin:0!important;font-size:13px!important}.studio .teacher-note details{background:#c8bbf908}.studio.student-view .teacher-note{display:none}
/* Guides: short chapters, real tool screenshots, no fake interface. */
.reader-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;padding:18px;border:1px solid var(--line);background:var(--panel);border-radius:12px;margin:25px 0}.reader-bar label{font-size:12px;display:flex;flex-direction:column;gap:5px;color:var(--soft)}.reader-bar select{width:100%;color:var(--ink);background:var(--bg);border:1px solid var(--line)}.reader-bar .reader-mode{grid-column:1/-1;justify-self:start;border:0;padding:4px 0;min-height:32px;font-size:13px;text-decoration:underline;text-underline-offset:4px}.reader-bar p{grid-column:1/-1;font-size:13px!important;margin:0!important;color:var(--soft)}[data-reader-step][hidden],.lab[hidden],.book[hidden]{display:none!important}.reader-footer{display:flex;justify-content:flex-end;margin:25px 0}.studio .reader-active{border-bottom:0}.studio button:disabled{opacity:.45;cursor:default}
/* Research: compact book cards, a useful search, and readable citations. */
.studio .book-grid{gap:18px}.studio .book{border-radius:14px;background:var(--panel);padding:25px}.studio .book h3{font:600 25px/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:-.025em}.studio .book-author{font-size:14px;color:var(--soft)}.studio .book .look{font-size:16px;line-height:1.65}.studio .book details{background:transparent;margin-bottom:0}.studio .book details summary{font-size:13px;padding:10px 14px;min-height:40px}.book-search{margin:28px 0}.book-search label{display:block;font-size:14px;margin-bottom:9px;color:var(--soft)}.book-search input{width:100%;padding:17px 20px;font:inherit;font-size:18px;line-height:1.5;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px}.book-search p{font-size:13px!important}.studio .citation-card{border:1px solid #c8bbf955;border-radius:16px;padding:30px;background:#c8bbf906;margin:30px 0}.studio .citation-card blockquote{padding:22px;font-size:21px;line-height:1.65;border-radius:10px;background:#1e2633}.studio .visit-details .official-shot img{max-height:330px}.page-library-lab .intro>p:not(.eyebrow):not(.lead):not(.small){max-width:63ch;font-size:17px}
/* Keep the real introduction image prominent, and the QR pristine. */
.studio.page-meet-ingrid main{max-width:none;padding:0}.studio.page-meet-ingrid .hero-copy{background:radial-gradient(ellipse at 0 30%,#39462755,transparent 70%)}.studio.page-meet-ingrid h1{max-width:none;line-height:.88}.studio.page-meet-ingrid .hero-copy>.practice,.studio.page-meet-ingrid .welcome{font-size:16px;line-height:1.6}.studio.page-meet-ingrid .projects,.studio.page-meet-ingrid .invitation,.studio.page-meet-ingrid .speaker{max-width:1280px}.studio.page-meet-ingrid .project{border-radius:16px;background:var(--panel)}.studio.page-meet-ingrid .project>p{font-size:17px}.studio.page-meet-ingrid details.speaker{margin:20px auto 45px;padding:0;max-width:1100px}.studio.page-meet-ingrid .human-status .status{color:var(--accent)}.studio.qr-screen .join-v2{max-width:1500px}.studio.qr-screen .join-v2 img{border:0;border-radius:0;background:#fff}.studio.qr-screen .join-v2 h1{max-width:none}.studio footer{margin-top:30px;font-size:13px}.studio footer p{font-size:14px}.studio blockquote{max-width:70ch}
@media(hover:hover){.route-grid>a:hover,.lab-nav a:hover{border-color:var(--accent)}.studio-header nav a:hover{background:#c6f58d10;color:var(--ink)}}
@media(prefers-reduced-motion:no-preference){.route-grid>a{transition:transform .18s ease,border-color .18s ease}.route-grid>a:hover{transform:translateY(-3px)}}
@media(max-width:850px){.studio .studio-hero{grid-template-columns:1fr .65fr;gap:25px}.hero-photo{height:370px}.route-grid{grid-template-columns:1fr 1fr}.studio .studio-header{align-items:flex-start;gap:15px;padding:16px 22px}.studio-header nav{gap:2px}.studio-header nav a{font-size:12px;padding:8px}.studio .studio-header>button{display:none}.studio .lab-nav{grid-template-columns:repeat(5,minmax(95px,1fr));overflow-x:auto;padding-bottom:8px}.studio .lab-nav a{padding:14px;min-height:95px}.studio .lab-nav strong{font-size:18px}.studio .agenda-row{grid-template-columns:1fr;gap:10px}.studio .time{display:flex;gap:18px}.studio .time .elapsed{margin:0}.studio .help-strip{flex-wrap:wrap}.studio .help-strip>a{margin-left:70px}}
@media(max-width:600px){.studio main{padding:0 20px}.studio h1{font-size:48px}.studio .intro{padding-top:35px}.studio .studio-hero{grid-template-columns:1fr;padding:32px 0 25px}.studio .hero-photo{height:240px}.studio .hero-photo img{object-position:center 67%}.studio .studio-header{flex-direction:column;gap:9px;padding:14px 20px}.studio-brand span{display:none}.studio-header nav{width:100%;justify-content:space-between}.studio .studio-header nav a{font-size:12px;min-height:38px;padding:8px}.route-grid{grid-template-columns:1fr;gap:12px}.route-grid>a{min-height:0;padding:23px}.route-grid .route-icon{position:absolute;right:24px;top:25px;font-size:22px}.route-grid h3{font-size:27px}.route-grid p{margin-bottom:16px}.route-grid .eyebrow{padding-right:40px}.help-banner{padding:25px}.studio .lab-title{padding:23px}.studio .lab-title h2{font-size:34px}.studio .agenda-row{padding:18px}.reader-bar{gap:10px;padding:14px;grid-template-columns:1fr 1fr}.reader-bar label{grid-column:1/-1;grid-row:1}.reader-bar button{font-size:14px}.reader-bar .reader-mode{grid-column:1/-1}.studio .citation-card{padding:20px}.studio .book-grid{grid-template-columns:1fr}.studio .book{padding:22px}.studio .programme-controls{padding:16px}.studio .programme-controls label{min-width:140px}.studio p,.studio li{font-size:17px}.studio .finish-detail>div{margin:15px}.studio details>p,.studio details>ol,.studio details>ul{margin:17px}.studio .studio-tags{gap:7px}.studio-tags span{font-size:11px}.studio.page-meet-ingrid h1{font-size:clamp(64px,15vw,95px)}.studio.page-meet-ingrid .stage{min-height:70vh}.studio.page-meet-ingrid .hero-copy{padding:32px 6vw}.studio.page-meet-ingrid .declaration{font-size:27px}.studio.page-meet-ingrid .hero nav{gap:18px}}
@media print{.studio{background:white;color:#111}.studio .studio-header,.reader-bar,.reader-footer,.lab-switch-controls,.book-search{display:none!important}.studio .lab[hidden],.studio [data-reader-step][hidden],.studio .book[hidden]{display:block!important}.studio .lab,.studio .step{border:0;background:white}.studio .agenda-row,.studio .book,.studio .lab-title{background:#f7f7f7;color:#111}.studio .break-row{border:2px solid #557237}.studio .time,.studio .eyebrow{color:#234d33}.studio .primary{background:white;color:#111}.studio .row-prompt{display:none}.studio details>summary{color:#111}.studio .lab-finish{display:block}.studio .hero-photo{display:none}.studio .studio-hero{display:block}.studio .teacher-note{break-inside:avoid}}

.studio.page-setup main,.studio.page-construct-guide main,.studio.page-github-guide main,.studio.page-javascript-construct main{max-width:960px}.studio [hidden]{display:none!important}@media print{.studio .lab[hidden],.studio [data-reader-step][hidden],.studio .book[hidden],.studio main>.finish[hidden]{display:block!important}}

@media print{:root{--bg:#fff;--panel:#fff;--ink:#111;--soft:#333;--accent:#134c57;--cyan:#134c57;--line:#bbb;--violet:#46346c;color-scheme:light}.studio details,.studio .look,.studio .citation-card,.studio .citation-card blockquote,.studio .help-banner,.studio .help-strip,.studio .outcome{background:#fff;color:#111}.studio a{color:#134c57}.studio .book-author,.studio .row-detail>p{color:#333}}
/* Phone: a comfortable tap target for the step-reader toggle. */
.studio .reader-bar .reader-mode{min-height:44px}
