:root{--accent:#1d9e75;--accent-soft:#c7e5d7;--coral:#d85a30;--amber:#ba7517;--red:#e24b4a;--blue:#378add;--green:#639922;--ink:#1f1f1b;--ink-soft:#4a4a45;--ink-faint:#8a8a82;--paper:#f7f4ec;--paper-2:#efebe0;--paper-card:#fbfaf4;--font:"Plus Jakarta Sans", system-ui, sans-serif;--display:"Plus Jakarta Sans", system-ui, sans-serif;--hand:"Plus Jakarta Sans", system-ui, sans-serif;--mono:"JetBrains Mono", monospace}*,:before,:after{box-sizing:border-box}html,body{color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#d4d0c6;min-height:100vh;margin:0;padding:0}#root{justify-content:center;align-items:flex-start;min-height:100vh;display:flex}.app-shell{background:var(--paper);flex-direction:column;width:100%;max-width:390px;min-height:100vh;display:flex;position:relative;box-shadow:0 0 40px #00000026}.screen-content{-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.disp{font-family:var(--font);letter-spacing:-.02em;font-weight:800}.hand{font-family:var(--font)}.mono{font-family:var(--mono)}.ink{color:var(--ink)}.soft{color:var(--ink-soft)}.faint{color:var(--ink-faint)}.accent-c{color:var(--accent)}.coral-c{color:var(--coral)}.red-c{color:var(--red)}.amber-c{color:var(--amber)}.blue-c{color:var(--blue)}.green-c{color:var(--green)}.sketch-box{border:1.8px solid var(--ink);background:var(--paper-card);border-radius:14px 12px 16px 11px;position:relative}.sketch-box.dashed{border-style:dashed}.sketch-btn{font-family:var(--font);border:1.8px solid var(--ink);background:var(--paper-card);color:var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-size:15px;font-weight:600;line-height:1.2;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.sketch-btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(1px,1px)}.sketch-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:2px 2px #1d9e7566}.sketch-btn.primary:active{box-shadow:1px 1px #1d9e7566}.sketch-btn.coral-btn{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:2px 2px #d85a3066}.sketch-btn.ghost{box-shadow:none;border-color:var(--ink-faint);color:var(--ink-soft);background:0 0}.sketch-btn.danger{background:var(--red);color:#fff;border-color:var(--red);box-shadow:2px 2px #e24b4a66}.sketch-btn.disabled{background:var(--paper-2);color:var(--ink-faint);box-shadow:1px 1px 0 var(--ink-faint);border-color:var(--ink-faint);cursor:default;pointer-events:none}.sketch-btn.sm{padding:7px 12px;font-size:13px}.sketch-btn.lg{padding:13px 20px;font-size:17px}.sketch-btn.full{width:100%}.sketch-input{border:1.8px solid var(--ink);background:var(--paper);font-family:var(--font);color:var(--ink);border-radius:10px;outline:none;width:100%;padding:10px 12px;font-size:15px;transition:border-color .15s;display:block}.sketch-input::placeholder{color:var(--ink-faint)}.sketch-input:focus{border-color:var(--accent)}.sketch-tag{font-family:var(--font);border:1.5px solid var(--ink);background:var(--paper-card);color:var(--ink);white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:3px 9px;font-size:12px;font-weight:500;display:inline-flex}.sketch-tag.green{border-color:var(--green);color:var(--green);background:#ddf0cc}.sketch-tag.amber{border-color:var(--amber);color:var(--amber);background:#f5e3c2}.sketch-tag.red{border-color:var(--red);color:var(--red);background:#f4d1d1}.sketch-tag.blue{border-color:var(--blue);color:var(--blue);background:#d6e5f6}.sketch-tag.accent{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.sketch-tag.faint{background:var(--paper-2);border-color:var(--ink-faint);color:var(--ink-faint)}.sketch-tag.coral{border-color:var(--coral);color:var(--coral);background:#ffe4d0}.divider-dashed{border:0;border-top:1.5px dashed var(--ink-faint);margin:10px 0}.placeholder-img{background:repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--paper-card) 8px 16px);border:1.6px dashed var(--ink-faint);color:var(--ink-faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px;border-radius:12px;justify-content:center;align-items:center;font-size:10px;display:flex}.underline-sketch{text-underline-offset:2px;cursor:pointer;text-decoration:underline}.avatar{border:1.6px solid var(--ink);background:var(--paper-2);font-family:var(--font);color:var(--ink);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:inline-flex}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:#1f1f1b33;border-radius:4px}