:root { color: #172033; background: #f5f7fa; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button { border: 0; border-radius: .5rem; cursor: pointer; font: inherit; min-height: 2.5rem; }
button:focus-visible, a:focus-visible { outline: 3px solid #7f56d9; outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .65; }
.topbar { align-items: center; background: #fff; border-bottom: 1px solid #e4e7ec; display: flex; height: 3.75rem; justify-content: space-between; padding: 0 1rem; position: relative; z-index: 2; }
.brand { color: #1d2939; font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.topbar-actions { align-items: center; display: flex; gap: .75rem; }
#connection { color: #027a48; font-size: .875rem; white-space: nowrap; }
#connection.offline { color: #b54708; }
#active-board { color: #475467; font-size: .875rem; white-space: nowrap; }
.primary { background: #6941c6; color: #fff; font-weight: 700; padding: 0 1.1rem; }
.primary:hover { background: #53389e; }
.secondary { background: #fff; border: 1px solid #d0d5dd; color: #344054; font-size: .875rem; padding: 0 .8rem; }
.secondary:hover, .toolbar button:hover, .zoom-controls button:hover { background: #f2f4f7; }
.home-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 1rem; box-shadow: 0 8px 28px rgb(16 24 40 / 7%); margin: clamp(4rem, 15vh, 10rem) auto; max-width: 35rem; padding: clamp(1.5rem, 5vw, 3rem); text-align: center; }
.home-card h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.045em; margin: .2rem 0 1rem; }
.home-card p { color: #667085; line-height: 1.55; margin: 0 auto 1.5rem; max-width: 29rem; }
.eyebrow { color: #6941c6 !important; font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.error { color: #b42318 !important; margin: 1rem 0 0 !important; min-height: 1.5rem; }
.board-list { border-top: 1px solid #e4e7ec; margin-top: 1.75rem; padding-top: 1.25rem; text-align: left; }
.board-list h2 { font-size: 1rem; margin: 0 0 .75rem; }
.board-list p { font-size: .875rem; margin: 0; }
.board-list ul { display: grid; gap: .5rem; list-style: none; margin: .75rem 0 0; padding: 0; }
.board-list li { align-items: center; background: #f9fafb; border-radius: .5rem; display: flex; font-size: .875rem; justify-content: space-between; padding: .65rem .75rem; }
.board-list a { color: #53389e; font-weight: 700; }
.board-list span { color: #667085; }
.board-shell { height: calc(100vh - 3.75rem); overflow: hidden; position: relative; }
#board { cursor: grab; display: block; height: 100%; touch-action: none; width: 100%; }
#board:active { cursor: grabbing; }
.toolbar { background: #fff; border: 1px solid #d0d5dd; border-radius: .75rem; box-shadow: 0 4px 14px rgb(16 24 40 / 10%); display: grid; gap: .25rem; left: 1rem; padding: .35rem; position: fixed; top: 4.75rem; z-index: 1; }
.toolbar button { align-items: center; background: #fff; color: #344054; display: flex; font-size: .75rem; gap: .55rem; justify-content: flex-start; padding: .45rem .6rem; text-align: left; }
.toolbar button span:first-child { font-size: 1.25rem; line-height: 1; text-align: center; width: 1.25rem; }
.toolbar button.active { background: #f4ebff; color: #5925dc; font-weight: 700; }
.zoom-controls { background: #fff; border: 1px solid #d0d5dd; border-radius: .6rem; bottom: 1rem; box-shadow: 0 4px 14px rgb(16 24 40 / 10%); display: grid; gap: .15rem; padding: .25rem; position: fixed; right: 1rem; }
.zoom-controls button { background: #fff; color: #344054; font-size: 1.25rem; min-width: 2.2rem; }
output { color: #667085; font-size: .72rem; text-align: center; }
@media (max-width: 600px) { .topbar { padding: 0 .7rem; } #connection, #active-board { font-size: .75rem; } .topbar-actions { gap: .4rem; } .secondary { font-size: 0; min-width: 2.5rem; padding: 0; } .secondary::after { content: '↗'; font-size: 1.15rem; } .toolbar { bottom: 1rem; grid-template-columns: repeat(4, 1fr); left: .7rem; right: 4.6rem; top: auto; } .toolbar button { justify-content: center; padding: .5rem; } .toolbar button span:last-child { display: none; } .toolbar button span:first-child { font-size: 1.15rem; } .zoom-controls { bottom: 5.3rem; right: .7rem; } }