: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}.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}.editor-layout{display:grid;grid-template-columns:220px 1fr 1fr;grid-template-rows:auto 1fr;height:calc(100vh - 64px);gap:0;border-top:0;background:var(--muted-surface)}.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-item{display:block;width:100%;text-align:left;border:2px solid transparent;background:transparent;color:var(--fg);padding:.4rem .55rem;border-radius:var(--wobbly-sm);cursor:pointer;margin-bottom:.25rem;transition:transform .1s ease,background .1s ease}.file-item:hover{background:var(--muted-surface);border-style:dashed;border-color:var(--fg)}.file-item.active{background:#2d5da11f;border:2px solid var(--pen);color:var(--pen);font-weight:700}.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}.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}.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)}.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}.modal{width:min(480px,100%);background:var(--paper);border:3px solid var(--fg);border-radius:var(--wobbly-md);padding:1.35rem;box-shadow:var(--shadow-lg);transform:rotate(-.5deg)}.modal h2{margin:0 0 .85rem;font-size:1.75rem}.modal-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1rem;flex-wrap:wrap}.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){.editor-layout{grid-template-columns:1fr;grid-template-rows:auto auto 40vh 40vh;height:auto}.file-tree,.editor-pane{border-right:0;border-bottom:3px solid var(--fg)}.editor-pane{min-height:40vh}.card:hover{transform:none}.topbar{padding:.65rem .85rem}.brand{font-size:1.3rem}}