:root{font-family:'DM Sans','Noto Sans JP',sans-serif;font-synthesis:none;color:#263349;background:#f7f9fc;--blue:#305be8;--muted:#77859a;--line:#e0e7f0;--sidebar:245px}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0}a{color:inherit;text-decoration:none}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible,.diagram-scroll:focus-visible{outline:3px solid #87a6ff;outline-offset:4px}h1,h2,h3,h4,p{margin-top:0}.icon{width:23px;height:23px;flex-shrink:0;vertical-align:middle}.text-button{padding:0;background:none;color:#55719e;font-size:13px;text-decoration:underline;text-underline-offset:4px;line-height:1.8}.text-button:hover{color:var(--blue)}.primary-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:var(--blue);color:white;border-radius:6px;font-size:14px;padding:11px 16px;line-height:1.7;font-weight:500}.primary-button .icon{width:17px;height:17px}.primary-button:hover{background:#244bd0}.skip-link{position:fixed;z-index:99;left:20px;top:-80px;padding:12px 20px;background:white;color:var(--blue);border-radius:5px}.skip-link:focus{top:12px}.sidebar{width:var(--sidebar);position:fixed;inset:0 auto 0 0;background:white;border-right:1px solid var(--line);padding:35px 18px;overflow-y:auto;z-index:3}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:700;letter-spacing:-.7px;margin:0 10px 49px}.brand-light{font-weight:400}.brand-mark{color:var(--blue)}.brand-mark .icon{width:35px;height:35px;stroke-width:1.7}.nav-label{font-size:12px;color:#8a98ad;margin:0 12px 15px;letter-spacing:.04em}.lesson-nav{display:grid;gap:7px}.lesson-link{display:flex;align-items:center;gap:10px;padding:13px 10px;border-radius:6px;font-size:13px;line-height:1.7;color:#697991}.lesson-link>.icon{width:19px;height:19px}.lesson-link.active{color:var(--blue);background:#edf2ff;font-weight:500}.lesson-link:hover{background:#f1f5fd}.lesson-link .complete-icon{color:#60957a;margin-left:auto}.complete-icon .icon{width:15px;height:15px}.nav-divider{height:1px;background:#e9eef5;margin:30px 12px 24px}.section-nav{display:grid;gap:8px}.section-nav button{text-align:left;display:flex;align-items:center;gap:12px;background:none;padding:9px 12px;color:#8794a8;font-size:13px}.section-nav .icon{width:17px;height:17px}.section-nav button:hover{color:var(--blue)}.main-shell{margin-left:var(--sidebar)}.topbar{height:69px;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between;background:#fff;gap:20px}.breadcrumbs{display:flex;gap:15px;color:#8492a7;font-size:12px;align-items:center}.breadcrumbs>span:first-child{color:#5a6b83;font-weight:500;letter-spacing:.03em}.crumb-divider{color:#c1cad7}.topbar .text-button{font-size:12px}.mobile-nav{display:none}main{padding:36px 38px 0;max-width:1740px;margin:0 auto;outline:none}.lesson-heading{margin-bottom:26px}.lesson-heading h1{font-size:clamp(26px,2.35vw,37px);font-weight:800;letter-spacing:-1px;line-height:1.65;margin-bottom:10px}.lesson-heading>p{font-size:15px;line-height:1.9;color:#8190a4;margin:0}.case-brief{background:#edf3ff;border:1px solid #dce6f9;border-radius:7px;display:flex;align-items:center;gap:15px;padding:16px 20px;color:#5e769a;margin-bottom:24px}.case-brief>.icon{width:23px;height:23px;color:#7193cb}.case-brief>div{display:flex;align-items:center;gap:18px}.case-brief strong{font-size:13px;font-weight:600;white-space:nowrap}.case-brief p{font-size:14px;line-height:1.9;margin:0}.architecture-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}.architecture-actions>p{font-size:13px;color:#8290a4;margin:0;line-height:1.8}.copy-actions{display:flex;align-items:center;gap:15px;flex-shrink:0}.copy-actions .primary-button{font-size:13px;padding:9px 13px}.copy-actions>.text-button{font-size:12px}.architecture-workspace{display:grid;grid-template-columns:minmax(0,1fr) 306px;border:1px solid #dce4ee;border-radius:9px;background:white;overflow:hidden;box-shadow:0 3px 10px #30477d03}.map-panel{min-width:0;display:flex;flex-direction:column}.map-toolbar{min-height:61px;display:flex;gap:26px;padding:0 22px;border-bottom:1px solid #e6ebf3;flex-wrap:wrap}.map-toolbar button{position:relative;padding:19px 0 18px;background:none;font-size:13px;color:#8b98ac;line-height:1.8}.map-toolbar button[aria-pressed=true]{color:var(--blue);font-weight:500}.map-toolbar button[aria-pressed=true]:after{position:absolute;content:'';height:2px;background:var(--blue);bottom:0;left:0;right:0}.mobile-map-hint{display:none}.diagram-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#c8d5e8 #f6f9fd}.diagram{position:relative;min-width:900px;height:480px;background-color:#fcfdff;background-image:radial-gradient(#dce4ef .9px,transparent .9px);background-size:19px 19px;isolation:isolate}.cloud-boundary{position:absolute;left:18%;right:1%;top:6%;bottom:1%;border:1px solid #d9e3f1;border-radius:8px;background:#f4f8fd38;z-index:-2}.cloud-boundary>span{position:absolute;top:-9px;left:17px;font-size:11px;letter-spacing:.06em;padding:0 8px;background:#fcfdff;color:#879bb7}.vpc-boundary{position:absolute;border:1px dashed #bdcee4;background:#eaf2fe3d;z-index:-1;border-radius:6px}.vpc-boundary>span{position:absolute;top:12px;left:14px;color:#7894b9;font-size:11px}.connections{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}.connection path{stroke:#a4b5cb;stroke-width:1.6}.connection text{fill:#8b9db6;font-size:11px;font-family:'DM Sans','Noto Sans JP',sans-serif;paint-order:stroke;stroke:#fcfdff;stroke-width:6px;stroke-linejoin:round}.connection.background path{stroke-dasharray:5 5}.diagram[data-mode=request] .connection.background{opacity:.25}.diagram[data-mode=background] .connection.request{opacity:.25}.diagram[data-mode=request] .connection.request path,.connection.traced path{stroke:#4878e9;stroke-width:2.1}.diagram[data-mode=background] .connection.background path{stroke:#549581;stroke-width:2.1}.connection.traced path{stroke-dasharray:7 5;animation:flow 1.7s linear infinite}.service-node{position:absolute;transform:translate(-50%,-50%);width:132px;min-height:113px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:11px 5px;border:1px solid #dce4ef;border-radius:7px;background:white;box-shadow:0 3px 10px #293c6208;transition:box-shadow .2s,border-color .2s}.service-node:hover{border-color:#85a4eb;box-shadow:0 4px 14px #315bd51a}.service-node.selected{border:1.5px solid var(--blue);box-shadow:0 0 0 4px #305be80d}.service-node.selected:after{content:'';position:absolute;right:7px;top:7px;width:5px;height:5px;background:var(--blue);border-radius:50%}.node-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--icon-color);background:var(--icon-bg);border-radius:8px;flex-shrink:0}.node-icon .icon{width:25px;height:25px}.service-node .node-icon{margin-bottom:8px}.service-node strong{font-size:12px;color:#3a4a64;letter-spacing:-.3px;font-weight:600;line-height:1.4}.service-node small{font-size:11px;color:#8596ae;margin-top:5px;line-height:1.5}.gray{--icon-color:#75879f;--icon-bg:#edf1f6}.orange{--icon-color:#d88841;--icon-bg:#fff2e5}.purple{--icon-color:#9868cc;--icon-bg:#f3eafa}.blue{--icon-color:#527ece;--icon-bg:#eaf1fd}.green{--icon-color:#569675;--icon-bg:#eaf6ee}.map-legend{margin-top:auto;padding:17px 20px;display:flex;align-items:center;gap:19px;flex-wrap:wrap;border-top:1px solid #eaf0f7;background:#fcfdff;font-size:11px;color:#91a0b6}.map-legend>span{display:flex;gap:7px;align-items:center}.map-legend i{display:block;width:20px;border-top:1px solid #99adc9}.map-legend i.dashed{border-top-style:dashed}.map-legend .text-button{margin-left:auto;font-size:11px;color:#8395b0}.mode-description{border-top:1px solid #e5ecf6;padding:17px 20px;font-size:13px;line-height:1.9;color:#647f9c;background:#f3f8fd;margin:0}.inspector{padding:25px 24px;border-left:1px solid #e0e7f1;background:white}.inspector-label{font-size:11px;color:#98a5b8;margin-bottom:23px}.inspector-service{display:flex;gap:12px;align-items:center;margin-bottom:24px}.inspector-service .node-icon{width:45px;height:45px}.inspector-service h2{font-size:18px;letter-spacing:-.3px;line-height:1.45;margin:0 0 3px;font-weight:600}.inspector-service span:not(.node-icon){font-size:11px;color:#98a5ba;line-height:1.6}.inspector h3{font-size:15px;line-height:1.8;margin-bottom:10px;font-weight:600}.inspector p{font-size:14px;line-height:1.95;color:#7c8ba1;margin:0}.why-box{margin:21px 0;padding:15px;background:#f7f9fc;border:1px solid #eaf0f7;border-radius:5px}.why-box h4{display:flex;gap:7px;align-items:center;font-size:12px;color:#5c759e;margin:0 0 9px;font-weight:500}.why-box .icon{width:16px;height:16px}.why-box p{font-size:13px;line-height:1.9}.input-output h4{font-size:11px;color:#99a8bc;margin:0 0 8px;font-weight:400}.input-output p{font-size:12px;color:#8395af}.ask-component{font-size:12px;display:inline-block;margin-top:22px;text-align:left}.trace-bar{display:flex;gap:19px;align-items:center;background:white;border:1px solid var(--line);border-radius:7px;padding:16px 19px;margin-top:15px}.trace-bar>p{color:#8a98ad;font-size:13px;line-height:1.8;margin:0}.trace-start{display:flex;align-items:center;gap:8px;background:#edf3ff;color:#456dcc;padding:10px 14px;border-radius:5px;white-space:nowrap;font-size:13px;font-weight:500}.trace-start .icon{width:16px;height:16px}.trace-bar.active{display:block;padding:20px 24px;border-color:#cddbf5;background:#fbfdff}.trace-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.trace-step{color:#6686c1;font-size:12px;font-weight:600;letter-spacing:.05em}.trace-navigation{display:flex;gap:10px;align-items:center}.small-button{background:#ecf2ff;border:1px solid #dce6fa;color:#5476b4;font-size:12px;border-radius:4px;padding:5px 12px}.trace-navigation .text-button{font-size:12px;margin-left:4px}.trace-explanation{margin-top:15px}.trace-explanation h3{font-size:16px;margin-bottom:7px;color:#45618f;font-weight:500}.trace-explanation p{font-size:14px;line-height:1.9;color:#7a8da9;margin:0}.trace-dots{display:flex;gap:9px;margin-top:17px}.trace-dots button{width:29px;height:29px;border:1px solid #dbe4f4;background:#fff;color:#8ca0bf;border-radius:50%;font-size:12px}.trace-dots button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:white}.decisions-section{margin-top:37px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:20px}.section-heading h2,.next-lessons h2{font-size:17px;font-weight:600;margin:0}.section-heading>span{font-size:12px;color:#a0adbe}.decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}.decision-card{border:1px solid var(--line);border-radius:7px;background:white;overflow:hidden}.decision-card summary{position:relative;padding:24px 21px 17px;list-style:none;cursor:pointer}.decision-card summary::-webkit-details-marker{display:none}.decision-number{position:absolute;right:17px;top:17px;font-size:24px;color:#c7d4e7}.decision-card h3{font-size:14px;line-height:1.8;margin:0 27px 10px 0;font-weight:600}.decision-card summary p{font-size:13px;color:#8a98ac;line-height:1.9;min-height:49px;margin-bottom:18px}.decision-toggle{font-size:12px;color:#7892b5;display:flex;align-items:center;justify-content:space-between}.decision-toggle>span{font-size:20px;font-weight:400;line-height:1}.decision-card[open] .decision-toggle>span{transform:rotate(45deg)}.decision-card[open]{border-color:#c4d4f4}.decision-body{padding:19px 21px 22px;border-top:1px solid #e9eef6;background:#fbfcff}.decision-body>p{font-size:14px;line-height:1.95;color:#7b8ba3;margin-bottom:18px}.decision-body h4{font-size:12px;color:#526e9d;font-weight:500;margin-bottom:8px}.decision-body>.text-button{font-size:12px}.quiz-section{margin-top:32px;background:white;border:1px solid var(--line);border-radius:8px;padding:27px;display:grid;grid-template-columns:210px 1fr;gap:27px}.quiz-intro{display:flex;gap:12px;align-items:flex-start}.quiz-intro>.icon{color:#7795bd;width:22px;height:22px;margin-top:3px}.quiz-intro h2{font-size:16px;font-weight:600;line-height:1.8;margin-bottom:7px}.quiz-intro p{font-size:12px;line-height:1.9;color:#91a0b6}.quiz-content{min-width:0}.quiz-content>h3{font-size:15px;font-weight:500;line-height:1.9;margin-bottom:18px}.quiz-choices{display:grid;gap:9px}.quiz-choice{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid #e2e8f1;border-radius:5px;background:#fcfdff;text-align:left;font-size:13px;line-height:1.8;color:#7e8ea6}.quiz-choice>span{font-size:11px;color:#92a7c3;font-weight:600}.quiz-choice:hover{border-color:#a6bde9}.quiz-choice[aria-pressed=true]{color:#4368b4;border-color:#7f9fdd;background:#eff4ff}.quiz-feedback{margin-top:15px;border:1px solid #e5e7ee;background:#f7f8fb;padding:17px;border-radius:5px}.quiz-feedback.correct{background:#f0f8f4;border-color:#d4e8df}.quiz-feedback>strong{display:flex;gap:7px;align-items:center;font-size:14px;font-weight:500;color:#658575}.quiz-feedback .icon{width:17px;height:17px}.quiz-feedback>p{font-size:13px;line-height:1.95;color:#7b8e86;margin:10px 0 0}.saved-note{display:block;font-size:11px;color:#89a496;margin-top:12px}.next-lessons{margin-top:34px}.next-lessons h2{font-size:15px;margin-bottom:17px}.next-lessons>div{display:grid;grid-template-columns:1fr 1fr;gap:16px}.next-lessons a{display:flex;gap:15px;align-items:center;border:1px solid var(--line);background:white;border-radius:6px;padding:20px;color:#7186a8;font-size:14px}.next-lessons a:hover{border-color:#9fb6e5}.next-lessons a>.icon:first-child{color:#90a9cf}.next-lessons a>.icon:last-child{width:16px;height:16px;margin-left:auto;color:#a0b2cb}.next-lessons small{display:block;font-size:11px;color:#a6b1c2;margin-top:5px}footer{display:flex;align-items:center;gap:20px;color:#97a4b8;font-size:11px;padding:34px 0 26px}footer>span{font-weight:600;letter-spacing:.03em}footer>p{font-size:11px;margin:0;color:#a3aebe}footer>.text-button{margin-left:auto;font-size:11px}section{scroll-margin-top:25px}dialog{width:calc(100% - 36px);max-width:780px;border:1px solid #dce4ee;border-radius:12px;padding:28px;color:#31425d;box-shadow:0 30px 100px #08153140;max-height:90vh;overflow-y:auto}dialog::backdrop{background:#17274075;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}.dialog-head h2{font-size:20px;line-height:1.7;margin:0;font-weight:600}.icon-button{width:35px;height:35px;background:#f3f6fb;border-radius:50%;font-size:25px;color:#7e90aa;line-height:1;flex-shrink:0}dialog>p{font-size:14px;line-height:1.9;color:#8493aa}.field-label{display:block;font-size:13px;font-weight:500;margin-bottom:9px;color:#6882a6}textarea{display:block;width:100%;resize:vertical;font-size:14px;line-height:1.85;border:1px solid #d6e1f1;border-radius:5px;background:#fcfdff;color:#566e94;padding:13px}#ai-question{min-height:80px}#export-text{height:28vh;min-height:180px;background:#f7faff}.export-options{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:17px 0;font-size:12px;color:#8295b2}.export-options>label{display:flex;align-items:center;gap:7px;line-height:1.8}.export-options input{accent-color:var(--blue);width:15px;height:15px}.export-options .text-button{font-size:12px}.export-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:19px}.export-actions>.primary-button{flex-shrink:0}#export-status{font-size:12px;line-height:1.8;color:#65846f}#sources-content h3{font-size:15px;margin:25px 0 15px}.source-notes{padding-left:22px;font-size:14px;line-height:2;color:#8493aa}.source-notes li{margin-bottom:10px}.source-links{padding:0;list-style:none}.source-links li{border-bottom:1px solid #e7edf5;padding:13px 0}.source-links a{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:14px;color:#5f83c1;line-height:1.8}.source-links a:hover{text-decoration:underline}.source-links .icon{width:16px;height:16px}.source-date{font-size:12px;color:#a2afbf;margin:22px 0 0}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);z-index:10;background:#283d5b;color:white;border-radius:7px;box-shadow:0 8px 30px #26395822;padding:15px 23px;font-size:14px;line-height:1.8;width:max-content;max-width:calc(100% - 32px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.visible{opacity:1;transform:translate(-50%,0)}.noscript{max-width:700px;padding:40px}.noscript p{line-height:2}@keyframes flow{to{stroke-dashoffset:-48}}
@media(min-width:1700px){.diagram{height:510px}.inspector{padding:28px}.architecture-workspace{grid-template-columns:minmax(0,1fr) 330px}}
@media(max-width:1450px){:root{--sidebar:225px}main{padding:30px 28px 0}.topbar{padding-inline:28px}.architecture-workspace{grid-template-columns:minmax(0,1fr) 285px}.inspector{padding:23px 20px}.architecture-actions{align-items:flex-start;flex-direction:column;gap:13px}.copy-actions{align-self:flex-end}.architecture-actions>p{margin-bottom:-3px}.lesson-link{font-size:12px;padding-inline:8px}.brand{font-size:23px}.quiz-section{grid-template-columns:180px 1fr;gap:20px}.case-brief>div{gap:13px}.decision-card summary{padding:21px 17px 16px}.decision-card h3{font-size:13px}.decision-number{font-size:21px;right:13px}.decision-body{padding-inline:17px}}
@media(max-width:1220px){.architecture-workspace{grid-template-columns:1fr}.inspector{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.6fr;column-gap:25px}.inspector-label{grid-column:1/-1;margin-bottom:18px}.inspector-service{grid-row:2/4;align-self:start;margin-bottom:0}.why-box{grid-column:1/-1;margin:18px 0}.input-output{grid-column:1/-1}.ask-component{grid-column:1/-1;text-align:left;margin-top:15px}.copy-actions{align-self:initial}.architecture-actions{gap:13px}.decision-grid{gap:12px}.quiz-section{grid-template-columns:1fr;gap:16px}.quiz-intro{gap:10px}.quiz-intro p{margin-bottom:0}.quiz-intro h2{margin-bottom:3px}.diagram{height:455px}.map-legend{margin-top:0}}
@media(max-width:950px){:root{--sidebar:205px}.sidebar{padding-inline:12px}.brand{font-size:21px;margin-inline:8px}.brand-mark .icon{width:30px;height:30px}.lesson-link{font-size:11px;gap:8px}.lesson-link>.icon{width:17px;height:17px}.section-nav button{font-size:12px}.lesson-heading h1{font-size:27px}main{padding:27px 23px 0}.topbar{padding-inline:23px}.lesson-heading>p{font-size:14px}.case-brief>div{display:block}.case-brief strong{display:block;margin-bottom:5px}.case-brief{align-items:flex-start}.case-brief>.icon{margin-top:3px}.decision-grid{grid-template-columns:1fr}.decision-card summary{padding:22px}.decision-card h3{font-size:15px}.decision-card summary p{min-height:0;font-size:14px;margin-bottom:12px}.decision-number{right:22px;top:20px;font-size:25px}.decision-body{padding-inline:22px}.next-lessons>div{grid-template-columns:1fr}.next-lessons a{padding:17px 20px}footer{flex-wrap:wrap;gap:12px}footer>.text-button{margin-left:0}.map-toolbar{gap:22px}.section-heading>span{display:none}}
@media(max-width:750px){.sidebar{display:none}.main-shell{margin-left:0}.topbar{height:61px;padding-inline:20px}.breadcrumbs>span:first-child{font-size:15px;color:#365483;font-weight:600}.topbar .text-button{font-size:11px}.mobile-nav{display:flex;align-items:center;gap:16px;margin:22px 20px 0}.mobile-nav label{font-size:12px;color:#9aa7bc}.mobile-nav select{flex:1;min-width:0;background:white;border:1px solid #dce5f3;color:#5976a1;border-radius:5px;padding:11px 13px;font-size:14px}.lesson-heading h1{font-size:27px;line-height:1.65;letter-spacing:-.7px}.lesson-heading>p{font-size:14px;line-height:1.9}.lesson-heading{margin-bottom:21px}main{padding:25px 20px 0}.architecture-actions>p{font-size:12px}.primary-button{font-size:13px}.copy-actions{gap:13px}.copy-actions>.primary-button{font-size:12px;padding:10px 12px}.copy-actions>.text-button{font-size:12px;white-space:nowrap}.case-brief{padding:15px}.case-brief p{font-size:13px}.mobile-map-hint{display:block;padding:10px 18px 0;background:#fcfdff;color:#a1afc2;font-size:11px}.map-toolbar{padding-inline:18px;min-height:55px;gap:22px}.map-toolbar button{font-size:12px;padding-block:16px}.diagram{height:430px}.map-legend{padding:14px 18px;gap:12px;font-size:11px}.map-legend .text-button{font-size:11px}.inspector{display:block;padding:24px}.inspector-service{margin-bottom:20px}.inspector h3{font-size:16px}.inspector p{font-size:15px}.inspector .why-box p{font-size:14px}.inspector .input-output p{font-size:13px}.inspector-label{font-size:12px}.inspector-service span:not(.node-icon){font-size:12px}.ask-component{font-size:13px}.trace-bar{flex-wrap:wrap;gap:12px;padding:16px}.trace-bar>p{font-size:13px}.trace-bar.active{padding:19px}.trace-explanation p{font-size:14px}.section-heading h2{font-size:17px}.decision-card h3{font-size:15px}.quiz-section{padding:23px}.quiz-content>h3{font-size:15px}.quiz-choice{font-size:14px;padding:12px}.quiz-feedback>p{font-size:14px}.next-lessons a{font-size:14px}.next-lessons small{font-size:12px}footer{font-size:12px;gap:10px;padding-top:28px}footer>p{font-size:11px}footer>.text-button{font-size:12px}dialog{padding:24px}.dialog-head h2{font-size:19px}textarea{font-size:16px}.export-options{flex-wrap:wrap}.export-actions{align-items:flex-start;flex-direction:column;gap:12px}.export-actions .primary-button{width:100%}#toast{font-size:13px;padding:13px 17px}}
@media(max-width:380px){.breadcrumbs{gap:8px;font-size:11px}.topbar .text-button{font-size:10px}.copy-actions{align-items:flex-start;flex-direction:column;gap:8px}.lesson-heading h1{font-size:24px}.map-toolbar{gap:16px}.map-toolbar button{font-size:11px}.trace-top{gap:10px}.trace-navigation{gap:7px}.small-button{padding-inline:9px}.map-legend .text-button{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the entire 900px canvas visible before placing details beside it. */
#architecture{container-name:architecture;container-type:inline-size}
@container architecture (max-width:1210px){
  .architecture-workspace{grid-template-columns:minmax(0,1fr)}
  .inspector{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.6fr;column-gap:25px}
  .inspector-label{grid-column:1/-1;margin-bottom:18px}
  .inspector-service{grid-row:2/4;align-self:start;margin-bottom:0}
  .why-box{grid-column:1/-1;margin:18px 0}
  .input-output{grid-column:1/-1}
  .ask-component{grid-column:1/-1;text-align:left;margin-top:15px}
}
@container architecture (max-width:902px){
  .mobile-map-hint{display:block;padding:10px 18px 0;background:#fcfdff;color:#8191a9;font-size:12px}
}
@container architecture (max-width:600px){
  .inspector{display:block}
  .inspector-service{margin-bottom:20px}
}