/* Seo+AI Playbook 2027 concept: layered workspace, editorial hierarchy, clear controls. */
:root{color-scheme:dark;--navy:#080c15;--ink:#eef2ff;--muted:#a6b1c9;--blue:#c0afff;--pale:#212039;--line:#2b3246;--canvas:#0d121d;--lime:#d7fa8a;--white:#161d2b;--radius:18px}
body{background:radial-gradient(ellipse at 90% 0%,#28203988,transparent 42%),var(--canvas);font-family:"Segoe UI",Arial,sans-serif}
.sidebar{background:#090e18;border-right:1px solid #252c3e;width:238px;padding:30px 20px}
.workspace{margin-left:238px}.brand{font-size:2.2rem}.brand-icon{background:linear-gradient(145deg,#cfb6ff,#7480ee);color:#151020;box-shadow:0 0 25px #ac8df52b}.brand-dot{color:#c4acff}.edition{font-size:10px;letter-spacing:.15em;margin-bottom:22px}
.nav-item{font-size:14px;padding:11px 10px;color:#a8b3ca;border:1px solid transparent}.nav-item.active{background:linear-gradient(90deg,#b7a4ff20,#b7a4ff08);border-color:#b4a1f94d;color:#e6deff}.nav-item.active .nav-icon{color:#d5fa8a}.nav-group{color:#8590a7;font-size:11px}.nav-item:hover{background:#1a2030}
.side-note{color:#d8f3a9}.side-bottom{padding-top:24px}.side-bottom p{font-size:12px}
.topbar,.scopebar{background:#0c111dcf;backdrop-filter:blur(18px);border-color:#262e40}.topbar{height:78px}.topbar input{color:var(--ink)}.prototype{border-radius:20px;color:#d1c4ff;font-size:10px;border-color:#7c699a;padding:5px 11px}.segments{background:#1a2233;border:1px solid #333c51}.segments button.selected{background:#bca9fa;color:#181126;box-shadow:none}.segments button{color:#b8c3d8}.scopebar{font-size:13px}.scope-audience{color:#9facbf}
main{max-width:1620px;padding-top:40px}h1{font-size:clamp(2.3rem,3.8vw,4.2rem);letter-spacing:-.055em;line-height:1.06}h2{letter-spacing:-.04em}.page-head{margin-bottom:32px}.page-head p{font-size:16px;line-height:1.7}.eyebrow{font-size:11px;letter-spacing:.16em;color:#c7b5fd}
.btn{background:#c4b1ff;color:#181127;border:1px solid transparent;border-radius:9px;min-height:43px;font-size:14px}.btn:hover{background:#ddcfff;color:#151020}.btn.secondary{background:#182131;border-color:#394259;color:#e4eafa}.btn.secondary:hover{background:#242d41}.btn.lime{background:#d7fa8a;color:#1c2810}.btn.small{font-size:13px}.text-btn{color:#c4b1ff}
.hero{background:radial-gradient(ellipse at 10% 0,#44326499,transparent 65%),#131b29;border:1px solid #4b3e63;border-radius:22px;position:relative;box-shadow:0 18px 70px #0002}.hero-main{padding:42px}.hero h2{font-size:clamp(2.6rem,4vw,4.5rem);letter-spacing:-.055em}.hero-main>p{font-size:17px}.hero .eyebrow{color:#d5c1fc}.path-panel{background:linear-gradient(150deg,#172d2a77,#18223855);border-left:1px solid #ffffff12}.path-node{border-radius:12px;font-size:13px;border-color:#536374}.path-node.selected{background:#d7fa8a;box-shadow:0 0 22px #dcff9530}.path-explain p{font-size:15px}.path-explain h3{font-size:18px}.path-foot{font-size:12px}
.stat,.card,.module-row,.step,.evolution-card,.engine-card{background:linear-gradient(135deg,#1a2231,#141c29);border-color:#30384b}.stat{border-radius:16px}.stat-number{color:#e2d5ff;font-weight:500}.stat-label{font-size:14px}.stat-label small{font-size:12px}.progress-track{background:#2a3447}.progress-fill{background:linear-gradient(90deg,#bd9bff,#d7fa8a)}.card p{font-size:15px;color:#b7c0d4}.card-num{color:#d4c5ff}.tag{background:#31294d;color:#e0d3ff;font-size:12px}.tag.green{background:#293a26;color:#d7edba}.tag.gray{background:#283347;color:#c5cde0}.tag.amber{background:#3d3120;color:#f4d9a5}.module-row:hover,.source-card:hover{border-color:#a697d8;background:#1d2538;box-shadow:0 8px 26px #0003}.module-meta span{font-size:12px}.module-row p{font-size:15px}
.callout,.funnel-detail,.check-summary{background:#26263e;border-color:#494565;color:#d9d7ed}.callout p,.step-content p{color:#c3c9dd}.callout.amber{background:#30291e;border-color:#5c4c31}.example{background:#101827;color:#cbd5e8}.step summary .step-num{background:#342c50;color:#dacaff}.tabs button{background:#1a2232;border-color:#374157;color:#c0c9dd}.tabs button.selected{background:#c4b1ff;color:#191228;border-color:#c4b1ff}
.field input,.field select,.field textarea{background:#0e1623;border-color:#3b465f;color:#edf2ff}.field small{font-size:13px}.preview-box{background:#172132;border:1px solid #3b4660}.preview-sheet{background:#111a29}.preview-sheet p{color:#c7d1e4}.preview-sheet h3{color:#f0f4ff}.lab-warning{color:#ffbcab}.engine-letter{background:#322b47;color:#d6c5ff}.mono{background:#2e304a;color:#e4def4}.phase-modules a{background:#262d42}.empty{border-color:#4e5b74}.skip{background:#191d32}.mobile-menu{color:#eaefff}footer{font-size:12px}
.source-links a{font-size:13px}pre{background:#090f1b;border:1px solid #35405a;font-size:14px;line-height:1.75;color:#d6e9dc;border-radius:12px}.source-card .small{color:#d2bffc}.small{font-size:14px}.detail-label{font-size:12px}.note-line{font-size:13px}.wire-label{font-size:13px}.phase-date{font-size:14px}
#toast{background:#d7fa8a;color:#14200c;box-shadow:0 8px 40px #0008}
.dev-intro{display:grid;grid-template-columns:1.35fr .8fr;gap:25px;align-items:center;margin-bottom:34px;min-height:285px}.dev-intro h1{font-size:clamp(3rem,5.4vw,6rem);letter-spacing:-.065em;font-weight:600;line-height:.98;margin:22px 0}.dev-intro h1 em{font-style:normal;color:#c9b2ff}.dev-intro p{color:#afbad0;max-width:535px;font-size:17px;line-height:1.65}.status-dot{width:7px;height:7px;border-radius:50%;background:#d7fa8a;display:inline-block;box-shadow:0 0 13px #bdeb75;margin-right:9px;vertical-align:middle}
.dev-orbit{position:relative;height:255px;max-width:390px;background:radial-gradient(ellipse at center,#b89dff18,transparent 64%);isolation:isolate}.orbit-line{position:absolute;inset:17px 17px;border:1px solid #a98adb44;border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 0 27px #b095ff04,0 0 0 55px #b095ff03}.orbit-line:after{content:'';position:absolute;inset:30px -8px;border:1px dashed #91eac436;border-radius:50%;transform:rotate(47deg)}.orbit-core{position:absolute;inset:72px 30%;text-align:center;background:linear-gradient(140deg,#bca1ec33,#79e2b817);border:1px solid #c1a6ff66;border-radius:22px;display:grid;align-content:center;color:#d7c6fc;font:40px/1.4 Consolas,monospace;box-shadow:0 0 50px #b197fc12;backdrop-filter:blur(8px)}.orbit-core small{font:10px "Segoe UI",sans-serif;letter-spacing:.16em;color:#a8b6d0}.orbit-node{position:absolute;padding:8px 13px;border:1px solid #4e4868;background:#161e30;border-radius:20px;font:11px/1.5 Consolas,monospace;letter-spacing:.04em;z-index:2}.o1{top:17px;left:10px}.o2{right:0;top:118px;color:#d7fa8a;border-color:#6b7d50}.o3{bottom:12px;left:28px}
.dev-config{display:flex;align-items:center;gap:25px;padding:22px 25px;background:linear-gradient(110deg,#25233a,#17212b);border:1px solid #4b405f;border-radius:16px;margin-bottom:28px}.host-picker{min-width:260px}.host-picker>span{display:block;font-size:12px;letter-spacing:.06em;color:#c9badf;margin-bottom:6px}.host-picker select{width:100%;background:#0f1727;border:1px solid #605375;border-radius:8px;padding:11px;color:#eef1ff;font-size:15px}.dev-progress{flex:1;min-width:130px}.dev-progress>div:first-child{display:flex;gap:15px;align-items:center}.dev-progress strong{font-size:20px;font-weight:500;white-space:nowrap}.dev-progress span{font-size:12px;color:#adbbcc}.dev-config>.btn{font-size:13px;white-space:nowrap}
.dev-layout{display:grid;grid-template-columns:254px minmax(0,1fr);gap:32px;align-items:start}.dev-rail{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding-right:6px;scrollbar-width:thin}.rail-title{font-size:10px;letter-spacing:.12em;color:#a7b1c8;padding:0 8px 14px;border-bottom:1px solid #30394d;display:flex;justify-content:space-between}.rail-title span{color:#d7fa8a}.dev-phase{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#929eb7;margin:23px 8px 7px}.dev-nav{display:grid;grid-template-columns:24px 1fr 24px;gap:8px;text-decoration:none;color:#afb9cf;padding:11px 9px;margin:4px 0;border:1px solid transparent;border-radius:10px;align-items:start;font-size:13px;line-height:1.5}.dev-nav:hover{background:#1a2231}.dev-nav.current{background:linear-gradient(90deg,#be9ef721,#c4a4ff08);color:#eee7ff;border-color:#8c75b66b}.dev-num{font:12px/1.6 Consolas,monospace;color:#908fae}.dev-nav.current .dev-num{color:#ddf5a5}.dev-nav small{font-size:10px;color:#8d9bb7;padding-top:2px}.rail-note{margin:25px 8px 0;padding-top:18px;border-top:1px solid #30394d;font-size:12px;color:#d5e3bf}.rail-note p{color:#909eb8;font-size:12px;margin-top:10px}
.dev-lesson{background:linear-gradient(155deg,#1b2333,#151d2b 42%);border:1px solid #394155;border-radius:22px;padding:34px;min-width:0;box-shadow:0 20px 65px #0002}.lesson-overline{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:#b8a6dd;letter-spacing:.07em;margin-bottom:20px;text-transform:uppercase}.lesson-overline span:last-child{color:#93a0b9;text-transform:none;letter-spacing:0}.dev-lesson>h2{font-size:clamp(1.8rem,2.5vw,2.65rem);line-height:1.12;max-width:650px}.lesson-subtitle{font-size:17px;color:#b9c6db;margin-bottom:26px}.learn-card{border-left:2px solid #b5a0e9;padding:3px 0 3px 20px;margin:24px 0 28px}.micro-label{font-size:10px;letter-spacing:.12em;color:#c4b3e7;display:block;margin-bottom:9px;font-weight:700}.learn-card p{font-size:15px;color:#c9d0df;margin:0;line-height:1.8}
.host-route{background:radial-gradient(ellipse at 0 0,#3a394950,transparent),#202a38;border:1px solid #526057;border-radius:14px;padding:23px;margin:25px 0}.platform-badge{display:inline-flex;align-items:center;font-weight:650;background:#d6f2ac;color:#26351d;border-radius:6px;padding:4px 9px;font-size:12px}.host-route .mini-head>a{font-size:12px;color:#d6e9b9}.host-route h3{font-size:17px;margin:17px 0 12px}.host-route p{font-size:15px;line-height:1.8;color:#c3d0cc;margin:0}.host-limits{margin-top:16px;border-top:1px solid #43514e;padding-top:13px}.host-limits summary{font-size:12px;cursor:pointer;color:#d0dfbf}.host-limits p{margin:12px 0;font-size:14px}.host-limits>a{font-size:13px}.prerequisite{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid #354055}.prerequisite>span{font-size:10px;letter-spacing:.1em;color:#93a3bd;padding-top:3px}.prerequisite p{font-size:14px;color:#b4bfd1;margin:0}.dev-lesson .section-head{margin-top:30px}.dev-lesson .section-head h3{font-size:18px;margin:0}.dev-action{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid #303b4e}.action-count{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #5b506e;color:#d3bff8;font-size:12px}.dev-action h3{font-size:17px;margin:3px 0 12px}.dev-action p{color:#b7c3d7;font-size:15px;line-height:1.8;margin-bottom:15px}.dev-action .check-label{color:#aab6cc;font-size:13px}.dev-action input{accent-color:#d4baff}
.code-drawer{background:#101826;border:1px solid #414963;border-radius:12px;margin:14px 0;overflow:hidden}.code-drawer summary{list-style:none;display:flex;align-items:center;gap:12px;padding:18px;cursor:pointer;font-size:14px;color:#ded8f1}.code-drawer summary::-webkit-details-marker{display:none}.code-glyph{font:17px Consolas,monospace;color:#d4b6ff}.drawer-hint{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#93a1b8;white-space:nowrap}.code-drawer[open] summary{border-bottom:1px solid #354057}.code-body{padding:20px}.code-body>p{font-size:14px;color:#aab9cf}.code-toolbar{display:flex;justify-content:space-between;align-items:end;gap:16px}.code-toolbar label{font-size:11px;color:#99a8bf}.code-toolbar select{display:block;background:#242c42;color:#eee8ff;border:1px solid #53607d;border-radius:6px;margin-top:6px;padding:7px 10px;font-size:13px;max-width:100%}.code-body pre{margin:16px 0;background:#090f18;border-color:#2e3b50;white-space:pre;overflow-x:auto;overflow-wrap:normal;font-size:12px;padding:18px;tab-size:2}.code-body>small{font-size:12px;color:#98a6bf}
.verification-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}.verify-card,.rollback-card{padding:21px;border:1px solid #455248;border-radius:12px;background:#202d2a}.verify-card .micro-label{color:#d3eda6}.rollback-card{background:#262433;border-color:#4c425c}.rollback-card .micro-label{color:#d3b9e6}.verification-grid p{font-size:14px;line-height:1.75;color:#bdc8d4;margin:0}.evidence-field{padding-top:7px}.evidence-field textarea{min-height:110px;font-size:14px;line-height:1.7}.dev-references{border-top:1px solid #344158;margin-top:28px;padding-top:25px}.dev-references h3{font-size:16px}.dev-references p{font-size:12px;color:#8e9bb2;margin-top:20px}.lesson-pagination{border-top:1px solid #354055;margin-top:28px;padding-top:25px;display:flex;justify-content:space-between;gap:16px}.lesson-pagination .btn{font-size:12px}
.dev-launch{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;margin:28px 0;padding:28px;border-radius:18px;background:linear-gradient(100deg,#2d2945,#1c302f);border:1px solid #6b5b7d}.dev-launch h2{margin:0 0 10px;font-size:25px}.dev-launch p{color:#b9c7d8;margin:0;font-size:15px}.dev-launch .eyebrow{color:#d5f4a3}
@media(min-width:1600px){.dev-layout{grid-template-columns:280px minmax(0,1fr)}.dev-lesson{padding:42px}.dev-intro{margin-bottom:42px}}
@media(max-width:1250px){.sidebar{width:210px;padding:25px 14px}.workspace{margin-left:210px}.dev-layout{grid-template-columns:210px minmax(0,1fr);gap:20px}.dev-lesson{padding:25px}.dev-config{gap:17px;flex-wrap:wrap}.host-picker{flex:1}.dev-progress{flex:1}.dev-config>.btn{margin-left:auto}.dev-orbit{height:235px}.dev-nav{font-size:12px;grid-template-columns:21px 1fr}.dev-nav small{display:none}.verification-grid{grid-template-columns:1fr}.dev-intro h1{font-size:4.3rem}}
@media(max-width:1000px){.dev-layout{grid-template-columns:1fr}.dev-rail{position:static;max-height:none;padding:0}.dev-rail nav{display:flex;gap:8px;overflow:auto;padding:12px 2px;scrollbar-width:thin}.dev-phase,.rail-note{display:none}.dev-nav{flex:0 0 188px;border-color:#344058;font-size:12px;margin:0}.dev-intro{grid-template-columns:1fr .65fr}.dev-intro h1{font-size:3.5rem}.dev-orbit{height:210px}.orbit-core{inset:65px 22%}.o2{top:95px;right:-5px}.dev-lesson{padding:28px}.verification-grid{grid-template-columns:1fr 1fr}.dev-config>.btn{margin-left:0}.dev-progress>div:first-child{display:block}.dev-progress span{display:block}}
@media(max-width:720px){.sidebar{width:238px}.workspace{margin-left:0}.topbar{height:65px}.scopebar{gap:10px}.top-actions{min-width:0}.search{min-width:0}.search input{width:160px}.prototype{font-size:9px}.dev-intro{display:block;min-height:0;margin-bottom:25px}.dev-intro h1{font-size:clamp(3rem,11vw,4.4rem)}.dev-intro p{font-size:16px}.dev-orbit{display:none}.dev-config{padding:19px;gap:18px}.host-picker{min-width:0;flex-basis:100%}.dev-progress{flex-basis:100%}.dev-progress>div:first-child{display:flex}.dev-progress span{display:inline}.dev-config>.btn{width:100%}.dev-lesson{padding:22px 18px;border-radius:15px}.lesson-overline{display:block;font-size:10px}.lesson-overline span{display:block;margin-bottom:5px}.dev-lesson>h2{font-size:2rem}.learn-card{padding-left:14px}.host-route{padding:18px}.host-route .mini-head{align-items:start;flex-wrap:wrap}.prerequisite{grid-template-columns:1fr;gap:8px}.dev-action{gap:11px;grid-template-columns:27px 1fr}.action-count{width:26px;height:26px}.dev-action h3{font-size:16px}.dev-action p{font-size:15px}.dev-lesson .section-head{display:block}.dev-lesson .section-head .small{display:block;margin-top:6px;font-size:12px}.verification-grid{grid-template-columns:1fr}.code-drawer summary{padding:15px;font-size:13px}.drawer-hint{display:none}.code-body{padding:14px}.code-toolbar{align-items:end;gap:10px}.code-toolbar label{min-width:0}.code-toolbar button{flex-shrink:0;font-size:11px;padding:7px}.code-body pre{font-size:12px}.lesson-pagination{flex-direction:column}.dev-launch{grid-template-columns:1fr;padding:24px}.hero-main{padding:29px}.hero h2{font-size:2.9rem}.page-head h1{font-size:2.5rem}.hero-main>p{font-size:16px}.path-panel{border-left:0;border-top:1px solid #ffffff12}.nav-item{font-size:14px}.rail-title{font-size:10px}main{padding-top:30px}}
@media print{body{background:white;color:black}.dev-rail,.dev-config,.dev-orbit,.code-toolbar,.lesson-pagination{display:none}.dev-layout,.verification-grid{display:block}.dev-lesson,.host-route,.learn-card,.verify-card,.rollback-card{background:white;color:black;border-color:#aaa}.dev-lesson p,.dev-action p{color:black}.code-drawer{break-inside:avoid}}

.dev-layout>*{min-width:0}.dev-intro>*{min-width:0}.dev-orbit{overflow:hidden}
@media(max-width:1000px) and (min-width:721px){.dev-intro{grid-template-columns:1fr}.dev-orbit{display:none}.dev-intro h1{font-size:3.8rem}.dev-config{align-items:stretch}.verification-grid{grid-template-columns:1fr}}

@media(max-width:720px){.sidebar{transition:none}}