:root{color:#243033;background:#f7f4ed;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--surface: #fffdf7;--surface-strong: #ffffff;--ink: #243033;--muted: #667571;--line: #d8ded8;--accent: #2f7d71;--accent-strong: #205f56;--shadow: 0 18px 48px rgba(47, 58, 61, .12)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;overscroll-behavior:none}button{min-height:44px;border:1px solid var(--line);border-radius:8px;padding:0 16px;color:var(--ink);background:var(--surface-strong);font:inherit}button:disabled{color:#8c9995;background:#eef0ec}input{min-height:44px;width:min(420px,100%);border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--ink);background:var(--surface-strong);font:inherit}input[type=range]{width:160px;min-height:32px;padding:0}select{min-height:40px;border:1px solid var(--line);border-radius:8px;padding:0 10px;color:var(--ink);background:var(--surface-strong);font:inherit}.app-shell{min-height:100vh;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 auto 18px;max-width:1180px}.app-header h1,.section-heading h2,.editor-topbar h2,.empty-state h3,.note-card h3{margin:0;letter-spacing:0}.app-header h1{font-size:clamp(1.5rem,2.8vw,2rem)}.eyebrow{margin:0 0 4px;color:var(--accent-strong);font-size:.78rem;font-weight:700;text-transform:uppercase}.top-nav,.editor-toolbar{display:flex;flex-wrap:wrap;gap:8px}.nav-button.active,.primary-button{border-color:var(--accent);color:#fff;background:var(--accent)}.app-main{max-width:1180px;margin:0 auto}.page-section,.editor-page{display:grid;gap:16px}.notes-layout{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:16px;align-items:start}.folder-panel{display:grid;gap:8px;border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--surface);box-shadow:var(--shadow)}.folder-panel h2{margin:0}.folder-button{width:100%;justify-content:flex-start;text-align:left}.folder-button.active{border-color:var(--accent);color:#fff;background:var(--accent)}.folder-create{display:grid;gap:8px;margin-top:8px}.section-heading,.editor-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.empty-state,.backup-panel{border:1px solid var(--line);border-radius:8px;padding:24px;background:var(--surface);box-shadow:var(--shadow)}.empty-state p,.backup-panel p,.note-card p{margin:8px 0 0;color:var(--muted)}.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.note-card{display:grid;grid-template-columns:1fr auto;min-height:132px;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--surface)}.note-folder-select{display:grid;gap:4px;margin-top:12px;color:var(--muted);font-size:.85rem}.note-card-actions{display:grid;gap:8px}.danger-button{border-color:#d9b7b2;color:#8f2b20}.danger-button:hover{border-color:#a83224}.editor-toolbar{position:sticky;top:8px;z-index:1;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fffdf7eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.tool-button.active{border-color:var(--accent);color:#fff;background:var(--accent)}.toolbar-field{display:flex;min-height:44px;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:var(--surface-strong);color:var(--muted);font-size:.9rem}.width-field{min-width:240px}.color-swatches{display:flex;gap:6px}.color-swatch{width:28px;height:28px;min-height:28px;border:2px solid transparent;border-radius:999px;padding:0}.color-swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface-strong),0 0 0 4px var(--accent)}.canvas-placeholder{display:grid;min-height:min(68vh,760px);overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface-strong);box-shadow:var(--shadow);touch-action:none}.canvas-frame{display:grid;min-height:min(68vh,760px);height:min(68vh,760px);overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(#edf1ed 1px,transparent 1px),linear-gradient(90deg,#edf1ed 1px,transparent 1px),var(--surface-strong);background-size:28px 28px;box-shadow:var(--shadow);touch-action:none}.paper-grid{min-height:100%;background-image:linear-gradient(#edf1ed 1px,transparent 1px),linear-gradient(90deg,#edf1ed 1px,transparent 1px);background-size:28px 28px}.drawing-canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}.title-editor{display:grid;gap:6px;justify-items:end}.title-editor label{color:var(--muted);font-size:.85rem}.backup-panel{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px;align-items:center}.backup-panel p{grid-column:1 / -1}.file-input{display:none}.import-confirmation{display:flex;grid-column:1 / -1;flex-wrap:wrap;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--surface-strong)}.import-confirmation p{flex:1 1 100%;margin:0}.success-message{color:var(--accent-strong);font-weight:700}.error-message{color:#a83224;font-weight:700}@media(max-width:720px){.app-header,.section-heading,.editor-topbar{align-items:stretch;flex-direction:column}.notes-layout,.top-nav,.editor-toolbar,.backup-panel{grid-template-columns:1fr}.top-nav button,.editor-toolbar button,.backup-panel button{flex:1 1 auto}.toolbar-field,.width-field{flex:1 1 100%;justify-content:space-between;min-width:0}input[type=range]{width:min(220px,52vw)}.title-editor{justify-items:stretch}}