:root {
  --bg: #fff; --panel: #f5f6f8; --text: #1b1f24; --muted: #667; --line: #d8dce2;
  --accent: #0b6bcb; --accent-text: #fff; --warn: #b45309;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171b; --panel: #1d2127; --text: #e6e9ed; --muted: #9aa3ad; --line: #333a43; --accent: #4da3ff; --accent-text: #08111c; --warn: #f0a04b; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
header h1 { font-size: 16px; margin: 0; flex: 1; }
#status { color: var(--muted); }
#status.dirty { color: var(--warn); }
button { font: inherit; padding: 5px 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 6px; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.ghost { border-color: transparent; background: none; color: var(--muted); }
main { flex: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
nav, #editor, #seen { overflow: auto; padding: 12px; min-height: 0; }
nav { border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
nav button { text-align: left; border: 0; background: none; padding: 5px 8px; }
nav button.on { background: var(--panel); font-weight: 600; }
#seen { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tabs button { padding: 3px 8px; font-size: 12px; }
.tabs button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.meta { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
#preview { flex: 1; margin: 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 ui-monospace, Menlo, monospace; }
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 3px; }
input, textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
textarea { resize: vertical; min-height: 34px; }
.row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px; }
.row > textarea { flex: 1; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--muted); padding: 2px 4px; }
td { padding: 2px; vertical-align: top; }
.actions { margin-top: 10px; display: flex; gap: 8px; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; overflow: auto; } nav { flex-direction: row; flex-wrap: wrap; border: 0; } #seen { border: 0; } }
h2 { font-size: 16px; margin: 0 0 4px; }
h3 { font-size: 13px; margin: 18px 0 4px; }
.hint { color: var(--muted); margin: 0 0 8px; }
table.dims td { vertical-align: middle; padding: 3px 6px 3px 0; border-bottom: 1px solid var(--line); }
table.dims input.num { width: 90px; text-align: right; }
table.dims .unit { color: var(--muted); white-space: nowrap; }
table.dims .help { color: var(--muted); font-size: 12px; }
pre.log { white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--muted); }

header button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
#viewer { flex: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
#viewer[hidden], main[hidden] { display: none; }
#parts { border-right: 1px solid var(--line); padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
#parts button { text-align: left; border: 0; background: none; padding: 5px 8px; }
#parts button.on { background: var(--panel); font-weight: 600; }
#parts small { color: var(--muted); display: block; font-weight: 400; }
#stage { position: relative; min-width: 0; min-height: 0; background: var(--panel); }
#gl { width: 100%; height: 100%; display: block; touch-action: none; }
#info { position: absolute; left: 12px; top: 10px; font: 12px/1.5 ui-monospace, Menlo, monospace; pointer-events: none; }
#studio { position: absolute; right: 12px; top: 10px; }
#hint { position: absolute; left: 12px; bottom: 8px; color: var(--muted); font-size: 12px; pointer-events: none; }

#viewer.cm { grid-template-columns: 220px minmax(0, 1fr) 380px; }
#parts hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
#parts .ptitle { color: var(--muted); padding: 0 8px; }
#drawer { border-left: 1px solid var(--line); padding: 12px; overflow: auto; min-height: 0; }
#drawer[hidden] { display: none; }
#drawer .grp { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; padding: 0 8px 6px; }
#drawer .grp.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--panel); }
#drawer .ghead { display: flex; gap: 6px; align-items: center; padding: 6px 0; cursor: pointer; }
#drawer .ghead small { color: var(--muted); }
#drawer .ghead input { width: auto; margin: 0; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 84px 52px; gap: 6px; align-items: center; margin: 3px 0; color: var(--text); font-size: 13px; }
.prow .pl { overflow-wrap: anywhere; }
.prow input.num { text-align: right; }
.prow .pu { color: var(--muted); font-size: 12px; }
.prow.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { background: var(--accent); } 100% { background: transparent; } }
.prow input:focus { outline: 2px solid var(--accent); }
#drawer .size { white-space: pre; font: 12px/1.5 ui-monospace, Menlo, monospace; margin: 0 0 6px; }
#drawer .actions button:disabled { opacity: .5; }

/* Bike page */
:root { --frame: #2f4f6f; --tyre: #2a2d31; --rack: #8a8f96; --case: rgba(40, 44, 50, .18); --part: #e08a1e; --part-fill: rgba(224, 138, 30, .25); }
@media (prefers-color-scheme: dark) {
  :root { --frame: #8fb4d9; --tyre: #c9ced4; --rack: #7d848c; --case: rgba(220, 225, 230, .12); --part: #f0a04b; --part-fill: rgba(240, 160, 75, .25); }
}
#bike { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; }
#bike[hidden] { display: none; }
#bstage { position: relative; min-width: 0; min-height: 0; background: var(--panel); padding: 12px; }
#bsvg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
#bhint { position: absolute; left: 12px; bottom: 8px; color: var(--muted); font-size: 12px; pointer-events: none; }
#bpanel { border-left: 1px solid var(--line); padding: 12px; overflow: auto; min-height: 0; }
#bpanel .item { display: block; width: 100%; text-align: left; margin: 0 0 4px; }
#bpanel .item small { display: block; color: var(--muted); }
#bpanel select { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
#bpanel .prow.hl { background: var(--panel); outline: 1px solid var(--accent); border-radius: 4px; }
#bpanel details.grp { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; padding: 4px 8px; }
#bpanel details.grp summary { cursor: pointer; padding: 2px 0; }
#bpanel details.grp small { color: var(--muted); }
#bpanel .log { white-space: pre-wrap; margin-top: 8px; }
#bsvg .ground { stroke: var(--line); stroke-width: 4; }
#bsvg .tyre { fill: none; stroke: var(--tyre); }
#bsvg .rim { fill: none; stroke: var(--rack); stroke-width: 10; }
#bsvg .hub { fill: var(--rack); }
#bsvg .spoke { stroke: var(--rack); stroke-width: 2; }
#bsvg .guard { fill: none; stroke: var(--rack); stroke-width: 10; stroke-linecap: round; }
#bsvg .case { stroke: var(--case); stroke-linecap: round; }
#bsvg .tube { stroke: var(--frame); stroke-linecap: round; fill: none; }
#bsvg .bar { stroke: var(--rack); }
#bsvg .saddle { fill: var(--tyre); }
#bsvg .ring { fill: none; stroke: var(--rack); stroke-width: 8; }
#bsvg .rack { stroke: var(--rack); stroke-linecap: round; }
#bsvg .dim { stroke: var(--muted); stroke-width: 3; }
#bsvg .dimt, #bsvg .title { fill: var(--muted); font: 28px system-ui, sans-serif; text-anchor: middle; }
#bsvg .title { text-anchor: start; font-size: 34px; font-weight: 600; fill: var(--text); }
#bsvg .hit { cursor: pointer; }
#bsvg .hit:hover .tube, #bsvg .hit.tube:hover, #bsvg .hit:hover .rack { stroke: var(--accent); }
#bsvg .hit:hover .tyre, #bsvg .hit:hover .dim { stroke: var(--accent); }
#bsvg .hit.sel, #bsvg .hit.sel .tube, #bsvg .hit.sel .rack, #bsvg .hit.sel .tyre, #bsvg .hit.sel .dim { stroke: var(--accent); }
#bsvg .hit.case:hover, #bsvg .hit.case.sel { stroke: var(--accent); stroke-opacity: .35; }
#bsvg .saddle.hit:hover, #bsvg .saddle.hit.sel { fill: var(--accent); stroke: none; }
#bsvg .mount { cursor: grab; }
#bsvg .mount .pad { fill: transparent; }
#bsvg .mount .body { fill: var(--part-fill); stroke: var(--part); stroke-width: 5; }
#bsvg .mount .body.left { stroke-dasharray: 10 6; }
#bsvg .mount.nomodel .body { fill: transparent; }
#bsvg .mount .label { fill: var(--text); font: 600 34px system-ui, sans-serif; }
#bsvg .mount:hover .body { stroke: var(--accent); }
#bsvg .mount.sel .body { stroke: var(--accent); fill: var(--accent); fill-opacity: .35; stroke-width: 7; }
#bsvg .mount.sel .label { fill: var(--accent); }
@media (max-width: 900px) { #bike { grid-template-columns: 1fr; grid-template-rows: 55vh auto; overflow: auto; } #bpanel { border: 0; } }

/* Wiring page */
:root {
  --pcb: #2f7d4f; --pcb-text: #eaf5ee; --bb: #f4f1ea; --bb-line: #cfc8b8; --hole: #6b6558;
  --p5: #d33a2c; --p3: #e07b12; --gnd: #3b4f9e; --io: #8a8f96;
  --w-red: #d33a2c; --w-black: #24272b; --w-orange: #e07b12; --w-yellow: #e6b800; --w-green: #2e9e4f; --w-blue: #2f6fd6;
  --w-white: #fafafa; --w-purple: #8a4fc7; --w-brown: #8a5a2b; --w-grey: #8a8f96; --w-other: #b07ad6;
}
@media (prefers-color-scheme: dark) {
  :root { --pcb: #1f5a38; --bb: #2a2c30; --bb-line: #454950; --hole: #a29b8c; --w-black: #0a0b0c; --gnd: #7d93e8; }
}
#wiring { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; }
#wiring[hidden] { display: none; }
#wstage { position: relative; min-width: 0; min-height: 0; background: var(--panel); padding: 12px; }
#wsvg { width: 100%; height: 100%; display: block; user-select: none; }
#whint { position: absolute; left: 12px; bottom: 8px; color: var(--muted); font-size: 12px; pointer-events: none; }
#wpanel { border-left: 1px solid var(--line); padding: 12px; overflow: auto; min-height: 0; }
#wpanel .item { display: block; width: 100%; text-align: left; margin: 0 0 4px; }
#wpanel .item small { display: block; color: var(--muted); }
#wpanel .item.bad { border-color: var(--warn); }
#wpanel small.parse { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
#wpanel small.parse.bad { color: var(--warn); }
#wsvg text { font-family: system-ui, sans-serif; }
#wsvg .pcb { fill: var(--pcb); }
#wsvg .boardname { font-size: 15px; font-weight: 600; fill: var(--text); }
#wsvg .pcb + .boardname, #wsvg .pcb + .boardname + .small { fill: var(--pcb-text); }
#wsvg .small { font-size: 11px; fill: var(--muted); }
#wsvg .port rect { fill: #c9ced4; stroke: #6b7178; }
#wsvg .port text { fill: var(--pcb-text); }
#wsvg .header { fill: #1b1d20; }
#wsvg .pin { cursor: pointer; }
#wsvg .pin .pad { fill: #c9a227; stroke: #1b1d20; stroke-width: 1.5; }
#wsvg .pin.p5 .pad { fill: var(--p5); }
#wsvg .pin.p3 .pad { fill: var(--p3); }
#wsvg .pin.gnd .pad { fill: #1b1d20; stroke: #8a8f96; }
#wsvg .pinlabel { font-size: 10.5px; fill: var(--muted); }
#wsvg .pin .pinlabel { fill: var(--pcb-text); opacity: .7; }
#wsvg .pin.used .pinlabel { opacity: 1; font-weight: 600; }
#wsvg .pin:hover .pad, #wsvg .pin.sel .pad { stroke: var(--accent); stroke-width: 3; }
#wsvg .pin.sel .pinlabel { fill: var(--accent); }
#wsvg .bb { fill: var(--bb); stroke: var(--bb-line); stroke-width: 1.5; }
#wsvg .gap { fill: var(--bb-line); opacity: .6; }
#wsvg .hole { fill: var(--hole); cursor: pointer; }
#wsvg .hole:hover, #wsvg .hole.hot { fill: var(--accent); }
#wsvg .railline { stroke-width: 2; }
#wsvg .railline.p5 { stroke: var(--p5); }
#wsvg .railline.p3 { stroke: var(--p3); }
#wsvg .railline.gnd { stroke: var(--gnd); }
#wsvg .raillabel { font-size: 12px; font-weight: 600; }
#wsvg .raillabel.p5 { fill: var(--p5); }
#wsvg .raillabel.p3 { fill: var(--p3); }
#wsvg .raillabel.gnd { fill: var(--gnd); }
#wsvg .dev rect { fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; }
#wsvg .devname { font-size: 13px; font-weight: 600; fill: var(--text); }
#wsvg .dev .pinlabel { fill: var(--text); }
#wsvg .term { fill: var(--muted); }
#wsvg .wire { cursor: pointer; }
#wsvg .wire .casing { fill: none; stroke: var(--text); stroke-opacity: .45; stroke-width: 5.5; stroke-linecap: round; }
#wsvg .wire .core { fill: none; stroke-width: 3.5; stroke-linecap: round; }
#wsvg .wire.cable .casing { stroke-width: 9; }
#wsvg .wire.cable .core { stroke-width: 6; }
#wsvg .wire .end { stroke: var(--text); stroke-width: 1; }
#wsvg .wire .lead { stroke: #9aa0a6; stroke-width: 2; }
#wsvg .wire .resistor { fill: #d9c49a; stroke: #7a6a48; }
#wsvg .wire .rlabel { font-size: 11px; font-weight: 600; fill: var(--text); }
#wsvg .wire:hover .casing, #wsvg .wire.sel .casing { stroke: var(--accent); stroke-opacity: 1; stroke-width: 8; }
#wsvg .wire.sel .resistor, #wsvg .wire:hover .resistor { stroke: var(--accent); stroke-width: 2.5; }
#wsvg .wire.dim { opacity: .25; }
@media (max-width: 900px) { #wiring { grid-template-columns: 1fr; grid-template-rows: 60vh auto; overflow: auto; } #wpanel { border: 0; } }

/* Read-only public copy (kb.py with KB_READONLY=1) at murathanyildirim.com/bike-logger/hardware/: html.site wears the
   portfolio's look (Inter, gray-50 / gray-900, the two blurred colour blobs, the frosted nav pill).
   app.js sets html.dark (the site is dark only for now), so these rules beat the OS media queries above. */
#sitenav, .blob, .site-only { display: none; }
.readonly #save, .readonly #studio { display: none; }
html.site {
  --bg: #f9fafb; --panel: #f3f4f6; --card: rgba(255, 255, 255, .72); --text: #030712; --muted: #6b7280; --line: rgba(0, 0, 0, .07);
  --accent: #7c3aed; --accent-text: #fff; --warn: #b45309;
  --frame: #2f4f6f; --tyre: #2a2d31; --rack: #8a8f96; --case: rgba(40, 44, 50, .18); --part: #db2777; --part-fill: rgba(219, 39, 119, .18);
  --pcb: #2f7d4f; --bb: #f4f1ea; --bb-line: #cfc8b8; --hole: #6b6558; --w-black: #24272b; --gnd: #3b4f9e;
  color-scheme: light;
}
html.site.dark {
  --bg: #111827; --panel: #1f2937; --card: rgba(3, 7, 18, .55); --text: rgba(249, 250, 251, .9); --muted: #9ca3af; --line: rgba(255, 255, 255, .08);
  --accent: #a78bfa; --accent-text: #0b0614; --warn: #f0a04b;
  --frame: #8fb4d9; --tyre: #c9ced4; --rack: #7d848c; --case: rgba(220, 225, 230, .12); --part: #f472b6; --part-fill: rgba(244, 114, 182, .2);
  --pcb: #1f5a38; --bb: #2a2c30; --bb-line: #454950; --hole: #a29b8c; --w-black: #0a0b0c; --gnd: #7d93e8;
  color-scheme: dark;
}
html.site body { font-family: Inter, system-ui, sans-serif; background: var(--bg); position: relative; overflow: hidden; }
html.site .blob { display: block; position: fixed; z-index: -1; border-radius: 999px; filter: blur(10rem); height: 31.25rem; pointer-events: none; }
html.site .blob.one { background: #fbe2e3; top: -6rem; right: 11rem; width: 68.75rem; }
html.site .blob.two { background: #dbd7fb; top: -1rem; left: -28rem; width: 68.75rem; }
html.site.dark .blob.one { background: #946263; }
html.site.dark .blob.two { background: #676394; }
html.site .site-only { display: inline; }
html.site .local-only { display: none; }

html.site header {
  margin: 16px auto 14px; width: calc(100% - 32px); padding: 6px 8px 6px 18px; gap: 6px;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(255, 255, 255, .8);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .03); backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem);
}
html.site.dark header { background: rgba(3, 7, 18, .75); border-color: rgba(0, 0, 0, .4); }
html.site #sitenav { display: flex; flex-direction: row; gap: 2px; align-items: center; border: 0; padding: 0; overflow: visible; min-height: 0; }
html.site #sitenav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 999px; white-space: nowrap; transition: color .15s; }
html.site #sitenav a:first-child { color: var(--text); font-weight: 600; }
html.site #sitenav a:hover { color: var(--text); }
html.site header h1 { font-size: 14px; font-weight: 600; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); }
html.site header button { border: 0; background: none; color: var(--muted); border-radius: 999px; padding: 7px 14px; font-weight: 500; transition: color .15s; }
html.site header button:hover { color: var(--text); }
html.site header button.on { background: #f3f4f6; color: #030712; }
html.site.dark header button.on { background: #374151; color: #fff; }
html.site #status { font-size: 12px; padding: 0 10px; }

/* The work area: floating cards on the page instead of edge-to-edge panes */
html.site main, html.site #viewer, html.site #bike, html.site #wiring { gap: 12px; padding: 0 16px 16px; width: 100%; max-width: 1472px; margin: 0 auto; }
html.site header { max-width: 1440px; }
html.site main > *, html.site #viewer > *, html.site #bike > *, html.site #wiring > * {
  border: 1px solid var(--line) !important; border-radius: 16px; background: var(--card); backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); overflow: auto;
}
html.site #stage, html.site #bstage, html.site #wstage { background: var(--panel); overflow: hidden; }
html.site #seen { background: var(--card); }
html.site button.primary { background: var(--accent); border-color: var(--accent); }
html.site #parts button.on, html.site nav button.on { background: var(--panel); border-radius: 999px; }
html.site #wpanel .item, html.site #bpanel .item { border-radius: 10px; background: var(--card); }
html.site #wpanel .item:hover, html.site #bpanel .item:hover { background: var(--panel); }


@media (max-width: 900px) {
  html.site body { overflow: auto; height: auto; min-height: 100vh; }
  html.site header { border-radius: 24px; flex-wrap: wrap; justify-content: center; padding: 8px; }
  html.site header h1 { display: none; }
  html.site #sitenav { width: 100%; justify-content: center; }
}

/* Read-only notes: a document, not a form */
.readonly #seen { display: none; }
.readonly main { grid-template-columns: 240px minmax(0, 1fr); }
.readonly #editor { padding: 28px 36px 40px; }
.readonly #editor > * { max-width: 860px; }
.readonly #editor h2 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; }
.readonly #editor h3 { font-size: 15px; margin: 26px 0 8px; }
.readonly #editor p { line-height: 1.65; margin: 0 0 12px; }
.readonly #editor p.lead { color: var(--muted); font-size: 15px; }
.readonly .doclist { margin: 8px 0 0; padding: 0; list-style: none; }
.readonly .doclist li { position: relative; padding: 12px 0 12px 22px; line-height: 1.65; border-top: 1px solid var(--line); }
.readonly .doclist li:first-child { border-top: 0; }
.readonly .doclist li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 6px; height: 6px; border-radius: 99px; background: var(--accent); }
.readonly .doctable { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; }
.readonly .doctable table { font-size: 13.5px; }
.readonly .doctable th { background: var(--panel); padding: 9px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.readonly .doctable td { padding: 10px 12px; border-top: 1px solid var(--line); line-height: 1.55; }
.readonly .doctable td.val { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.readonly .doctable td.help { color: var(--muted); }
.readonly code { font: 12.5px ui-monospace, Menlo, monospace; background: var(--panel); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.readonly nav button { padding: 7px 12px; }
.readonly .ro { display: block; padding: 2px 0; color: var(--text); overflow-wrap: anywhere; }
.readonly .ro.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.readonly label { margin-top: 12px; }
@media (max-width: 900px) {
  .readonly main { grid-template-columns: 1fr; }
  .readonly #editor { padding: 20px; }
  .readonly nav#nav { flex-wrap: nowrap; overflow-x: auto; padding: 8px; }
  .readonly nav#nav button { white-space: nowrap; flex: none; }
}