:root{--bg:#fff;--fg:#1d1d1f;--muted:#6e6e73;--line:#e5e5e7;--side:#f5f5f7;--sel:#e4e4e7;--accent:#ffcc00}
@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#f5f5f7;--muted:#98989d;--line:#2c2c2e;--side:#111;--sel:#2a2a2c}}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 14px;cursor:pointer}
button.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}button.danger{color:#c0392b}
button.icon{border:none;font-size:20px;line-height:1;padding:6px 10px;width:40px;height:40px;border-radius:20px}button.icon:hover{background:var(--sel)}
input[type=text]{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.err{color:#c0392b;font-size:14px;min-height:1.2em}.hint{color:var(--muted);font-size:14px}.muted{color:var(--muted)}

/* landing vs app */
#landing,#app{display:none}body.out #landing{display:block}body.in #app{display:flex}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);gap:16px;flex-wrap:wrap}
.top a{color:var(--fg);text-decoration:none}.brand{font-weight:700;font-size:19px;display:flex;align-items:center;gap:10px}.brand img{width:28px;height:28px;border-radius:7px}
.top nav a{margin-left:16px;color:var(--muted)}
.hero{padding:40px 0 10px}h1{font-size:34px;line-height:1.15;margin:12px 0 10px}h2{font-size:21px;margin:30px 0 8px}.lead{font-size:20px;color:var(--muted)}
.start{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:22px 0 8px}.start input{min-width:260px}
.sample{background:var(--side);border-radius:12px;padding:16px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;white-space:pre;overflow:auto;margin:18px 0}
.shots{display:flex;gap:16px;margin:24px 0;align-items:flex-start}.shots img{max-width:100%;border-radius:14px;border:1px solid var(--line)}.shots img:first-child{width:28%}.shots img:last-child{width:70%}
.get{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.get span{display:inline-block;padding:11px 18px;border-radius:12px;border:1px solid var(--line);color:var(--muted)}
footer{border-top:1px solid var(--line);padding:18px 0 40px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}footer a{color:var(--muted);margin-right:10px}

/* notepad */
#app{height:100%;flex-direction:row}
#side{width:300px;flex:none;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column}
#pane{flex:1;display:flex;flex-direction:column;min-width:0}
.bar{display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:56px}
#side .bar .name{flex:1;text-align:center;font-weight:600}
#list{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
#list li{padding:10px 16px;border-bottom:1px solid var(--line);cursor:default}#list li.sel{background:var(--sel)}
#list .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#list .d{font-size:12px;color:var(--muted)}
#title{flex:1;text-align:center;font-weight:600;border:none;background:none;padding:6px}#title:focus{outline:none;background:var(--sel);border-radius:8px}
.back{display:none}
#edwrap{flex:1;position:relative;min-height:0;background:var(--bg)}
#editor,#shade{position:absolute;inset:0;margin:0;width:100%;height:100%;border:none;padding:16px 20px;font:inherit;line-height:1.5;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;tab-size:4;box-sizing:border-box;scrollbar-gutter:stable}
#shade{color:var(--fg);overflow:hidden;pointer-events:none}#shade .c{color:var(--muted)}
#editor{resize:none;background:transparent;color:transparent;caret-color:var(--fg);outline:none;overflow-y:auto}
#editor::selection{color:transparent;background:rgba(10,132,255,.3)}
.placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted)}
@media(max-width:720px){
  #side{width:100%;border:none}#pane{display:none}
  body.note-open #side{display:none}body.note-open #pane{display:flex}.back{display:inline-block}
  body.settings-open #side{display:none}
}

/* settings: a pane in place of the note, never a modal */
#settingsPane{display:none;flex:1;flex-direction:column;min-width:0}
body.settings-open #pane{display:none}body.settings-open #settingsPane{display:flex}
#settingsPane .bar .name{flex:1;text-align:center;font-weight:600}
.dlg{padding:8px 24px 22px;max-width:560px;overflow:auto}
.dlg h3{font-size:14px;color:var(--muted);margin:18px 0 6px;font-weight:600}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.kv+.row{margin-top:16px}.row input{flex:1;min-width:200px}.row code{flex:1;font-size:16px}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}.kv span:last-child{color:var(--muted)}
.links a{color:var(--muted)}