@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap";:root{color:#171820;--pink:#f10c72;--ink:#171820;--paper:#f4f1ec;--line:#ccc7bf;--muted:#666873;background:#f4f1ec;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--paper);margin:0}button{font:inherit}.app{min-height:100vh}.topbar{border-bottom:1px solid var(--line);z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f4f1ecf0;justify-content:space-between;align-items:center;height:54px;padding:0 max(24px,50vw - 740px);display:flex;position:sticky;top:0}.brand{color:var(--ink);align-items:center;gap:10px;font-weight:800;text-decoration:none;display:flex}.brand span{background:var(--pink);color:#fff;border-radius:9px 9px 9px 2px;place-items:center;width:30px;height:30px;display:grid}.topbar nav{gap:28px;display:flex}.topbar nav a{color:var(--muted);font-size:14px;text-decoration:none}.topbar nav a.active{color:var(--ink);font-weight:700}main{width:min(1480px,100% - 48px);margin:auto}.officeSdkMain{width:100%;height:calc(100vh - 98px)}.officeSdkFrame{background:#1e1e1e;border:0;width:100%;height:100%;display:block}.productSwitch{border-bottom:1px solid var(--line);background:#ebe7e0;align-items:center;gap:8px;padding:7px max(24px,50vw - 740px);display:flex}.productSwitch a{border:1px solid var(--line);color:var(--ink);background:#f8f6f2;padding:6px 11px;font-size:12px;font-weight:700;text-decoration:none}.productSwitch a.active{background:var(--ink);color:#fff;border-color:var(--ink)}.productSwitch span{color:var(--muted);margin-left:auto;font-size:11px}.eyebrow{letter-spacing:.16em;color:var(--pink);margin:0 0 18px;font:500 11px DM Mono,monospace}.hero{border-bottom:1px solid var(--line);grid-template-columns:minmax(420px,1.15fr) minmax(380px,.85fr);grid-template-areas:"eyebrow facts""title lede";align-items:end;column-gap:52px;padding:15px 0 14px;display:grid}.hero .eyebrow{grid-area:eyebrow;margin-bottom:10px}.hero h1{grid-area:title}.hero .lede{grid-area:lede}.hero .facts{grid-area:facts;justify-content:flex-end;align-self:start}.hero h1,.agentHero h1{letter-spacing:-.075em;margin:0;font-size:clamp(34px,3.2vw,48px);line-height:.92}.hero h1 em,.agentHero h1 em{color:var(--pink);font-style:normal}.lede{color:var(--muted);max-width:700px;margin:0;font-size:13px;line-height:1.55}.facts{flex-wrap:wrap;gap:10px;display:flex}.facts span{border:1px solid var(--line);padding:6px 9px;font:500 11px DM Mono}.catalog{padding:7px 0}.sectionTitle{justify-content:space-between;align-items:end;margin-bottom:6px;display:flex}.sectionTitle p{color:var(--pink);margin:0 0 8px;font:500 11px DM Mono}.sectionTitle h2{margin:0;font-size:18px}.sectionTitle small{color:var(--muted)}.cards{border-block:1px solid var(--ink);grid-template-columns:repeat(4,1fr);display:grid}.card{text-align:left;border:0;border-right:1px solid var(--line);cursor:pointer;background:0 0;flex-direction:column;height:132px;min-height:132px;padding:13px 15px;display:flex}.card:last-child{border:0}.card:hover,.card.selected{background:#fff}.number,.tag,.meta{color:var(--muted);font:500 10px DM Mono}.tag{color:var(--pink);align-self:end}.card strong{margin:14px 0 5px;font-size:15px}.card p{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;line-height:1.4;display:-webkit-box;overflow:hidden}.meta{white-space:nowrap;text-overflow:ellipsis;margin-top:auto;overflow:hidden}.card i{color:var(--pink);margin-top:6px;font-size:10px;font-style:normal;font-weight:700}.lab{color:#fff;background:#15171d;margin-bottom:72px}.labHeader{align-items:center;gap:20px;height:52px;padding:0 20px;display:flex}.traffic{gap:7px;display:flex}.traffic i{background:#555;border-radius:50%;width:9px;height:9px}.traffic i:first-child{background:var(--pink)}.labIdentity{align-items:center;gap:12px;display:flex}.labIdentity>span{color:#61dda3;font:500 9px DM Mono}.labIdentity small{color:#888}.labActions{gap:8px;margin-left:auto;display:flex}.labActions button,.labActions a{color:#ddd;cursor:pointer;background:#222;border:1px solid #444;padding:9px 12px;text-decoration:none}.frameWrap{height:min(760px,75vh);min-height:580px}.frameWrap iframe{border:0;width:100%;height:100%}.agentMain{padding-bottom:40px}.agentHero{border-bottom:1px solid var(--line);grid-template-columns:1.3fr .7fr;align-items:end;gap:40px;padding:16px 0 14px;display:grid}.agentHero h1{font-size:clamp(34px,3.4vw,48px)}.agentHero>div:last-child{padding-bottom:6px}.agentHero>div:last-child p{color:var(--muted);margin:0 0 7px;font-size:12px;line-height:1.5}.agentHero a{color:var(--pink);font-weight:700;text-decoration:none}.learningPath{border:1px solid var(--line);grid-template-columns:repeat(4,1fr);margin:9px 0 10px;display:grid}.learningPath button{text-align:left;border:0;border-right:1px solid var(--line);cursor:pointer;background:#faf8f4;gap:14px;padding:10px 13px;display:flex}.learningPath button:last-child{border:0}.learningPath button.active{background:var(--ink);color:#fff}.learningPath button.needsConfig small{color:#d97706;font-weight:700}.learningPath button.needsConfig:not(.active){box-shadow:inset 0 0 0 1px #e6a23c}.learningPath b{color:var(--pink);font:500 11px DM Mono}.learningPath span{flex-direction:column;gap:2px;display:flex}.learningPath small{color:#888;font:500 9px DM Mono}.codeLab{color:#eef0f4;background:#14161c;grid-template-columns:260px minmax(420px,1.25fr) minmax(320px,.75fr);min-height:650px;display:grid;box-shadow:0 28px 70px #17182022}.lesson{border-right:1px solid #343741;padding:28px 24px}.lessonBadge{color:#63dda6;border:1px solid #286347;padding:5px 7px;font:500 9px DM Mono}.lessonStep{color:var(--pink);margin-top:50px;font:500 10px DM Mono}.lesson h2{margin:8px 0 14px;font-size:28px}.lesson>p{color:#a6aab4;font-size:13px;line-height:1.65}.lesson dl{margin-top:42px}.lesson dt{color:#6f7480;margin-top:18px;font:500 9px DM Mono}.lesson dd{color:#d5d7dd;margin:7px 0;font-size:12px}.keyWarning{color:#d8b879;background:#322717;margin-top:28px;padding:13px;font-size:11px;line-height:1.5}.keyWarning strong{color:#ffd27a;display:block}.keyWarning.blocking{color:#ffb4a8;background:#3a201d;border:1px solid #7c3028}.keyWarning.blocking strong{color:#ff8e7e}.codeEditor{border-right:1px solid #343741;flex-direction:column;display:flex}.editorBar,.consoleBar{background:#1c1f27;border-bottom:1px solid #343741;justify-content:space-between;align-items:center;height:48px;padding:0 14px;font:500 10px DM Mono;display:flex}.editorBar button,.consoleBar button{color:#c7cad2;cursor:pointer;background:#262a34;border:1px solid #454955;margin-left:5px;padding:7px 10px}.editorBar button.execute{background:var(--pink);border-color:var(--pink);color:#fff}.editorBar button:disabled{opacity:.6}.highlightEditor{background:#14161c;flex:1;min-height:0;position:relative}.highlightEditor textarea,.highlightEditor pre{white-space:pre;word-wrap:normal;tab-size:2;width:100%;height:100%;margin:0;padding:22px;font:13px/1.65 DM Mono,monospace;position:absolute;inset:0;overflow:auto}.highlightEditor pre{pointer-events:none;color:#d8dee9;background:#14161c}.highlightEditor textarea{resize:none;color:#0000;-webkit-text-fill-color:transparent;caret-color:#fff;background:0 0;border:0;outline:0}.highlightEditor textarea::selection{background:#5b89ff57}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6f7888;font-style:italic}.token.punctuation{color:#aeb6c4}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ff7f9f}.token.boolean,.token.number{color:#c59cff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a8db8f}.token.operator,.token.entity,.token.url,.language-css .token.string{color:#78c7e8}.token.atrule,.token.attr-value,.token.keyword{color:#f28bc2}.token.function,.token.class-name{color:#ffd479}.token.regex,.token.important,.token.variable{color:#e8a66b}.consolePane{flex-direction:column;min-width:0;display:flex}.consoleOutput{background:#101218;flex:1;padding:16px;overflow:auto}.consoleEmpty{text-align:center;color:#656a75;place-items:center;height:100%;display:grid}.consoleEmpty b{font:38px DM Mono}.consoleEmpty p{max-width:220px;font-size:12px;line-height:1.6}.consoleLine{border-bottom:1px solid #262933;padding:12px 0}.consoleLine>span{color:#61dda3;text-transform:uppercase;font:500 9px DM Mono}.consoleLine.warn>span{color:#ffd27a}.consoleLine.error>span{color:#ff6b87}.consoleLine.result>span{color:#6ea8ff}.consoleLine pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#d7d9df;margin:6px 0 0;font:11px/1.6 DM Mono}.runnerNote{border:1px solid var(--line);gap:16px;margin-top:18px;padding:16px;font-size:12px;display:flex}.runnerNote p{color:var(--muted);margin:0}.hiddenRunner{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.llmSettings{border:1px solid var(--ink);background:#fff;margin:9px 0 0}.llmSettings.unconfigured{border-color:#c24136;box-shadow:inset 4px 0 #c24136}.llmSettings.unconfigured .settingsTitle strong{color:#b42318}.llmSettings.configured{border-color:#568b6c;box-shadow:inset 4px 0 #568b6c}.settingsTitle{cursor:pointer;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;padding:10px 14px;display:flex}.settingsTitle span{align-items:center;gap:18px;display:flex}.settingsTitle b{color:var(--pink);letter-spacing:.1em;font:500 10px DM Mono,monospace}.settingsTitle strong{font-size:13px}.settingsTitle i{color:var(--muted);font-size:11px;font-style:normal}.settingsBody{border-top:1px solid var(--line);background:#faf8f4;grid-template-columns:1fr 1fr 1fr;gap:18px;padding:13px 15px;display:grid}.modeTabs{grid-column:1/-1;display:flex}.modeTabs button{border:1px solid var(--line);cursor:pointer;background:#fff;flex:1;max-width:180px;padding:9px;font-size:11px}.modeTabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.settingsBody label{color:#686a73;flex-direction:column;gap:7px;font:500 10px DM Mono,monospace;display:flex}.settingsBody input,.settingsBody select{border:1px solid var(--line);min-height:42px;color:var(--ink);background:#fff;padding:0 11px;font:13px Inter,sans-serif}.settingsBody .wide{grid-column:span 2}.settingsBody small{color:var(--muted);font:11px/1.5 Inter,sans-serif}.settingsBody small a{color:var(--pink);font-weight:700}.settingsActions{justify-content:end;align-items:end;gap:7px;display:flex}.settingsError{color:#b42318;align-self:center;margin:0 auto 0 0;font:600 11px/1.4 Inter,sans-serif}.settingsActions button{border:1px solid var(--line);cursor:pointer;background:#fff;padding:11px 13px;font-size:11px}.settingsActions .saveSettings{color:#fff;background:var(--pink);border-color:var(--pink);font-weight:700}@media (width<=1100px){.cards,.learningPath{grid-template-columns:1fr 1fr}.codeLab{grid-template-columns:230px 1fr}.consolePane{grid-column:1/-1;min-height:300px}.agentHero{grid-template-columns:1fr;gap:12px}.agentHero>div:last-child{max-width:700px}.settingsBody{grid-template-columns:1fr 1fr}.settingsActions{grid-column:1/-1}}@media (width<=700px){main{width:calc(100% - 24px)}.topbar{padding:0 14px}.topbar nav a:not(.active){display:none}.productSwitch{padding:10px 12px;overflow:auto}.productSwitch span{display:none}.cards,.learningPath{grid-template-columns:1fr}.hero{grid-template-columns:1fr;grid-template-areas:"eyebrow""title""lede""facts";gap:10px}.hero .facts{justify-content:flex-start}.card{border-right:0;border-bottom:1px solid var(--line)}.codeLab{grid-template-columns:1fr}.lesson,.codeEditor{border-bottom:1px solid #343741;border-right:0}.codeEditor{min-height:600px}.agentHero{padding-top:48px}.agentHero h1,.hero h1{font-size:40px}.frameWrap{height:740px}.runnerNote{flex-direction:column}.settingsBody{grid-template-columns:1fr}.settingsBody .wide,.settingsActions{grid-column:auto}.settingsActions{justify-content:stretch}.settingsActions button{flex:1}}