:root{--ink:#142238;--muted:#5f7083;--navy:#0a1426;--teal:#0a958a;--teal-deep:#087e79;--violet:#6354d7;--violet-soft:#f0edff;--cream:#fbfaf7;--line:#dfe7ed;--bg:#f5f8fa;--shadow:0 16px 52px rgba(11,29,49,.07)}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);line-height:1.6;font-size:15px}a{color:inherit;text-decoration:none}a:hover{text-decoration:none}button,input{font:inherit}button{cursor:pointer}.skip{position:absolute;top:-100px;left:10px;background:white;z-index:99;padding:12px}.skip:focus{top:10px}:focus-visible{outline:3px solid #189fc9;outline-offset:3px}
.container{width:min(1160px,calc(100% - 42px));margin:0 auto}
.site-header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{min-height:82px;display:flex;justify-content:space-between;align-items:center;gap:18px}.logo{display:inline-flex;gap:11px;align-items:center;flex-shrink:0}.logo-box{width:43px;height:43px;background:var(--navy);border-radius:12px;color:#fff;font-weight:900;display:grid;place-items:center;font-size:18px;letter-spacing:-1px}.logo strong{display:block;letter-spacing:.015em;font-size:16px;line-height:1.2}.logo small{display:block;letter-spacing:.14em;font-size:9.4px;font-weight:800;color:#788899;margin-top:4px}.site-header nav{display:flex;align-items:center;gap:27px;font-size:13px;font-weight:750;color:#41556a}.site-header nav a:hover{color:var(--teal-deep)}.site-header nav .logout{border:1px solid var(--line);padding:9px 13px;border-radius:9px}.nav-label{font-size:12px;color:#718194}
.hero{position:relative;overflow:hidden;background:var(--navy);color:white}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 15%,rgba(89,201,190,.18),transparent 37%),radial-gradient(circle at 9% 95%,rgba(108,80,211,.19),transparent 40%)}.hero:after{content:"";position:absolute;inset:0;opacity:.045;background-size:38px 38px;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px)}.hero-in{position:relative;z-index:1;padding:68px 0 66px;display:grid;grid-template-columns:1fr 300px;align-items:center;gap:36px}.kicker{text-transform:uppercase;font-size:11px;font-weight:850;letter-spacing:.18em;color:#90e3da}.hero h1{font-size:clamp(34px,4.7vw,59px);letter-spacing:-.054em;line-height:1.1;margin:15px 0}.hero h1 em{color:#8ae6dc;font-style:normal}.hero p{color:#b9cada;max-width:690px;margin:0;font-size:16px;line-height:1.85}.hero-figure{padding:25px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:19px;box-shadow:0 23px 60px rgba(0,0,0,.18)}.hero-figure span{color:#9bded7;text-transform:uppercase;font-size:10px;letter-spacing:.17em;font-weight:800}.hero-figure strong{display:block;font-size:46px;line-height:1;margin-top:12px;letter-spacing:-.07em}.hero-figure p{font-size:12px;line-height:1.5;margin-top:10px;color:#c3d4e1}.hero-figure .line{height:1px;background:rgba(255,255,255,.15);margin:22px 0}.hero-figure .mini{display:flex;justify-content:space-between;font-size:12px;font-weight:650;color:#d5e6ee}
.section{padding:58px 0}.section-head{margin-bottom:25px}.eyebrow{font-weight:850;color:var(--teal-deep);letter-spacing:.15em;font-size:11px;text-transform:uppercase}.section h2{font-size:clamp(27px,3vw,37px);line-height:1.2;letter-spacing:-.042em;margin:9px 0 13px}.section-head p{margin:0;max-width:770px;color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px auto 4px}.metric{background:#fff;padding:18px 21px;border:1px solid var(--line);border-radius:13px}.metric strong{display:block;font-size:22px;letter-spacing:-.04em}.metric small{display:block;color:var(--muted);font-size:11px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:28px;box-shadow:var(--shadow)}.card h3{font-size:21px;line-height:1.25;margin:10px 0 10px;letter-spacing:-.03em}.card p{font-size:13.8px;color:var(--muted);line-height:1.75}.card .tag{display:inline-block;background:#e5f7f3;color:#057b71;font-size:10px;font-weight:850;letter-spacing:.11em;padding:6px 11px;border-radius:90px;text-transform:uppercase}.card.violet .tag{background:var(--violet-soft);color:#6252c7}.card .meta{border-top:1px solid var(--line);padding-top:18px;margin-top:25px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;color:#647789;font-weight:650}.action-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--teal-deep);font-weight:850}.violet .action-link{color:var(--violet)}.action-link:hover{text-decoration:underline;text-underline-offset:4px}.card.wide{grid-column:span 2}
.steps{display:grid;gap:13px}.step{display:grid;grid-template-columns:42px 1fr;gap:16px;border:1px solid var(--line);border-radius:14px;padding:21px;background:white}.step .n{display:grid;place-items:center;border-radius:12px;background:#e1f6f1;color:var(--teal-deep);height:42px;width:42px;font-size:16px;font-weight:850}.step h3{font-size:16px;margin:0 0 6px}.step p{margin:0;color:var(--muted);font-size:13px}.step ul,.step ol{margin:9px 0 0;padding-left:18px;font-size:13px;color:#405368}.step li{margin:4px 0}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:10px;padding:12px 19px;border:0;font-size:13px;font-weight:850;transition:background .17s}.btn-teal{background:var(--teal);color:white}.btn-teal:hover{background:#087970}.btn-white{background:white;color:var(--navy)}.btn-dark{background:#10233d;color:white}.btn-light{border:1px solid var(--line);background:white;color:#19324a}.btn-light:hover{background:#f3f8f9}.btn-small{padding:8px 13px;font-size:11.5px}.action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.notice{border:1px solid #d5e7ec;background:#edf7fa;border-radius:13px;padding:17px 19px;color:#274a5b;font-size:13px;line-height:1.8;margin:23px 0}.notice b{color:#153e4e}.notice.warn{border-color:#eedbb0;background:#fff9e9;color:#695422}.notice.warn b{color:#654715}
.breadcrumbs{font-size:12px;color:#68798b;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:20px 0}.breadcrumbs a{color:var(--teal-deep);font-weight:700}.article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(23px,4vw,43px);box-shadow:var(--shadow);margin:12px 0 55px}.article-head{border-bottom:1px solid var(--line);padding-bottom:23px;margin-bottom:27px}.article h1{font-size:clamp(29px,3.4vw,42px);letter-spacing:-.05em;line-height:1.18;margin:9px 0}.article h2{font-size:23px;letter-spacing:-.035em;margin:34px 0 15px}.article h3{font-size:17px;margin:20px 0 8px}.article p,.article li{font-size:14px;color:#4c5f72;line-height:1.83}.article ol,.article ul{padding-left:23px}.article li{margin:5px 0}.article .lead{font-size:16px;color:#556b7e}.article code{background:#edf3f6;color:#153952;padding:2px 6px;border-radius:5px;font-size:.9em}.article pre{border-radius:13px;background:#101d2d;color:#d4f8f4;padding:19px;overflow:auto;font-size:12px;line-height:1.65}.article pre code{background:transparent;color:inherit;padding:0}.article table{border-collapse:collapse;width:100%;font-size:13px}.article td,.article th{text-align:left;border-bottom:1px solid var(--line);padding:11px}.article th{color:#496175;background:#f5f9fa}.article hr{height:1px;border:0;background:var(--line);margin:32px 0}.article .phrase{padding:17px 20px;background:#e9f8f5;border-left:4px solid var(--teal);font-weight:700;color:#1b4b49;border-radius:0 10px 10px 0}.article .toc{background:#f4f8fb;border-radius:13px;padding:18px 23px}.article .toc a{display:inline-flex;color:#087e79;font-weight:750;margin-right:21px;font-size:13px}.article a.inline{color:var(--teal-deep);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.materials{display:grid;gap:10px}.file-row{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 19px}.file-info{display:flex;align-items:center;gap:13px;min-width:0}.file-type{background:var(--violet-soft);border-radius:9px;color:var(--violet);width:53px;height:44px;display:grid;place-items:center;font-size:11px;font-weight:900}.file-row strong{display:block;font-size:13.5px;line-height:1.25}.file-row small{display:block;color:#7e8e9e;font-size:11px;margin-top:4px}.file-row a{flex-shrink:0}.group-heading{margin:35px 0 13px;font-size:19px;letter-spacing:-.025em}
.login-wrap{padding:64px 0 91px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:45px;align-items:center}.login-intro .eyebrow{color:var(--teal-deep)}.login-intro h1{font-size:clamp(35px,4vw,53px);line-height:1.13;letter-spacing:-.052em;margin:14px 0 19px}.login-intro p{color:#5d7083;line-height:1.9;max-width:555px}.login-points{display:grid;gap:13px;margin-top:29px}.login-points span{display:flex;align-items:center;gap:11px;font-size:13px;color:#496075;font-weight:750}.login-points i{display:grid;place-items:center;background:#e0f5ee;color:#07887a;width:30px;height:30px;font-style:normal;border-radius:9px}.login-card{padding:38px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.lock-icon{display:grid;place-items:center;width:52px;height:52px;background:#e9f6f3;color:#047b70;border-radius:15px;font-size:24px;margin-bottom:15px}.login-card h2{font-size:25px;margin:0 0 9px;letter-spacing:-.035em}.login-card p{color:#697a8a;font-size:13px;line-height:1.7;margin:0 0 27px}.form-label{font-size:12px;font-weight:800;margin-bottom:8px;display:block}.pass-field{display:flex;border:1px solid #cbd8e1;border-radius:10px;overflow:hidden}.pass-field:focus-within{outline:3px solid #b2e7e3}.pass-field input{width:100%;padding:14px 14px;border:0;outline:none;color:#233d50;background:#fff}.pass-field button{border:0;background:#eff5f8;padding:9px 14px;font-size:12px;font-weight:800;color:#526b7d}.login-card .btn{margin-top:17px;width:100%}.error{margin:10px 0;background:#fff0ee;border:1px solid #f1c7c1;color:#972e22;font-size:12px;padding:11px;border-radius:9px}.success-note{margin:11px 0;background:#e5f7ee;color:#24704d;border-radius:9px;padding:11px;font-size:13px}.login-caption{font-size:11px;text-align:center;color:#8796a5;margin-top:16px}.site-footer{background:#0b172a;color:#c9d5df;padding:38px 0}.foot{display:flex;justify-content:space-between;align-items:center;gap:20px}.foot strong{font-size:14px}.foot p,.foot span{font-size:11px;color:#a1b2c2}.foot p{max-width:550px;margin:5px 0}
.checks{margin:23px 0;border:1px solid var(--line);border-radius:13px;padding:21px}.checks label{display:flex;align-items:flex-start;gap:12px;margin:11px 0;font-size:13px;color:#496075}.checks input{margin-top:4px;accent-color:var(--teal)}.progress-track{height:6px;border-radius:10px;background:#e9eff3;margin-top:11px;overflow:hidden}.progress-fill{height:100%;background:var(--teal);width:0;transition:width .3s}.progress-label{font-size:11px;color:#65788b}
@media(max-width:910px){.hero-in{grid-template-columns:1fr;gap:22px}.hero-figure{max-width:350px}.login-wrap{gap:25px}.site-header nav{gap:13px}}
@media(max-width:720px){.container{width:min(100% - 34px,1160px)}.header-inner{min-height:73px}.site-header nav a[href="/"]{display:none}.site-header nav{gap:10px;font-size:11px}.hero-in{padding:53px 0}.hero h1{font-size:38px}.hero p{font-size:14px}.grid,.metrics,.login-wrap{grid-template-columns:1fr}.card.wide{grid-column:auto}.section{padding:41px 0}.card{padding:22px}.article{padding:24px;margin-bottom:35px}.login-wrap{padding:46px 0}.file-row{align-items:flex-start;flex-direction:column}.foot{flex-direction:column;align-items:flex-start}.file-row a{align-self:flex-start}}
@media print{.site-header,.site-footer,.btn,.checks{display:none!important}.article{box-shadow:none;border:0}body{background:white}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Formação docente 16h: leitura do cronograma e menu estendido */
.table-scroll{overflow-x:auto;width:100%;margin:18px 0 12px}.table-scroll table{width:100%;min-width:680px;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line)}.table-scroll th,.table-scroll td{text-align:left;border-bottom:1px solid var(--line);padding:12px 14px;vertical-align:top}.table-scroll th{background:#eef6f6;color:#19324a;font-weight:800}.table-scroll tbody tr:nth-child(even){background:#fafcfd}.subtle-note{font-size:13px;color:var(--muted);margin:8px 0 24px}.site-header nav{flex-wrap:wrap;justify-content:flex-end}


/* Módulo JSON - Formação Docente 16h · v4 */
.json-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:19px 0 27px}
.json-glossary>div{display:flex;flex-direction:column;gap:7px;padding:17px 18px;border:1px solid var(--line);border-radius:12px;background:#f8fbfc;min-width:0}
.json-glossary strong{font-size:15px}.json-glossary code{font-size:12px;overflow-wrap:anywhere;color:#126d6b}.json-glossary span{font-size:12px;color:#64778a}
.json-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:19px 0}
.json-code-label{font-weight:800;font-size:12px;color:#0b766d;padding:9px 12px;background:#e3f5f0;border-radius:9px 9px 0 0}.json-code-label.bad{color:#9d5140;background:#fcebe6}
.article .json-code{white-space:pre;overflow-x:auto;max-width:100%;background:#101e31;color:#e7f4fb;font-size:12px;line-height:1.6;border-radius:11px;padding:20px 21px;margin:14px 0;tab-size:2;letter-spacing:0}
.json-pair .json-code{border-radius:0 0 9px 9px;margin:0;min-height:195px}
.json-mini{margin:17px 0}.json-mini .subtle-note{margin-top:2px}
.json-pipeline{display:flex;align-items:stretch;gap:9px;margin:24px 0;flex-wrap:wrap}.json-pipeline>div{flex:1;min-width:150px;border:1px solid #d4e4e9;border-radius:12px;background:#f2f8fa;padding:15px}.json-pipeline>div span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:#147b78}.json-pipeline b{display:block;font-size:14px;color:#132c40;margin:5px 0}.json-pipeline small{font-size:11px;color:#6a7c8e}.json-arrow{display:grid;place-items:center;font-size:22px;color:#118e83}
.json-playground{border:1px solid #c7dae2;background:#f8fbfc;border-radius:15px;padding:20px;margin:18px 0 25px}
.json-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:15px}.json-controls label,.json-editor-label{font-weight:800;font-size:12px;color:#244459}.json-controls select{padding:9px 12px;min-width:195px;max-width:100%;border:1px solid #bdced6;border-radius:9px;background:#fff;color:#143247}
.article textarea.json-editor{display:block;width:100%;min-height:290px;resize:vertical;padding:16px 17px;border:1px solid #bfd5df;border-radius:11px;background:#101e31;color:#e7f4fb;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre;overflow:auto;margin:9px 0 15px;tab-size:2}
.json-playground .action-row{margin:10px 0 15px}.json-status{padding:12px 15px;background:#e8f1f5;color:#315469;border-radius:9px;font-size:13px}.json-status.valid{background:#e3f5ed;color:#155b45}.json-status.invalid{background:#fce9e5;color:#983322}.json-insights{border-left:3px solid #91bfbb;margin-top:12px;padding-left:14px}.json-insights p{margin:5px 0;font-size:12px;color:#456173;overflow-wrap:anywhere}
.json-quiz{background:#fff;border:1px solid var(--line);border-radius:14px;padding:23px;margin:21px 0}.json-quiz fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:17px 0}.json-quiz legend{font-size:14px;font-weight:800;padding-top:12px;display:block;color:var(--ink)}.json-quiz label{display:block;padding:7px 12px;margin:6px 0;border-radius:8px;background:#f8fafb;font-size:12px;color:#3a5268;cursor:pointer}.json-quiz input{accent-color:var(--teal);margin-right:8px}.json-quiz-result{color:#1c635a;font-size:13px;font-weight:800;min-height:1.6em}
@media(max-width:760px){.json-glossary,.json-pair{grid-template-columns:1fr}.json-pipeline{flex-direction:column}.json-arrow{transform:rotate(90deg)}.json-playground{padding:13px}.article .json-code{font-size:11px;padding:13px}.json-controls select{flex:1;min-width:140px}.json-quiz{padding:15px}}
@media print{.json-playground,.json-quiz button{display:none!important}.json-quiz{break-inside:avoid}}

/* V5 · atividade visual de JSON Input/Output, acessível e responsiva */
.json-flow-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.json-flow-facts>div{padding:17px;background:#f5f9fb;border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;gap:6px}
.json-flow-facts strong{font-size:14px}.json-flow-facts code{font-size:12px;color:#087c75;overflow-wrap:anywhere}.json-flow-facts span{font-size:12px;color:#617687;line-height:1.55}
.json-flow-pipeline{display:flex;align-items:center;gap:9px;margin:20px 0 28px}.json-flow-pipeline>div{background:#eef8f8;border-radius:10px;border:1px solid #cadfe3;display:flex;flex-direction:column;min-width:0;flex:1;padding:13px 10px;gap:3px}.json-flow-pipeline>div b{background:#0f8378;color:#fff;border-radius:50%;font-size:11px;width:23px;height:23px;display:grid;place-items:center}.json-flow-pipeline>div span{color:#17384b;font-size:13px;font-weight:800}.json-flow-pipeline>div small{font-size:11px;color:#52778a}.json-flow-pipeline>span{color:#149c94;font-size:22px}
.json-flow-lab{border:1px solid #cbdde4;border-radius:17px;padding:20px;background:#fff;margin:20px 0 34px;box-shadow:0 7px 28px rgba(13,42,60,.06)}
.json-flow-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.json-flow-toolbar label{font-weight:800;font-size:13px}.json-flow-toolbar select{background:#f8fbfc;border:1px solid #bcd0da;border-radius:9px;padding:10px 13px;font-size:13px;color:#19374b;min-width:230px;max-width:100%}.json-flow-counter{font-size:12px;color:#597386;font-weight:700;margin-left:auto}
.json-flow-context{background:#f0f8f7;border-left:4px solid #119286;border-radius:10px;padding:14px 17px;margin:17px 0}.json-flow-context h3{margin:7px 0 3px;font-size:17px}.article .json-flow-context p{font-size:13px;margin:4px 0;color:#38586c}.article .json-flow-context .json-flow-backend{color:#47566e}
.json-flow-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.json-flow-pane{background:#112239;border-radius:11px;overflow:hidden;min-width:0;border:1px solid #274356}.json-flow-pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#172f48;padding:12px 13px;color:#d4f6f0}.json-flow-pane-head span{font-size:12px;font-weight:900;letter-spacing:.08em}.json-flow-pane-head small{font-size:10px;color:#b7cdd8;text-align:right}
.json-flow-code{padding:9px 0 13px;height:360px;overflow:auto;scrollbar-color:#476c86 #112239}
.json-flow-code-row{display:flex;gap:10px;align-items:flex-start;width:100%;margin:0;border:0;text-align:left;background:transparent;color:#deedf6;padding:2px 9px;font-size:11px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;cursor:pointer;min-height:19px}
.json-flow-code-row:hover,.json-flow-code-row:focus-visible{background:#294764;color:#fff;outline:2px solid #60c9bf;outline-offset:-2px}.json-flow-code-row.is-selected{background:#335c67;color:#fff;box-shadow:inset 3px 0 #8be4d6}.json-flow-code-row.is-brace{color:#a9bdc9}.json-flow-code-row.is-brace.is-selected{color:#fff}.json-flow-line-no{color:#7894a8;min-width:21px;text-align:right;flex-shrink:0;user-select:none}.json-flow-code-text{white-space:pre;tab-size:2}
.json-flow-tools{margin:20px 0;padding:16px;background:#f7fafb;border:1px solid #d8e5eb;border-radius:12px}.json-flow-tools h3{font-size:15px;margin:0 0 11px}.json-flow-chips{display:flex;flex-wrap:wrap;gap:8px}.json-flow-chip{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;border:1px solid #bfd3dc;border-radius:8px;background:#fff;color:#24536a;padding:8px 10px;cursor:pointer;overflow-wrap:anywhere;white-space:normal;text-align:left}.json-flow-chip:hover,.json-flow-chip:focus-visible{border-color:#0f877c;outline:2px solid #8ce4d9}.json-flow-chip.is-selected{background:#0b746c;color:#fff;border-color:#0b746c}.json-flow-explain{background:#eaf7f5;border-radius:8px;border-left:3px solid #12877d;margin-top:13px;padding:12px 14px;color:#224e53;min-height:58px;font-size:13px}.json-flow-explain strong{display:block;font-size:12px;overflow-wrap:anywhere}.article .json-flow-explain p{margin:5px 0 0;font-size:12px;color:#315d62}
.json-flow-question-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:22px}.json-flow-question-head h3{font-size:17px}.json-flow-question-head small{font-size:11px;color:#697d8c}.json-flow-question{border:1px solid #d8e5ea;border-radius:11px;padding:14px 16px;margin:12px 0}.json-flow-question legend{font-size:13px;font-weight:800;color:#203c53;padding:0 5px}.json-flow-options{display:grid;gap:5px;margin:8px 0}.json-flow-options label{display:block;cursor:pointer;border-radius:7px;background:#f6f9fa;font-size:12px;padding:9px 11px;color:#445d6f;line-height:1.55}.json-flow-options input{accent-color:#078a7d}.json-flow-options label.is-correct{background:#def4e9;color:#175b40}.json-flow-options label.is-wrong{background:#fbe5e0;color:#973b2b}.article .json-flow-feedback{font-size:12px;margin:5px 0 0;color:#456e77}.json-flow-result{background:#eff4f8;border-radius:9px;padding:12px 14px;font-size:13px;color:#3b5c6e;margin-top:13px}.json-flow-result.is-success{background:#e1f5e9;color:#145d41}.json-flow-result.is-warning{background:#fff3de;color:#815322}.json-flow-navigation{display:flex;justify-content:space-between;gap:12px;margin-top:21px;padding-top:19px;border-top:1px solid #d9e6eb}.json-flow-navigation button:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:800px){.json-flow-columns{grid-template-columns:1fr}.json-flow-code{height:320px}.json-flow-pane-head small{font-size:10px}.json-flow-facts{grid-template-columns:1fr}.json-flow-lab{padding:12px}.json-flow-pipeline{flex-wrap:wrap}.json-flow-pipeline>div{min-width:105px}.json-flow-question-head{flex-direction:column;gap:0}.json-flow-toolbar select{min-width:0;flex:1}}
@media(max-width:480px){.json-flow-pipeline>span{display:none}.json-flow-pipeline{display:grid;grid-template-columns:1fr 1fr}.json-flow-toolbar{align-items:stretch}.json-flow-counter{margin:0}.json-flow-navigation .btn{font-size:11px;padding:10px}.json-flow-chip{font-size:10px}}
@media print{.json-flow-lab .action-row,.json-flow-navigation,.json-flow-toolbar select,.json-flow-chip{display:none!important}.json-flow-code{height:auto;overflow:visible}.json-flow-columns{grid-template-columns:1fr 1fr}.json-flow-lab{box-shadow:none}.json-flow-code-row{font-size:9px}}

/* V6 — Laboratório JavaScript: mesmo sistema visual do JSON e leitura por teclado. */
.js-concepts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.js-concepts>div{display:flex;flex-direction:column;gap:6px;border:1px solid #d7e6e9;border-radius:12px;padding:16px;background:#f6fafb}
.js-concepts strong{font-size:14px;color:#16354a}.js-concepts code{color:#057e76;overflow-wrap:anywhere}.js-concepts span{font-size:12px;line-height:1.55;color:#566d7f}
.js-lab{border:1px solid #cbdde4;border-radius:17px;padding:20px;background:#fff;margin:20px 0 34px;box-shadow:0 7px 28px rgba(13,42,60,.06)}
.js-lab-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.js-lab-toolbar label{font-weight:800;font-size:13px;color:#18394d}
.js-lab-toolbar select,.js-sim-form select{padding:10px 12px;border:1px solid #bdd0d7;background:#f8fbfc;color:#17394c;border-radius:9px;font-size:12px;max-width:100%}
.js-total{margin-left:auto;color:#287c75;font-size:12px;font-weight:800}
.js-case-intro{border-left:4px solid #09978a;background:#f0f8f7;border-radius:10px;padding:15px 17px;margin:18px 0}
.article .js-case-intro h3{font-size:19px;margin:8px 0}.article .js-case-intro p{font-size:12px;color:#38566a;margin:7px 0}
.article .js-case-intro .js-case-goal{font-weight:700;color:#185d55}
.js-panes{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.8fr);gap:12px}
.js-code-pane{background:#112239;color:#eaf6fc;border-radius:12px;overflow:hidden;min-width:0;border:1px solid #25465e}
.js-code-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#172f48;padding:11px 14px;color:#d5eee9;font-size:12px;font-weight:900}
.js-code-head button{border:1px solid #74b2b4;background:#183e53;color:#edfffd;border-radius:8px;cursor:pointer;padding:6px 9px;font-size:11px}
.js-code-view{max-height:465px;overflow:auto;padding:10px 0 14px;scrollbar-color:#527a8c #112239}
.js-line{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;padding:2px 12px;border:0;background:transparent;min-height:22px;white-space:pre;cursor:pointer;color:#deedf6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.65}
.js-line-no{color:#88a0b7;min-width:22px;text-align:right;flex-shrink:0;user-select:none}.js-line-content{white-space:pre;tab-size:2}
.js-line:hover,.js-line:focus-visible{background:#234a61;color:#fff;outline:2px solid #67c9be;outline-offset:-2px}.js-line.is-selected{background:#315d62;box-shadow:inset 3px 0 #88e1d5}
.js-inspector{background:#f4f9fa;border-radius:12px;border:1px solid #d5e6e9;padding:16px;min-width:0}.js-inspector h3{font-size:15px;color:#1a4050;margin:0 0 17px}.article .js-inspector p{font-size:13px;line-height:1.8;color:#284f5e}.js-inspector-tip{border-top:1px solid #d6e7e8;padding-top:12px;margin-top:24px;font-size:11px;color:#617785;line-height:1.65}
.js-sim{background:#f7fafb;border:1px solid #d9e5eb;border-radius:13px;padding:19px;margin:20px 0 26px}
.js-sim h3{font-size:17px;margin:0 0 6px}.article .js-sim p{margin:6px 0 13px}
.js-sim-form{display:flex;gap:11px;flex-wrap:wrap;margin:15px 0}.js-sim-form label{display:flex;flex-direction:column;gap:7px;flex:1;min-width:160px;font-size:12px;font-weight:750;color:#284957}.js-sim-form label[hidden]{display:none}
.js-sim-message{background:#e1f4ed;color:#175b4a;padding:13px 15px;border-radius:9px;font-size:13px;line-height:1.65;margin:13px 0}
.js-sim-message.js-alert{background:#fff0e5;color:#86512c;border-left:3px solid #e6a15b}
.js-json-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.js-json-columns>div{min-width:0}.js-json-columns strong{display:block;font-size:11px;letter-spacing:.06em;color:#147a73;margin-bottom:8px}
.js-json-columns pre{background:#122337;color:#e0f2fa;padding:13px 15px;border-radius:9px;font-size:10px;line-height:1.65;white-space:pre;overflow:auto;max-height:310px;min-height:165px;tab-size:2}
.article .js-sim-boundary{font-size:11px;color:#597483;margin-top:12px}
.js-question-heading{display:flex;justify-content:space-between;gap:15px;align-items:baseline}.js-question-heading h3{font-size:17px;margin-bottom:11px}.js-question-heading span{font-size:11px;color:#657a8b}
.js-question{border:1px solid #dce8ec;padding:13px 15px;border-radius:11px;margin:11px 0;min-width:0}
.js-question legend{font-weight:800;font-size:13px;color:#294353;padding:0 4px;white-space:normal}
.js-answers{display:grid;gap:6px;padding-top:7px}.js-answers label{display:block;border-radius:8px;background:#f6f9fa;color:#385669;cursor:pointer;font-size:12px;padding:10px 12px;line-height:1.55}
.js-answers input{accent-color:#077f75;margin-right:8px}.js-answers label.is-correct{background:#e0f5e9;color:#205b3d}.js-answers label.is-wrong{background:#fde6e0;color:#903d30}
.article .js-explanation{font-size:12px;color:#305d61;margin:9px 3px 0}
.js-feedback-result{background:#e7f3f5;border-radius:9px;padding:13px 15px;color:#1e625b;font-size:13px;font-weight:750;line-height:1.6;margin-top:12px}
.js-copy-fallback{display:block;width:100%;min-height:170px;padding:12px;border:2px solid #178b80;border-radius:9px;margin:12px 0;font-size:12px}
.js-lab button:focus-visible,.js-lab select:focus-visible,.js-lab input:focus-visible{outline:3px solid #059d94;outline-offset:2px}
@media(max-width:940px){.js-panes{grid-template-columns:1fr}.js-code-view{max-height:420px}.js-inspector{padding:13px}.js-inspector-tip{margin-top:12px}}
@media(max-width:740px){.js-concepts,.js-json-columns{grid-template-columns:1fr}.js-lab{padding:12px}.js-sim{padding:13px}.js-question-heading{flex-direction:column;gap:0}.js-total{margin-left:0}.js-line{font-size:10px}.js-lab-toolbar select{flex:1;min-width:160px}}
@media print{.js-code-view{max-height:none;overflow:visible}.js-line{font-size:9px}.js-sim-form,.js-lab .action-row,.js-lab-toolbar select,.js-code-head button,.js-lab .json-flow-navigation{display:none!important}.js-panes{grid-template-columns:1fr 1fr}.js-lab{box-shadow:none}}