@import "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap";.app-shell{width:min(1180px,100% - 40px);margin:0 auto}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:64px;display:flex}.brand{color:var(--ink);align-items:center;gap:10px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.brand-mark{color:#fff;background:var(--ink);border-radius:6px;place-items:center;width:30px;height:30px;display:grid}.icon-link,.icon-button{width:36px;height:36px;color:var(--ink);background:var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;border:0;border-radius:6px;place-items:center;display:grid}.icon-link:hover,.icon-button:hover{background:#f0f0ee}.header-status{color:var(--muted);font-family:Geist Mono,monospace;font-size:11px}.intro{justify-content:space-between;align-items:flex-end;gap:32px;min-height:232px;padding:56px 0 44px;display:flex}.eyebrow,.step-label{color:var(--accent);margin:0 0 12px;font-family:Geist Mono,monospace;font-size:12px;font-weight:500}.intro h1{letter-spacing:0;margin:0;font-size:44px;font-weight:600;line-height:1.08}.intro-copy{color:#555;max-width:630px;margin:16px 0 0;font-size:18px;line-height:1.6}.intro-copy code{color:var(--ink);background:#ededeb;border-radius:4px;padding:2px 5px;font-size:.88em}.docs-link{color:#444;border-bottom:1px solid #aaa;flex:none;align-items:center;gap:6px;padding-bottom:3px;font-size:14px;font-weight:500;text-decoration:none;display:inline-flex}.workspace{grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr);align-items:start;gap:16px;display:grid}.capability-panel,.output-panel,.guidance-panel{background:var(--surface);box-shadow:0 0 0 1px var(--line), 0 2px 2px #00000008;border-radius:8px}.capability-panel,.output-panel{overflow:hidden}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;min-height:92px;padding:20px 22px;display:flex}.panel-heading .step-label{margin-bottom:7px}.panel-heading h2,.guidance-title h2{letter-spacing:0;margin:0;font-size:17px;font-weight:600;line-height:1.3}.preset-list{display:grid}.preset-row{border-bottom:1px solid var(--line);cursor:pointer;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:14px;min-height:74px;padding:13px 22px;transition:background .12s;display:grid}.preset-row:last-child{border-bottom:0}.preset-row:hover{background:#fafaf8}.preset-row.is-active{background:var(--accent-soft)}.preset-row input{opacity:0;pointer-events:none;position:absolute}.check-box{pointer-events:none;color:#fff;background:#fff;border:1px solid #aaa;border-radius:4px;place-items:center;width:19px;height:19px;display:grid}.is-active .check-box{background:var(--accent);border-color:var(--accent)}.preset-copy{gap:4px;min-width:0;display:grid}.preset-copy strong{font-size:14px;font-weight:600}.preset-copy>span{color:var(--muted);font-size:13px;line-height:1.45}.output-column{gap:16px;display:grid;position:sticky;top:16px}.output-heading{border-bottom:0}.permission-count{color:#17634f;background:var(--accent-soft);white-space:nowrap;border-radius:999px;padding:5px 8px;font-family:Geist Mono,monospace;font-size:11px}.code-shell{color:#e8e8e8;background:#191919;border-radius:6px;margin:0 14px 14px;overflow:hidden}.code-toolbar{color:#aaa;background:#232323;border-bottom:1px solid #343434;justify-content:space-between;align-items:center;gap:12px;min-height:45px;padding:0 10px 0 14px;font-family:Geist Mono,monospace;font-size:11px;display:flex}.code-toolbar>div{gap:4px;display:flex}.code-toolbar button{color:#ddd;cursor:pointer;background:0 0;border:0;border-radius:4px;justify-content:center;align-items:center;gap:7px;min-width:32px;height:30px;padding:0 8px;font-size:12px;display:inline-flex}.code-toolbar button:hover{background:#383838}.code-shell pre{color:#d7f9ed;min-height:210px;margin:0;padding:20px;font-size:13px;line-height:1.75;overflow-x:auto}.guidance-panel{padding:20px 22px}.guidance-title{color:#805200;align-items:center;gap:10px;display:flex}.guidance-panel ul{color:#5e5e5e;margin:16px 0 0;padding-left:19px;font-size:13px;line-height:1.7}.guidance-panel code{color:var(--ink);font-size:12px}.explanation{border-top:1px solid var(--line);margin-top:76px;padding:48px 0 64px}.explanation>h2{letter-spacing:0;max-width:720px;margin:0;font-size:30px;font-weight:600;line-height:1.25}.explanation-grid{grid-template-columns:1fr 1fr;gap:40px;max-width:920px;margin-top:28px;display:grid}.explanation-grid p{color:#5b5b5b;margin:0;font-size:15px;line-height:1.7}footer{min-height:76px;color:var(--muted);border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:24px;font-size:13px;display:flex}footer a{color:var(--ink);align-items:center;gap:5px;font-weight:500;text-decoration:none;display:inline-flex}@media (width<=820px){.app-shell{width:min(100% - 28px,680px)}.intro{flex-direction:column;align-items:flex-start;min-height:0;padding:42px 0 34px}.intro h1{font-size:36px}.workspace{grid-template-columns:1fr}.output-column{position:static}.explanation{margin-top:52px}}@media (width<=520px){.app-shell{width:min(100% - 20px,480px)}.site-header{height:58px}.intro h1{font-size:31px}.intro-copy{font-size:16px}.panel-heading{min-height:84px;padding:17px}.preset-row{padding:13px 17px}.output-heading{flex-direction:column;align-items:flex-start}.code-toolbar>span{text-overflow:ellipsis;white-space:nowrap;max-width:130px;overflow:hidden}.code-toolbar button span{display:none}.explanation>h2{font-size:25px}.explanation-grid{grid-template-columns:1fr;gap:18px}footer{flex-direction:column;justify-content:center;align-items:flex-start;padding:20px 0}}:root{color:#171717;font-synthesis:none;text-rendering:optimizelegibility;--ink:#171717;--muted:#666;--line:#0000001a;--surface:#fff;--surface-subtle:#fafafa;--focus:#0866d9;--accent:#0b6b53;--accent-soft:#e9f6f1;background:#f7f7f5;font-family:Geist,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#f7f7f5}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible+.check-box{outline:2px solid var(--focus);outline-offset:2px}code,pre{font-family:Geist Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
