:root{color-scheme:light;--bg: #fdfbf7;--fg: #2d2d2d;--muted-surface: #e5e0d8;--muted-text: #5c5c5c;--accent: #ff4d4d;--pen: #2d5da1;--paper: #ffffff;--postit: #fff9c4;--success: #2d7a4f;--danger: #ff4d4d;--wobbly: 255px 15px 225px 15px / 15px 225px 15px 255px;--wobbly-md: 25px 255px 15px 225px / 225px 15px 255px 15px;--wobbly-sm: 12px 28px 18px 24px / 24px 14px 28px 16px;--shadow: 4px 4px 0 0 #2d2d2d;--shadow-lg: 8px 8px 0 0 #2d2d2d;--shadow-sm: 3px 3px 0 0 rgba(45, 45, 45, .12);--font-heading: "Kalam", "Segoe Print", cursive;--font-body: "Patrick Hand", "Comic Sans MS", cursive;--font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-family:var(--font-body);line-height:1.5;font-weight:400;font-size:18px;color:var(--fg);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;color:var(--fg);background-color:var(--bg);background-image:radial-gradient(var(--muted-surface) 1px,transparent 1px);background-size:24px 24px}h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.15;color:var(--fg)}a{color:var(--pen);text-decoration:none}a:hover{text-decoration:underline;text-decoration-style:wavy;text-underline-offset:3px}button,input,select,textarea{font:inherit;color:inherit}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:48px;padding:.5rem 1.15rem;cursor:pointer;background:var(--paper);color:var(--fg);border:3px solid var(--fg);border-radius:var(--wobbly);box-shadow:var(--shadow);font-family:var(--font-body);font-size:1.05rem;line-height:1.2;text-decoration:none;transition:transform .1s ease,box-shadow .1s ease,background .1s ease,color .1s ease}.btn:hover{background:var(--accent);color:#fff;border-color:var(--fg);box-shadow:2px 2px #2d2d2d;transform:translate(2px,2px);text-decoration:none}.btn:active{box-shadow:none;transform:translate(4px,4px)}.btn-primary{background:var(--paper);color:var(--fg);font-weight:700}.btn-primary:hover{background:var(--accent);color:#fff}.btn-secondary{background:var(--muted-surface)}.btn-secondary:hover{background:var(--pen);color:#fff}.btn-danger{color:var(--accent);border-color:var(--fg)}.btn-danger:hover{background:var(--accent);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:2px 2px #2d2d2d}.btn:disabled:hover{background:var(--paper);color:var(--fg);transform:none}.shell{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.25rem;border-bottom:3px solid var(--fg);background:var(--paper);box-shadow:0 4px #2d2d2d0f;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-heading);font-size:1.55rem;font-weight:700;color:var(--fg);text-decoration:none;transform:rotate(-1deg)}.brand:hover{text-decoration:none;color:var(--accent)}.brand span{border-bottom:3px solid var(--accent);padding-bottom:1px}.brand-logo{width:34px;height:34px;object-fit:contain;filter:drop-shadow(2px 2px 0px rgba(45,45,45,.15));transition:transform .2s ease}.brand:hover .brand-logo{transform:rotate(-5deg) scale(1.1)}.topbar-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.lang-select{display:inline-flex;align-items:center;gap:.35rem;font-size:1rem;color:var(--muted-text)}.lang-select select{min-height:40px;padding:.25rem .5rem;border:2px solid var(--fg);border-radius:var(--wobbly-sm);background:var(--paper);box-shadow:2px 2px #2d2d2d;cursor:pointer}.container{width:min(64rem,calc(100% - 2rem));margin:0 auto;padding:2rem 0 3.5rem}.page-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}.page-header h1{margin:0;font-size:clamp(2rem,4vw,2.75rem);transform:rotate(-.5deg)}.hero{display:grid;gap:1.25rem;padding:2rem 0 1.5rem;max-width:42rem}.hero h1{margin:0;font-size:clamp(2.4rem,6vw,3.75rem);line-height:1.05;transform:rotate(-1deg)}.hero-bang{display:inline-block;color:var(--accent);transform:rotate(12deg);margin-left:.1em}.hero p{margin:0;color:var(--muted-text);font-size:1.2rem;max-width:36rem}.hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:.35rem}.hero-deco{display:none}@media(min-width:768px){.hero-deco{display:block;margin-top:.5rem;color:var(--fg);opacity:.85}}.sketch-label{display:inline-block;font-family:var(--font-heading);font-size:.95rem;padding:.2rem .65rem;background:var(--postit);border:2px dashed var(--fg);border-radius:var(--wobbly-sm);transform:rotate(-2deg);margin-bottom:.75rem;box-shadow:2px 2px #2d2d2d26}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.75rem;margin-top:1.75rem}.card{position:relative;background:var(--paper);border:2px solid var(--fg);border-radius:var(--wobbly-md);padding:1.15rem 1.2rem 1.25rem;box-shadow:var(--shadow-sm);transition:transform .1s ease,box-shadow .1s ease}.card:hover{transform:rotate(1deg);box-shadow:var(--shadow)}.card h3{margin:0 0 .4rem;font-size:1.35rem}.card p{margin:0;color:var(--muted-text);font-size:1.05rem}.card-actions{display:flex;gap:.55rem;margin-top:1rem;flex-wrap:wrap}.card--postit{background:var(--postit)}.card--tape:before{content:"";position:absolute;top:-10px;left:50%;width:72px;height:18px;margin-left:-36px;background:#78787847;transform:rotate(-2deg);border-radius:2px;pointer-events:none}.card--tack:before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;background:var(--accent);border:2px solid var(--fg);border-radius:50%;box-shadow:1px 1px #2d2d2d;pointer-events:none;z-index:1}.rotate-1{transform:rotate(1deg)}.rotate-neg-1{transform:rotate(-1deg)}.rotate-2{transform:rotate(2deg)}.rotate-neg-2{transform:rotate(-2deg)}.card.rotate-1:hover{transform:rotate(2deg)}.card.rotate-neg-1:hover{transform:rotate(-2deg)}.card.rotate-2:hover{transform:rotate(1deg)}.card.rotate-neg-2:hover{transform:rotate(-1deg)}.muted{color:var(--muted-text)}.empty-note{margin-top:1.75rem;max-width:22rem;padding:1rem 1.15rem;background:var(--postit);border:2px solid var(--fg);border-radius:var(--wobbly-md);box-shadow:var(--shadow);transform:rotate(-1.5deg);font-size:1.1rem}.html-import-dropzone{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.25rem 0 0;padding:1rem 1.15rem;background:var(--postit);border:3px dashed var(--fg);border-radius:var(--wobbly-md);box-shadow:var(--shadow-sm);transition:background .15s ease,border-color .15s ease,transform .15s ease}.html-import-dropzone h2{margin:0 0 .2rem;font-size:1.3rem}.html-import-dropzone p{margin:0;color:var(--muted-text)}.html-import-dropzone--active{background:#fff0ed;border-color:var(--accent);transform:rotate(-.5deg) scale(1.01)}.html-import-dropzone--busy{opacity:.7}.html-import-overlay{position:fixed;z-index:30;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1rem;background:#fdfbf7e6;pointer-events:none}.html-import-overlay>div{display:grid;gap:.35rem;width:min(34rem,100%);padding:2rem;text-align:center;background:var(--postit);border:4px dashed var(--accent);border-radius:var(--wobbly-md);box-shadow:var(--shadow-lg);transform:rotate(-1deg)}.html-import-overlay strong{font-family:var(--font-heading);font-size:clamp(1.5rem,5vw,2.25rem)}.html-import-overlay span{color:var(--muted-text)}.editor-layout{display:grid;grid-template-columns:220px minmax(280px,var(--editor-ratio, 1fr)) 8px minmax(280px,var(--preview-ratio, 1fr));grid-template-rows:auto 1fr;height:calc(100vh - 64px);gap:0;border-top:0;background:var(--muted-surface)}.editor-layout--preview-hidden{grid-template-columns:220px minmax(280px,1fr)}.editor-toolbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .85rem;border-bottom:3px solid var(--fg);background:var(--paper);flex-wrap:wrap}.editor-toolbar .left,.editor-toolbar .right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.editor-toolbar strong{font-family:var(--font-heading);font-size:1.2rem}.editor-toolbar .btn{min-height:40px;padding:.35rem .9rem;font-size:1rem;border-width:2px;box-shadow:3px 3px #2d2d2d}.file-tree{border-right:3px solid var(--fg);background:var(--paper);overflow:auto;padding:.85rem .75rem}.file-tree h4{margin:0 0 .55rem;font-family:var(--font-heading);font-size:.95rem;letter-spacing:.02em;color:var(--fg);border-bottom:2px dashed var(--muted-surface);padding-bottom:.25rem}.file-tree-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem;padding-bottom:.25rem;border-bottom:2px dashed var(--muted-surface)}.file-tree-heading h4{margin:0;padding:0;border:0}.file-add-button{display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 30px;padding:0;border:2px solid var(--fg);border-radius:var(--wobbly-sm);background:var(--paper);color:var(--fg);box-shadow:2px 2px 0 0 var(--fg);cursor:pointer;font:700 1.25rem/1 var(--font-heading)}.file-add-button:hover{color:var(--pen);border-color:var(--pen);transform:translateY(-1px)}.file-row{display:flex;align-items:center;gap:.2rem;margin-bottom:.25rem;border:2px solid transparent;border-radius:var(--wobbly-sm)}.file-item{display:block;min-width:0;flex:1;text-align:left;border:0;background:transparent;color:var(--fg);padding:.4rem .55rem;border-radius:var(--wobbly-sm);cursor:pointer;transition:transform .1s ease,background .1s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-row:hover,.file-row:focus-within{background:var(--muted-surface);border-style:dashed;border-color:var(--fg)}.file-row.active{background:#2d5da11f;border:2px solid var(--pen)}.file-row.active .file-item{color:var(--pen);font-weight:700}.file-row-actions{display:flex;gap:.15rem;padding-right:.2rem;opacity:0;transition:opacity .1s ease}.file-row:hover .file-row-actions,.file-row:focus-within .file-row-actions,.file-row.active .file-row-actions{opacity:1}.file-action-button{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid var(--fg);border-radius:var(--wobbly-sm);background:var(--paper);color:var(--fg);cursor:pointer;font:700 .95rem/1 var(--font-heading)}.file-action-button:hover,.file-action-button:focus-visible{color:var(--pen);border-color:var(--pen)}.file-action-button--danger:hover,.file-action-button--danger:focus-visible{color:var(--accent);border-color:var(--accent)}.editor-pane{min-width:0;min-height:0;border-right:3px solid var(--fg);display:flex;flex-direction:column;background:#fffef9}.editor-pane .cm-editor{height:100%;font-size:13.5px;font-family:var(--font-code)}.editor-pane .cm-scroller{overflow:auto;font-family:var(--font-code)!important}.editor-splitter{position:relative;z-index:1;cursor:col-resize;touch-action:none;background:var(--muted-surface);border-right:2px solid var(--fg);border-left:2px solid var(--fg)}.editor-splitter:after{content:"";position:absolute;top:50%;left:50%;width:3px;height:46px;border-top:8px dotted var(--fg);border-bottom:8px dotted var(--fg);transform:translate(-50%,-50%)}.editor-splitter:hover,.editor-splitter:focus-visible{background:#2d5da12e;outline:none}.is-resizing-editor,.is-resizing-editor *{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.preview-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff}.preview-pane iframe{flex:1;width:100%;border:0;background:#fff}.preview-warning{padding:.4rem .7rem;border-bottom:2px dashed var(--accent);background:#ffd66647;color:#745700;font-size:.78rem}.pane-label{font-family:var(--font-heading);font-size:.9rem;color:var(--fg);padding:.4rem .7rem;border-bottom:2px dashed var(--muted-surface);background:var(--muted-surface)}.pane-label--editor{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.editor-search-button{min-height:28px;padding:.2rem .55rem;border:1px solid var(--fg);border-radius:var(--wobbly-sm);background:var(--paper);color:var(--pen);cursor:pointer;font:inherit;font-size:.75rem;font-weight:700}.editor-searchbar{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;padding:.35rem .5rem;border-bottom:2px dashed var(--muted-surface);background:#fffef9;font-family:var(--font-code);font-size:.75rem}.editor-searchbar input,.editor-searchbar button{min-height:28px;border:1px solid var(--fg);border-radius:5px;background:var(--paper);color:var(--fg);font:inherit;padding:.2rem .4rem}.editor-searchbar button{cursor:pointer}.editor-searchbar button:disabled{cursor:not-allowed;opacity:.5}.folder-list{margin:1rem 0 2.5rem}.folder-list h2{margin-bottom:.6rem}.folder-grid{margin-top:.75rem}.image-link-toast{position:fixed;right:1rem;bottom:1rem;z-index:50;display:flex;align-items:center;gap:.45rem;max-width:min(680px,calc(100vw - 2rem));padding:.6rem;border:2px solid var(--fg);background:var(--paper);box-shadow:var(--shadow);font-family:var(--font-code);font-size:.75rem}.image-link-toast input{min-width:260px;max-width:420px;border:1px solid var(--fg);padding:.3rem}.image-link-toast button{border:1px solid var(--fg);background:var(--paper);cursor:pointer;padding:.3rem .45rem}.editor-search-button:hover{background:#2d5da11f}.editor-pane .cm-panels{border-bottom:2px dashed var(--muted-surface);background:#fffef9;color:var(--fg);font-family:var(--font-code)}.editor-pane .cm-search{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;padding:.45rem}.editor-pane .cm-search input,.editor-pane .cm-search button{min-height:30px;border:1px solid var(--fg);border-radius:5px;background:var(--paper);color:var(--fg);font:inherit;font-size:.78rem;padding:.2rem .4rem}.editor-pane .cm-search button{cursor:pointer}.field{display:grid;gap:.35rem;margin-bottom:.9rem}.field label{font-size:1rem;color:var(--muted-text)}.field input,.field select,.field textarea{border-radius:var(--wobbly-sm);border:2px solid var(--fg);background:var(--paper);color:var(--fg);padding:.6rem .8rem;min-height:48px;box-shadow:var(--shadow-sm);outline:none;transition:border-color .1s ease,box-shadow .1s ease}.field input::placeholder{color:#2d2d2d66}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pen);box-shadow:0 0 0 3px #2d5da133}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#2d2d2d59;display:grid;place-items:center;z-index:40;padding:1rem;overflow-y:auto;overscroll-behavior:contain}.modal{width:min(480px,100%);max-height:calc(100dvh - 2rem);background:var(--paper);border:3px solid var(--fg);border-radius:var(--wobbly-md);padding:0;box-shadow:var(--shadow-lg);transform:rotate(-.5deg);display:flex;flex-direction:column;overflow:hidden}.modal-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1.35rem 1.35rem 0}.modal h2{margin:0 0 .85rem;font-size:1.75rem}.modal-actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:.55rem;margin-top:1rem;padding:.85rem 1.35rem 1.35rem;border-top:2px solid rgba(45,45,45,.2);background:var(--paper);flex-wrap:wrap}.agent-modal{width:min(820px,100%);max-height:90dvh}.agent-diff-modal{width:min(1100px,100%);max-height:92dvh;transform:none}.agent-endpoints{display:grid;gap:.35rem;padding:.7rem;background:var(--muted-surface);border:2px dashed var(--fg);margin-bottom:1rem;overflow-wrap:anywhere}.agent-token-create>div{display:flex;gap:.5rem}.agent-token-create input{flex:1}.agent-token-secret{display:grid;gap:.5rem;padding:.8rem;margin-bottom:1rem;background:var(--postit);border:2px solid var(--fg);overflow-wrap:anywhere}.agent-list{display:grid;gap:.5rem;margin-bottom:1rem}.agent-list>div,.agent-change-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;padding:.6rem;border:2px solid var(--fg);background:var(--paper);text-align:left}.agent-permission-toggle{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem}.agent-list small{display:block;margin-top:.2rem;color:var(--muted-text)}.agent-account-warning{margin:0 0 1rem}.agent-request-details{display:grid;gap:.45rem;margin:1rem 0}.agent-request-details>div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.75rem;padding-bottom:.35rem;border-bottom:1px dashed rgba(45,45,45,.3)}.agent-request-details dt{font-weight:700}.agent-request-details dd{margin:0;overflow-wrap:anywhere}.agent-change-row{cursor:pointer}.agent-change-row span:first-child{display:grid;gap:.2rem}.agent-diff-file{margin:1rem 0}.agent-unified-diff{max-height:460px;overflow:auto;border:2px solid var(--fg);background:#fffef9;font:.82rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.agent-diff-header,.agent-diff-line{display:grid;grid-template-columns:3.5rem 3.5rem 2rem minmax(max-content,1fr);min-width:620px}.agent-diff-header{position:sticky;top:0;z-index:1;color:var(--muted-text);background:var(--muted-surface);border-bottom:1px solid rgba(45,45,45,.22)}.agent-diff-header>span,.agent-diff-line>span,.agent-diff-line>code{padding:.12rem .45rem}.agent-diff-number{color:#777;text-align:right;-webkit-user-select:none;user-select:none;border-right:1px solid rgba(45,45,45,.16)}.agent-diff-marker{text-align:center;-webkit-user-select:none;user-select:none;font-weight:800}.agent-diff-line code{display:block;white-space:pre;color:inherit}.agent-diff-line--add{background:#dcfce7;color:#14532d}.agent-diff-line--add .agent-diff-marker{color:#15803d}.agent-diff-line--remove{background:#fee2e2;color:#7f1d1d}.agent-diff-line--remove .agent-diff-marker{color:#dc2626}.agent-diff-line--context{background:#fffef9}@media(max-width:760px){.agent-token-create>div{display:grid}.modal-actions{flex-direction:column;align-items:stretch}.modal-actions .btn{width:100%}}.badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.9rem;padding:.2rem .55rem;border-radius:var(--wobbly-sm);border:2px solid var(--fg);background:var(--muted-surface);color:var(--fg);box-shadow:2px 2px #2d2d2d1f}.badge.ok{background:var(--postit);color:var(--success);border-color:var(--fg)}.error-banner{background:#ff4d4d1f;border:2px solid var(--accent);color:#8b1a1a;padding:.7rem .95rem;border-radius:var(--wobbly-sm);margin:.75rem 0;box-shadow:var(--shadow-sm)}.squiggle{width:100%;max-width:280px;height:28px;margin:.25rem 0 .5rem}@media(max-width:960px){.html-import-dropzone{align-items:flex-start;flex-direction:column}.editor-layout{grid-template-columns:1fr;grid-template-rows:auto auto 40vh 40vh;height:auto}.editor-layout--preview-hidden{grid-template-rows:auto auto minmax(40vh,1fr)}.file-tree,.editor-pane{border-right:0;border-bottom:3px solid var(--fg)}.editor-splitter{display:none}.file-row-actions{opacity:1}.editor-pane{min-height:40vh}.card:hover{transform:none}.topbar{padding:.65rem .85rem}.brand{font-size:1.3rem}}.landing-section{margin-top:3.5rem}.section-header{text-align:center;max-width:36rem;margin:0 auto 2rem}.section-header h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 .5rem;transform:rotate(-.5deg)}.section-header p{color:var(--muted-text);font-size:1.15rem;margin:0}.mcp-section .section-header .sketch-badge{margin-bottom:1rem}.mcp-connect-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:1.5rem;padding:1.4rem;background:var(--paper);border:2.5px solid var(--fg);border-radius:var(--wobbly-md);box-shadow:var(--shadow);transform:rotate(-.35deg)}.mcp-steps{display:grid;gap:1rem}.mcp-step{display:flex;align-items:flex-start;gap:.8rem}.mcp-step>span{display:grid;flex:0 0 2rem;width:2rem;height:2rem;place-items:center;border:2px solid var(--fg);border-radius:50%;background:var(--postit);font-family:var(--font-heading);font-weight:700;box-shadow:2px 2px #2d2d2d38}.mcp-step h3{margin:0 0 .2rem;font-size:1.15rem}.mcp-step p,.mcp-config p{margin:0;color:var(--muted-text)}.mcp-config{align-self:stretch;overflow:hidden;border:2px solid var(--fg);border-radius:var(--wobbly-sm);background:#282c34;color:#abb2bf;box-shadow:3px 3px #2d2d2d40}.mcp-config-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .8rem;border-bottom:2px solid var(--fg);background:var(--muted-surface);color:var(--fg);font-family:var(--font-heading);font-weight:700}.mcp-config pre{margin:0;padding:1rem;overflow-x:auto;font-family:var(--font-code);font-size:.82rem;line-height:1.65}.mcp-config p{padding:0 1rem 1rem;color:#d4d8df;font-size:.92rem}.mcp-note{max-width:46rem;margin:1.25rem auto 0;padding:.8rem 1rem;background:var(--postit);border:2px dashed var(--fg);border-radius:var(--wobbly-sm);text-align:center;transform:rotate(.35deg)}@media(max-width:720px){.mcp-connect-card{grid-template-columns:1fr;padding:1.1rem}}.sketch-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .85rem;background:var(--postit);border:2px dashed var(--fg);border-radius:var(--wobbly-sm);font-family:var(--font-heading);font-size:.95rem;font-weight:700;box-shadow:2px 2px #2d2d2d26;transform:rotate(-1.5deg);margin-bottom:.75rem}.sketch-mockup{margin-top:2rem;background:var(--paper);border:3px solid var(--fg);border-radius:var(--wobbly-md);box-shadow:var(--shadow-lg);overflow:hidden;position:relative;transform:rotate(.5deg);transition:transform .2s ease}.sketch-mockup:hover{transform:rotate(0) scale(1.005)}.mockup-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:var(--muted-surface);border-bottom:3px solid var(--fg)}.mockup-dots{display:flex;gap:.4rem}.mockup-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--fg)}.mockup-dot.red{background:var(--accent)}.mockup-dot.yellow{background:var(--postit)}.mockup-dot.green{background:var(--success)}.mockup-title{font-family:var(--font-code);font-size:.85rem;color:var(--muted-text);background:var(--paper);padding:.15rem .65rem;border:2px solid var(--fg);border-radius:4px}.mockup-grid{display:grid;grid-template-columns:1fr 1fr;min-height:240px}@media(max-width:768px){.mockup-grid{grid-template-columns:1fr}}.mockup-code-side{padding:1rem;background:#282c34;color:#abb2bf;font-family:var(--font-code);font-size:.85rem;line-height:1.6;border-right:3px solid var(--fg);overflow-x:auto}.mockup-code-side .k-keyword{color:#c678dd}.mockup-code-side .k-string{color:#98c379}.mockup-code-side .k-tag{color:#e06c75}.mockup-code-side .k-attr{color:#d19a66}.mockup-code-side .k-comment{color:#5c6370;font-style:italic}.mockup-preview-side{padding:1.5rem;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;text-align:center}.mockup-preview-card{background:var(--postit);border:2.5px solid var(--fg);border-radius:var(--wobbly-sm);padding:1rem 1.25rem;box-shadow:3px 3px #2d2d2d;transform:rotate(-1deg)}.mockup-preview-card h4{margin:0 0 .35rem;font-size:1.2rem}.mockup-preview-card p{margin:0 0 .75rem;font-size:.95rem;color:var(--fg)}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}.step-card{position:relative;background:var(--paper);border:2.5px solid var(--fg);border-radius:var(--wobbly-md);padding:1.5rem 1.25rem;box-shadow:var(--shadow);transition:transform .15 ease}.step-card:hover{transform:translateY(-3px) rotate(1deg)}.step-badge{display:inline-block;font-family:var(--font-heading);font-size:1.2rem;font-weight:700;color:#fff;background:var(--pen);border:2px solid var(--fg);border-radius:50%;width:40px;height:40px;line-height:36px;text-align:center;margin-bottom:.75rem;box-shadow:2px 2px #2d2d2d}.step-card h3{margin:0 0 .5rem;font-size:1.3rem}.step-card p{margin:0;color:var(--muted-text);font-size:1rem}.use-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:1.5rem}.use-case-card{background:var(--paper);border:2.5px solid var(--fg);border-radius:var(--wobbly-sm);padding:1.35rem 1.25rem;box-shadow:var(--shadow)}.use-case-card h3{font-size:1.3rem;margin:0 0 .4rem}.use-case-card p{margin:0;color:var(--muted-text);font-size:1rem}.cta-banner{margin-top:4rem;background:var(--postit);border:3px solid var(--fg);border-radius:var(--wobbly-md);padding:2.5rem 1.5rem;text-align:center;box-shadow:var(--shadow-lg);position:relative;transform:rotate(-.5deg)}.cta-banner:before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:22px;margin-left:-45px;background:#78787859;transform:rotate(1deg);border-radius:2px;pointer-events:none}.cta-banner h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 .6rem}.cta-banner p{font-size:1.15rem;color:var(--fg);max-width:32rem;margin:0 auto 1.5rem}