/* Mochiboard: an infinite canvas in the pastel studio style.
   Paper, a soft dot grid, loose tilted cards with wobbly hand-cut frames, DM Sans + Caveat. */
:root {
  --ink: #494848; --ink-soft: #8d8595; --ink-faint: #b9b2c2; --paper: #ffffff; --dot: #e3dcee;
  --blush: #ffecec; --pink: #ff9ec4; --pink-deep: #f27aa8; --butter: #fff5c8; --butter-deep: #f3d96a;
  --mint: #dcf5e7; --mint-deep: #7ad3a3; --lilac: #eadfff; --lilac-deep: #b89bff; --sky: #dcedff; --sky-deep: #8cc1ff;
  --peach: #ffe9d6; --peach-deep: #ffb48a; --coral: #ff9a7b; --select: #0d99ff;
  --font: "DM Sans", system-ui, -apple-system, sans-serif; --hand: "Caveat", "Comic Sans MS", cursive;
  --side: 232px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #fbf8fc; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
kbd { font: 500 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; background: #fff; border: 1px solid #e8e2ee; }

/* ---------- the floating boxes on the left ---------- */
.side { position: fixed; left: 14px; top: 14px; bottom: 14px; width: var(--side); z-index: 20; display: flex; flex-direction: column; gap: 10px; pointer-events: none; overflow: auto; scrollbar-width: none; }
.box { pointer-events: auto; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 20px; box-shadow: 0 8px 28px rgba(120, 80, 120, .12), 0 0 0 1px rgba(120, 80, 120, .05); padding: 12px; flex: none; }
.box header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; padding: 0 2px 0 6px; }
.box .box-body { padding-top: 8px; }
.box.min .box-body { display: none; }
.mini { width: 24px; height: 24px; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); font: 600 16px/1 var(--font); cursor: pointer; flex: none; }
.mini:hover { background: var(--blush); color: var(--ink); }
.label { font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.box-body > .label { margin: 4px 6px 8px; }
.brand { display: flex; align-items: center; gap: 9px; font: 800 17px/1 var(--font); letter-spacing: -.03em; }
.brand canvas { display: block; width: 26px; height: 23px; image-rendering: pixelated; margin-top: -5px; }   /* the goo sits low in her canvas, so lift her to line up with the word */
.boards, .templates { display: flex; flex-direction: column; gap: 1px; }
.board-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.board-row i { width: 9px; height: 9px; border-radius: 3px; flex: none; rotate: -6deg; }
.board-row:hover { background: #faf5fb; }
.board-row.on { background: var(--blush); font-weight: 700; }
.pill-btn { margin: 0; width: 100%; padding: 8px 10px; border: 1.5px dashed var(--ink-faint); border-radius: 12px; background: none; font-size: 12.5px; cursor: pointer; text-align: left; }
.pill-btn:hover { border-color: var(--ink); }
/* the shortcut hints, floating at the bottom left of the canvas */
.keys { position: absolute; left: calc(var(--side) + 28px); bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: calc(50% - var(--side) - 180px); font-size: 11.5px; color: var(--ink-soft); z-index: 10; }
.keys button { border: 0; background: none; color: var(--ink-faint); font-size: 16px; cursor: pointer; padding: 0 4px; }
.keys.hide { display: none; }

/* ---------- the stage ---------- */
.stage { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; cursor: default; }
.stage.panning, .stage.space { cursor: grab; } .stage.panning { cursor: grabbing; }
.grid { position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1.4px, transparent 1.8px); background-size: 26px 26px; pointer-events: none; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.wires { position: absolute; left: -5000px; top: -5000px; width: 10000px; height: 10000px; overflow: visible; pointer-events: none; }
.wires path { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wires path.dash { stroke-dasharray: 6 7; }
.wires path.on, .wires path.w-arrow.on { stroke: var(--select); }
.wires path.w-hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.wires path.w-hit:hover + path, .wires path.w:hover { stroke: var(--ink); }
.wires circle.w-end, .wires circle.w-bend { fill: #fff; stroke: var(--select); stroke-width: 2.5; pointer-events: all; cursor: grab; }
.wires circle.w-bend { fill: var(--select); stroke: #fff; }
.selbar .sb-txt { height: 34px; padding: 0 11px; border: 0; border-radius: 999px; background: none; font: 600 12px/1 var(--font); color: var(--ink-soft); cursor: pointer; }
.selbar .sb-txt:hover { background: var(--blush); color: var(--ink); }
.selbar .sb-txt.on { background: var(--ink); color: #fff; }
.wires path.live { stroke: var(--select); stroke-dasharray: none; }
.wires circle { fill: var(--ink-faint); }

/* ---------- cards ---------- */
.card { position: absolute; border-radius: 18px; --tilt: 0deg; rotate: var(--tilt); transition: rotate .25s ease, box-shadow .2s ease, opacity .3s ease; }
.card .frame { position: absolute; inset: 0; border-radius: 18px; background: var(--fill, #fff); filter: url(#wob); box-shadow: 0 10px 30px rgba(120, 80, 120, .10), 0 1px 3px rgba(0, 0, 0, .04); }
.card .body { position: relative; height: 100%; padding: 16px 18px; overflow: hidden; border-radius: 18px; }
.card:hover { z-index: 2; }
.card.dragging { rotate: 0deg; z-index: 50; }
.card.dragging .frame { box-shadow: 0 24px 50px rgba(120, 80, 120, .22); }
.card.sel::after { content: ""; position: absolute; inset: -7px; border: 2px solid var(--select); border-radius: 22px; pointer-events: none; }
.card .handle { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; border-radius: 5px; background: #fff; border: 2px solid var(--select); cursor: nwse-resize; opacity: 0; }
.card.sel .handle { opacity: 1; }
.card .knob { position: absolute; right: -9px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-faint); cursor: crosshair; opacity: 0; transition: opacity .15s; }
.card:hover .knob { opacity: 1; }
.card .knob:hover { border-color: var(--select); }
.card .tag { position: absolute; top: -12px; left: 14px; padding: 1px 10px 3px; border-radius: 999px; background: #fff; font: 700 15px/1.2 var(--hand); box-shadow: 0 3px 8px rgba(120, 80, 120, .12); rotate: -3deg; white-space: nowrap; }
.card.dim { opacity: .14; }

/* note */
.card.note .text { font-size: calc(15px * var(--fs, 1)); line-height: 1.45; white-space: pre-wrap; word-break: break-word; outline: none; min-height: 1em; }
.card.note .text:empty::before { content: "type something…"; color: var(--ink-faint); }
.card.editing .text { user-select: text; -webkit-user-select: text; cursor: text; }
/* title: big type, no frame */
.card.title .frame { display: none; }
.card.title .body { padding: 0; overflow: visible; }
.card.title .text { font: 800 calc(44px * var(--fs, 1))/1 var(--font); letter-spacing: -.04em; white-space: nowrap; outline: none; }
.card.title .text:empty::before { content: "Title"; color: var(--ink-faint); }
/* image */
.card.image .body { padding: 8px; }
.card.image img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; pointer-events: none; }
.card .chip { position: absolute; bottom: 14px; right: 14px; padding: 5px 11px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); font: 600 12px/1 var(--font); cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.card:hover .chip { opacity: 1; }
/* link */
.card.link .body { padding: 0; display: flex; flex-direction: column; }
.card.link .thumb { flex: 1; min-height: 0; background: var(--sky) center / cover; }
.card.link .meta { padding: 10px 14px 12px; }
.card.link .meta b { display: block; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.link .meta span { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* checklist */
.card.todo .head { font: 700 calc(22px * var(--fs, 1))/1 var(--hand); margin-bottom: 8px; outline: none; }
.card.todo .head:empty::before { content: "to do"; color: var(--ink-faint); }
.card.todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.card.todo li { display: flex; gap: 8px; align-items: flex-start; font-size: calc(14px * var(--fs, 1)); line-height: 1.35; }
.card.todo li input { margin: 2px 0 0; accent-color: var(--pink-deep); }
.card.todo li span { outline: none; flex: 1; }
.card.todo li.done span { text-decoration: line-through; color: var(--ink-faint); }
.card.todo .add-item { margin-top: 8px; font: 700 16px/1 var(--hand); color: var(--ink-soft); cursor: pointer; background: none; border: 0; padding: 0; }
/* swatch */
.card.swatch .body { padding: 8px; display: flex; flex-direction: column; }
.card.swatch .chipcol { flex: 1; border-radius: 12px; background: var(--hex); }
.card.swatch .hex { padding: 8px 4px 2px; display: grid; gap: 3px; }
.card.swatch .hex b { font: 700 12.5px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.swatch .hex span { font: 500 10px/1 var(--font); letter-spacing: .06em; color: var(--ink-soft); }

/* ---------- toolbar, top, zoom ---------- */
.top { position: absolute; left: calc(var(--side) + 34px); top: 22px; display: flex; align-items: baseline; gap: 10px; z-index: 10; }
.board-name { border: 0; background: none; font: 800 22px/1 var(--font); letter-spacing: -.03em; color: var(--ink); outline: none; width: 420px; user-select: text; -webkit-user-select: text; }
.saved { font: 600 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.tools { position: absolute; left: calc(50% + 8px); top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 8px 26px rgba(120, 80, 120, .14); z-index: 10; }
.tools button { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: none; font-size: 13px; font-weight: 500; cursor: pointer; }
.tools button:hover { background: var(--blush); }
.tools .ic { flex: none; color: var(--ink-soft); }
.tools button:hover .ic { color: var(--ink); }
.zoom { padding: 0 12px 0 8px; font-size: 12px; color: var(--ink-soft); min-width: 52px; text-align: right; }

/* ---------- unsorted tray ---------- */
.tray { position: absolute; right: 16px; top: 16px; bottom: 16px; width: 230px; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(120, 80, 120, .12); z-index: 10; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.tray.closed { transform: translateX(calc(100% - 46px)); }
.tray-head { display: flex; justify-content: space-between; align-items: center; min-height: 24px; cursor: pointer; }
.tray-head b { font: 700 12px/1 var(--font); padding: 4px 8px; border-radius: 999px; background: var(--butter); }
.tray-hint { margin: 8px 0 12px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.tray-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.tray-item { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 3px 10px rgba(120, 80, 120, .10); font-size: 13px; line-height: 1.35; cursor: grab; rotate: var(--tilt, 0deg); word-break: break-word; }
.tray-item img { width: 100%; border-radius: 8px; display: block; }
.tray-item:active { cursor: grabbing; }

/* ---------- Mochi ---------- */
.mochi { position: absolute; left: calc(50% + 8px); bottom: 22px; transform: translateX(-50%); z-index: 15; display: flex; flex-direction: column; align-items: center; }
.m-pill { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 10px; border-radius: 999px; background: rgba(40, 40, 48, .94); color: #fff; box-shadow: 0 12px 30px rgba(40, 20, 60, .3); cursor: pointer; transition: width .35s cubic-bezier(.2, .8, .3, 1); }
.m-pill canvas { width: 40px; height: 35px; image-rendering: pixelated; }
.m-name { font: 600 15px/1 var(--font); }
.m-form { display: none; }
.mochi.open .m-name { display: none; }
.mochi.open .m-form { display: block; }
.m-form input { width: 440px; border: 0; background: none; color: #fff; font: 15px/1 var(--font); outline: none; }
.m-form input::placeholder { color: rgba(255, 255, 255, .45); }
.mochi.thinking .m-name::after { content: " · thinking…"; color: #7fd8ff; }
.m-bubble { max-width: 460px; margin-bottom: 12px; padding: 12px 16px 14px; border-radius: 20px; background: rgba(40, 40, 48, .94); color: #fff; font-size: 14px; line-height: 1.5; box-shadow: 0 12px 30px rgba(40, 20, 60, .25); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .3, 1); pointer-events: none; }
.m-bubble.on { opacity: 1; transform: none; pointer-events: auto; }
.m-bubble small { display: block; margin-bottom: 6px; font: 700 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #7fd8ff; }
.m-bubble p { margin: 0; white-space: pre-wrap; }

/* ---------- quick capture, marquee, focus ---------- */
.capture { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) scale(.96); width: 560px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(120, 80, 120, .25); z-index: 30; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .3, 1); }
.capture.on { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.capture input { width: 100%; padding: 14px 16px; border: 0; font: 17px/1 var(--font); outline: none; border-radius: 14px; background: var(--blush); }
.marquee { position: absolute; border: 1.5px solid var(--select); background: rgba(13, 153, 255, .08); border-radius: 6px; display: none; pointer-events: none; z-index: 9; }
.focus-veil { display: none; }
.card.pop { animation: pop .5s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* inside the Mac app: room for the window buttons at the top of the sidebar */
html.native .side { top: 38px; }   /* below the window buttons */
html.native .top { top: 18px; }

/* Mochi's helpers in the sidebar */
.conns { display: flex; flex-direction: column; gap: 2px; }
.conn { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 10px; font-size: 13px; }
.conn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.conn.on .dot { background: var(--mint-deep); box-shadow: 0 0 0 3px var(--mint); }
.conn em { margin-left: auto; font: 600 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--mint-deep); font-style: normal; }
.conn button { margin-left: auto; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: none; font: 600 11px/1 var(--font); cursor: pointer; }
.conn button:hover { background: var(--ink); color: #fff; }
/* buttons inside Mochi's bubble */
.m-acts { display: flex; gap: 8px; margin-top: 10px; }
.m-acts:empty { display: none; }
.m-acts button { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #fff; background: #fff; color: #222; font: 600 12px/1 var(--font); cursor: pointer; }
.m-acts button.ghost { background: none; color: #fff; }
.card .tag.src { font: 600 11px/1.3 var(--font); padding: 4px 9px 5px; rotate: -2deg; }

/* the board's own palette (left box) */
.palette { display: flex; flex-direction: column; gap: 2px; }
.pal { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.pal:hover { background: #faf5fb; }
.pal i { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pal span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; }
.pal span[contenteditable="true"] { background: #fff; box-shadow: 0 0 0 1.5px var(--select); border-radius: 4px; padding: 0 3px; cursor: text; user-select: text; -webkit-user-select: text; }
.pal small { font: 500 10px/1 var(--font); letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; }
.pal .pal-x, .pal .pal-ed { opacity: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: 0 2px; font-size: 13px; }
.pal:hover .pal-x, .pal:hover .pal-ed { opacity: 1; }
.pal:hover small { display: none; }
.palette-empty { padding: 4px 8px 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
/* the color editor: a wheel of hues fading to white in the middle, a brightness slider, the hex and the name */
.cpop { position: absolute; z-index: 40; width: 252px; padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(120, 80, 120, .26), 0 0 0 1px rgba(120, 80, 120, .06); display: none; }
.cpop.on { display: block; animation: pop .3s cubic-bezier(.2, .9, .3, 1.3) both; }
.wheel { position: relative; width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; cursor: crosshair; touch-action: none; }
.wheel canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
.ring { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 3px 8px rgba(0, 0, 0, .25); pointer-events: none; }
.bright { position: relative; height: 16px; margin: 16px 2px 14px; border-radius: 999px; cursor: pointer; touch-action: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.bright .ring { top: 50%; }
.cp-row { display: flex; gap: 10px; align-items: center; }
.cp-dot { width: 44px; height: 44px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cp-fields { display: grid; gap: 6px; flex: 1; min-width: 0; }
.cp-fields input { width: 100%; padding: 8px 10px; border: 1.5px solid #eee5f0; border-radius: 10px; font: 500 13px/1 var(--font); color: var(--ink); outline: none; user-select: text; -webkit-user-select: text; }
.cp-fields input:focus { border-color: var(--select); }
#cpHex { font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .04em; }
.cp-quick { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 12px; }
.cp-quick:empty { display: none; }
.cp-quick button { width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .15s; }
.cp-quick button:hover { transform: scale(1.15); }
.cp-acts { display: flex; gap: 8px; margin-top: 4px; }
.cp-acts button { flex: 1; padding: 9px 10px; border-radius: 999px; border: 1.5px solid var(--ink); background: none; font: 600 12px/1 var(--font); cursor: pointer; }
.cp-acts .solid { background: var(--ink); color: #fff; }
.cp-acts .saved-ok { background: var(--mint-deep); border-color: var(--mint-deep); }

/* the tree in the left box: projects ▸ folders ▸ boards */
.new-row { display: flex; gap: 5px; margin-top: 6px; }
.new-row .pill-btn { flex: 1; padding: 8px 6px; text-align: center; font-size: 12px; }
.box header .home-btn { margin-left: auto; font-size: 15px; }
.node-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font: 600 13.5px/1.2 var(--font); }
.node.project > .node-head { font-weight: 700; }
.node-head:hover { background: #faf5fb; }
.node-head .chev { width: 10px; flex: none; color: var(--ink-faint); font-size: 9px; transition: rotate .2s; }
.node.open > .node-head .chev { rotate: 90deg; }
.fic { width: 17px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 14'%3E%3Cpath d='M1.5 3A1.6 1.6 0 0 1 3.1 1.4h3.3c.5 0 .9.2 1.2.6l.9 1.1h5.4a1.6 1.6 0 0 1 1.6 1.6v6.8a1.6 1.6 0 0 1-1.6 1.6H3.1a1.6 1.6 0 0 1-1.6-1.6z' fill='%23fff' stroke='%23494848' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pic { width: 14px; height: 14px; flex: none; border-radius: 5px; rotate: -6deg; box-shadow: 3px -3px 0 -1px #fff, 3px -3px 0 0 rgba(0, 0, 0, .12); }
.node-head .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; }
[contenteditable="true"].fname, .tile b[contenteditable="true"] { background: #fff; box-shadow: 0 0 0 1.5px var(--select); border-radius: 4px; padding: 0 3px; cursor: text; user-select: text; -webkit-user-select: text; outline: none; }
.node-head small { font: 500 11px/1 var(--font); color: var(--ink-faint); }
.f-btn { display: none; border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: 0 2px; font-size: 13px; }
.node-head:hover > .f-btn { display: block; }
.node-head:hover > small { display: none; }
.node-body { display: none; flex-direction: column; gap: 1px; margin-left: 13px; padding-left: 8px; border-left: 1.5px dashed #eadfee; }
.node.open > .node-body { display: flex; }
.folder-empty { padding: 5px 8px; font-size: 12px; color: var(--ink-faint); }
.drop, .node-head.drop { background: var(--blush) !important; box-shadow: inset 0 0 0 1.5px var(--pink); }
.loose-zone { border-radius: 10px; min-height: 6px; }
.dragging { opacity: .4; }
/* breadcrumbs above the board name */
.top { flex-direction: column; align-items: flex-start; gap: 4px; }
.top .saved { position: absolute; left: 1px; top: calc(100% + 6px); white-space: nowrap; }
.crumbs button:first-child { flex: none; max-width: none; }
.crumbs { max-width: 100%; overflow: hidden; display: flex; align-items: center; gap: 4px; font: 600 11.5px/1 var(--font); color: var(--ink-soft); }
.crumbs button { flex: 0 1 auto; min-width: 0; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 3px 6px; margin: 0 -2px; border-radius: 7px; font: inherit; color: inherit; cursor: pointer; }
.crumbs button:hover { background: #fff; color: var(--ink); }
.crumbs i { font-style: normal; color: var(--ink-faint); }
/* home: the zoomed-out library */
.home { position: absolute; inset: 0; z-index: 12; overflow: auto; background: var(--bg, #fdf7fb); background-image: radial-gradient(#e9d9e6 1.2px, transparent 1.2px); background-size: 22px 22px;
  opacity: 0; pointer-events: none; transform: scale(1.04); transition: opacity .28s, transform .38s cubic-bezier(.2, .8, .3, 1); }
.home.on { opacity: 1; pointer-events: auto; transform: none; }
.home-in { padding: 34px 48px 140px calc(var(--side) + 62px); max-width: 1500px; }
html.native .home-in { padding-top: 40px; }
.home-crumbs { display: flex; align-items: center; gap: 4px; font: 600 12px/1 var(--font); color: var(--ink-soft); }
.home-crumbs button { border: 0; background: none; padding: 4px 7px; margin: 0 -3px; border-radius: 8px; font: inherit; color: inherit; cursor: pointer; }
.home-crumbs button:hover { background: #fff; color: var(--ink); }
.home-crumbs button:last-child { color: var(--ink); }
.home-crumbs i { font-style: normal; color: var(--ink-faint); }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 14px 0 34px; }
.home-head h1 { margin: 0; font: 800 46px/1 var(--font); letter-spacing: -.045em; }
.home-head p { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.home-close { padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: none; font: 600 13px/1 var(--font); cursor: pointer; }
.home-close:hover { background: var(--ink); color: #fff; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 26px; }
.home-sec { grid-column: 1 / -1; margin-top: 18px; font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tile { position: relative; background: #fff; border-radius: 22px; padding: 10px; cursor: pointer; box-shadow: 0 10px 30px rgba(120, 80, 120, .12); transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s, rotate .25s; }
.tile:hover { transform: translateY(-4px); rotate: 0deg !important; box-shadow: 0 18px 40px rgba(120, 80, 120, .2); }
.tile-art { height: 160px; border-radius: 15px; background: #faf5fb; overflow: hidden; position: relative; display: grid; place-items: center; }
.tile-art svg { width: 100%; height: 100%; }
.tile-art em { font: 500 12px/1 var(--font); color: var(--ink-faint); font-style: normal; }
.tile-meta { display: flex; align-items: center; gap: 6px; padding: 12px 6px 4px; flex-wrap: wrap; }
.tile-meta b { font: 700 15px/1.2 var(--font); letter-spacing: -.01em; flex: 1 1 100%; min-width: 0; }
.tile-meta small { font-size: 12px; color: var(--ink-soft); flex: 1; }
.tile:hover .f-btn { display: block; }
.tile .f-btn { font-size: 14px; }
/* a project tile: its color, with its folders listed like tabs */
.tile.project .tile-art { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 16px; }
.tile.project .mf { display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .78); font: 600 12px/1 var(--font); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.project .mf i { width: 13px; height: 11px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 14'%3E%3Cpath d='M1.5 3A1.6 1.6 0 0 1 3.1 1.4h3.3c.5 0 .9.2 1.2.6l.9 1.1h5.4a1.6 1.6 0 0 1 1.6 1.6v6.8a1.6 1.6 0 0 1-1.6 1.6H3.1a1.6 1.6 0 0 1-1.6-1.6z' fill='%23fff' stroke='%23494848' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* a folder tile: a soft white folder, its boards peeking out the top */
.tile.folder { background: none; box-shadow: none; padding: 0; }
.tile.folder:hover { box-shadow: none; }
.tile.folder .tile-art { background: none; overflow: visible; height: 182px; }
.tile.folder .tile-art .back { position: absolute; left: 0; right: 0; top: 22px; bottom: 0; border-radius: 6px 22px 22px 22px; background: #f4ecf3; }
.tile.folder .tile-art .tab { position: absolute; left: 0; top: 4px; width: 44%; height: 40px; border-radius: 16px 18px 0 0; background: #f4ecf3; }
.tile.folder .tile-art .tab::after { content: ""; position: absolute; right: -16px; bottom: 0; width: 18px; height: 18px; background: radial-gradient(circle at 100% 0, transparent 17px, #f4ecf3 17.5px); }
.tile.folder .peek { position: absolute; left: 9%; right: 9%; top: 34px; bottom: 34px; z-index: 1; }
.tile.folder .tile-art .front { position: absolute; left: -1px; right: -1px; bottom: 0; height: 118px; z-index: 2; border-radius: 20px; background: #fff; box-shadow: 0 -2px 0 rgba(255, 255, 255, .8), 0 10px 30px rgba(120, 80, 120, .14); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.2, .9, .3, 1.3); display: grid; place-items: center; }
.tile.folder:hover .tile-art .front { transform: perspective(500px) rotateX(-14deg); }
.tile.folder .front .face { width: 30px; height: 18px; position: relative; opacity: .55; }
.tile.folder .front .face::before, .tile.folder .front .face::after { content: ""; position: absolute; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.tile.folder .front .face::before { left: 4px; } .tile.folder .front .face::after { right: 4px; }
.tile.folder .front .face i { position: absolute; left: 50%; top: 8px; width: 10px; height: 5px; margin-left: -5px; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 8px 8px; }
.tile.folder .front .face b { position: absolute; top: 8px; width: 6px; height: 4px; border-radius: 50%; background: #ffb3cf; }
.tile.folder .front .face b:first-of-type { left: -3px; } .tile.folder .front .face b:last-of-type { right: -3px; }
.tile.folder .paper { position: absolute; inset: 0; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(120, 80, 120, .12); transform: translate(calc(var(--i) * 12px - 12px), calc(var(--i) * -6px)) rotate(calc(var(--i) * 4deg - 4deg)); transition: transform .3s cubic-bezier(.2, .9, .3, 1.3); overflow: hidden; }
.tile.folder:hover .paper { transform: translate(calc(var(--i) * 22px - 22px), calc(var(--i) * -6px - 16px)) rotate(calc(var(--i) * 6deg - 6deg)); }
.tile.folder .tile-meta { padding: 12px 6px 0; }
.tile.folder.drop .front { box-shadow: 0 0 0 3px var(--pink), 0 10px 30px rgba(120, 80, 120, .14); }
.tile.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; border: 2px dashed #e4d4e2; background: rgba(255, 255, 255, .5); box-shadow: none; font: 600 13px/1 var(--font); color: var(--ink-soft); }
.tile.add span { font: 300 34px/1 var(--font); }
.tile.add:hover { border-color: var(--ink); color: var(--ink); }
.top { max-width: max(160px, calc(50% - var(--side) - 300px)); }
.board-name { width: 100%; min-width: 0; text-overflow: ellipsis; }

/* the bar above the selection */
.selbar { position: absolute; z-index: 14; display: none; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 10px 28px rgba(120, 80, 120, .2); transform: translate(-50%, -100%); white-space: nowrap; }
.selbar.on { display: flex; }
.selbar button { border: 0; background: none; padding: 7px 11px; border-radius: 999px; font: 600 12px/1 var(--font); color: var(--ink); cursor: pointer; }
.selbar button:hover { background: var(--blush); }
.selbar .sb-del { font-size: 16px; padding: 4px 10px; color: var(--ink-soft); }
.sb-dots { display: flex; gap: 4px; padding: 0 4px 0 6px; }
.sb-dots:empty, .sb-dots:empty + .sb-sep { display: none; }
.sb-dots button { width: 18px; height: 18px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.sb-dots button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--select); }
.sb-dots button:hover { transform: scale(1.15); background: revert-layer; }
.sb-sep { width: 1px; height: 18px; background: #eee5f0; margin: 0 3px; }
.card .tag { cursor: text; outline: none; }

/* home is one click away: the logo, or the "All projects" row */
.brand { cursor: pointer; border-radius: 10px; padding: 2px 6px 2px 2px; margin-left: -2px; }
.brand:hover { background: #faf5fb; }
.home-row { display: flex; align-items: center; gap: 9px; width: 100%; margin: 2px 0 10px; padding: 9px 10px; border: 0; border-radius: 12px; background: #faf5fb; font: 600 13.5px/1 var(--font); color: var(--ink); cursor: pointer; }
.home-row:hover { background: var(--blush); }
.home-back { display: none; margin: 0 0 6px -4px; padding: 9px 16px 9px 13px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(120, 80, 120, .14); font: 700 13px/1 var(--font); color: var(--ink); cursor: pointer; }
.home-back:hover { background: var(--ink); color: #fff; }
.home.deep .home-back { display: inline-block; }
.home-nav { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.home-back { margin: 0; }
/* project covers: an image you choose, or a peek at the project's first board */
.tile.project .tile-art.cover { padding: 0; background-size: cover !important; background-position: center !important; }
.tile.project .tile-art.peekboard { padding: 0; background: #fff !important; }
.tile.project .tile-art.peekboard svg { position: absolute; inset: 0; }
.tile.project .tile-art .chips { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.tile .cover-btn { position: absolute; top: 18px; right: 18px; z-index: 3; display: none; padding: 7px 11px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); font: 600 11.5px/1 var(--font); color: var(--ink); cursor: pointer; }
.tile:hover .cover-btn { display: block; }
.cover-menu { position: absolute; top: 50px; right: 18px; z-index: 4; display: flex; flex-direction: column; padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(120, 80, 120, .22); }
.cover-menu button { padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font: 600 12px/1 var(--font); color: var(--ink); cursor: pointer; white-space: nowrap; }
.cover-menu button:hover { background: var(--blush); }
/* Unsorted hugs its ideas: small when empty, grows as ideas come in, scrolls once it reaches the bottom */
.tray { bottom: auto; max-height: calc(100% - 32px); }
.tray-list { flex: 0 1 auto; min-height: 0; overflow: auto; }
/* the shortcut hints sit in one quiet line at the far bottom left, under the floating boxes */
.side { bottom: 50px; }
.keys { left: 22px; bottom: 16px; max-width: none; flex-wrap: nowrap; white-space: nowrap; gap: 10px; font-size: 11px; }

.linkbox { position: absolute; left: calc(50% + 8px); top: 74px; transform: translateX(-50%) scale(.97); z-index: 30; display: flex; gap: 6px; width: 420px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 16px 40px rgba(120, 80, 120, .22); opacity: 0; pointer-events: none; transition: opacity .18s, transform .22s cubic-bezier(.2, .8, .3, 1); }
.linkbox.on { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.linkbox input { flex: 1; min-width: 0; padding: 9px 14px; border: 0; outline: none; font: 500 13.5px/1 var(--font); color: var(--ink); background: none; user-select: text; -webkit-user-select: text; }
.linkbox button { padding: 9px 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font); cursor: pointer; }

/* the toolbar is icons only; its name floats up on hover */
.tools { gap: 2px; }
.tools button { position: relative; width: 40px; height: 38px; padding: 0; justify-content: center; }
.tools .ic { width: 19px; height: 19px; }
.tools button::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -3px); padding: 6px 10px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 11px/1 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.tools button:hover::after { opacity: 1; transform: translate(-50%, 0); }
.tools .zoom { padding: 0 10px 0 6px; }

/* ---------- the dock at the bottom: tools + Mochi ---------- */
.dock { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 15; display: flex; align-items: flex-end; gap: 10px; }
.dock .tools { position: static; transform: none; left: auto; top: auto; }
.dock .tools button::after { top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 3px); }
.dock .tools button:hover::after { transform: translate(-50%, 0); }
.dock .tools button.on { background: var(--blush); }
.dock .tools button.on .ic { color: var(--ink); }
.dock.ctx .tools { display: none; }
.dock .mochi { position: relative; left: auto; bottom: auto; transform: none; }
.dock .m-bubble { position: absolute; right: 0; bottom: calc(100% + 12px); margin: 0; width: max-content; }
.dock .selbar { position: static; transform: none; height: 50px; padding: 6px; box-shadow: 0 8px 26px rgba(120, 80, 120, .14); }
.selbar .sb-ic { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
.selbar .sb-ic svg { width: 18px; height: 18px; }
.selbar button.on { background: var(--blush); }
.selbar .sb-label { font: 600 12px/1 var(--font); color: var(--ink-soft); padding: 0 8px 0 10px; }
.linkbox { top: auto; bottom: 84px; }
.top { max-width: calc(100% - var(--side) - 340px); }
.side { bottom: 84px; }
.keys { left: 22px; bottom: 14px; width: var(--side); flex-wrap: wrap; white-space: normal; gap: 4px 10px; }
/* placing: the new thing rides on the cursor until you click */
.stage.placing, .stage.placing * { cursor: copy !important; }
.ghost { position: absolute; z-index: 40; pointer-events: none; display: none; border-radius: 16px; background: rgba(255, 255, 255, .85); box-shadow: 0 14px 34px rgba(120, 80, 120, .22), 0 0 0 1.5px var(--select); transform-origin: 0 0; }
.ghost.on { display: block; }
.ghost span { position: absolute; left: 14px; top: 12px; font: 600 13px/1 var(--font); color: var(--ink-soft); }
.ghost.coll { background: none; box-shadow: none; }
.ghost.coll::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 14px; background: #ffb8d2; opacity: .9; }
.ghost.coll::after { content: ""; position: absolute; left: 0; right: 0; top: 52px; bottom: 0; border-radius: 18px; background: #ffe3ee; opacity: .9; box-shadow: 0 14px 34px rgba(120, 80, 120, .18); }
.ghost.coll span { top: 13px; left: 50%; transform: translateX(-50%); z-index: 1; color: var(--ink); }
/* notes have a name above the words */
.card.note .nname { font: 700 calc(15px * var(--fs, 1))/1.3 var(--font); margin-bottom: 6px; outline: none; min-height: 1em; }
.card.note .nname:empty { display: none; }
.card.note.sel .nname:empty, .card.note.editing .nname:empty { display: block; }
.card.note .nname:empty::before { content: "Card name"; color: var(--ink-faint); font-weight: 600; }
.card.note .text:empty::before { content: "Type something…"; }
/* ---------- collections: a named header over a frame that stacks its cards ---------- */
.card.coll { z-index: 0 !important; rotate: 0deg !important; }
.card.coll > .frame { display: none; }
.card.coll > .body { padding: 0; overflow: visible; }
.coll-head { position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 14px; background: var(--chead); display: grid; place-items: center; padding: 0 16px; cursor: grab; }
.coll-head .text { font: 700 calc(15px * var(--fs, 1))/1.2 var(--font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; outline: none; min-width: 2em; }
.coll-head .text:empty::before { content: "Name…"; color: rgba(73, 72, 72, .45); }
.coll-frame { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; border-radius: 22px; background: var(--cframe); }
.coll-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; filter: url(#wob); background: inherit; }
.card.coll.nohead .coll-head { display: none; }
.card.coll.nohead .coll-frame { top: 0; }
.coll-empty { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; display: grid; place-items: center; font: 600 12px/1 var(--font); color: rgba(73, 72, 72, .45); pointer-events: none; }
.card.coll.nohead .coll-empty { top: 0; }
.card.coll.drop-in .coll-frame { box-shadow: 0 0 0 3px var(--select); }
.card.coll.drop-col .coll-frame { box-shadow: 6px 0 0 0 var(--select); }
.card.coll.sel::after { inset: -6px; }
.card.inside { rotate: 0deg !important; }
.card.inside.dragging { rotate: -1.5deg !important; }

/* ---------- round 2: docs, canvases, links you type into, shapes ---------- */
/* a doc is a little pill with a page icon */
.card.doc .body, .card.canvas .body { padding: 0; }
.card.doc .pill { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 16px; }
.card .cic { width: 20px; height: 20px; flex: none; color: var(--ink-soft); }
.card.doc .text, .card.canvas .text { font: 600 14px/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; min-width: 2em; }
.card.doc .text:empty::before { content: "Untitled"; color: var(--ink-faint); }
.card.doc.has-body .pill::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); margin-left: auto; flex: none; }
/* a canvas card: a board inside this board */
.card.canvas .cv-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.card.canvas .text:empty::before { content: "Untitled canvas"; color: var(--ink-faint); }
.card.canvas .cv-prev { position: absolute; left: 12px; right: 12px; top: 48px; bottom: 12px; border-radius: 12px; background: #faf5fb; display: grid; place-items: center; overflow: hidden; }
.card.canvas .cv-prev svg { width: 100%; height: 100%; }
.card.canvas .cv-prev em { font: 600 12px/1 var(--font); color: var(--ink-faint); font-style: normal; }
/* a link you type right into */
.card.link .link-in { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 14px; }
.card.link .link-in input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 500 14px/1 var(--font); color: var(--ink); user-select: text; -webkit-user-select: text; }
.card.link .link-in.loading input { color: var(--ink-faint); }
.card.link .meta { display: flex; align-items: center; gap: 10px; }
.card.link .meta .fav { width: 20px; height: 20px; border-radius: 5px; flex: none; background: #f2ecf3 center / cover; }
.card.link .meta > div { min-width: 0; flex: 1; }
.card.link.compact .thumb { display: none; }
.card.link.compact .meta { height: 100%; padding: 0 14px; }
/* shapes */
.card.shape > .frame { display: none; }
.card.shape .body { padding: 0; overflow: visible; display: grid; place-items: center; }
.card.shape svg.sh { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: url(#wob); }
.card.shape .text { position: relative; max-width: 80%; text-align: center; font: 600 calc(15px * var(--fs, 1))/1.3 var(--font); outline: none; white-space: pre-wrap; }
.shapepick { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(6px); z-index: 16; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 10px 28px rgba(120, 80, 120, .18); opacity: 0; pointer-events: none; transition: opacity .15s, transform .2s cubic-bezier(.2, .8, .3, 1); }
.shapepick.on { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.shapepick button { width: 38px; height: 38px; border: 0; border-radius: 999px; background: none; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); }
.shapepick button:hover, .shapepick button.on { background: var(--blush); color: var(--ink); }
.shapepick svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ghost.shape { background: rgba(228, 223, 231, .8); }
.ghost.doc span, .ghost.link span { top: 50%; transform: translateY(-50%); }
/* the doc viewer: half the window beside the board, or the full page */
.docview { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 22; display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 50px rgba(120, 80, 120, .14); transform: translateX(104%); transition: transform .35s cubic-bezier(.2, .8, .3, 1), width .35s cubic-bezier(.2, .8, .3, 1); }
.docview.on { transform: none; }
.docview.wide { width: 100%; }
.dv-bar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; }
html.native .dv-bar { padding-top: 14px; }
.dv-back { padding: 9px 15px 9px 12px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font); cursor: pointer; }
.dv-back:hover { background: #2f2f2f; }
.dv-where { flex: 1; min-width: 0; font: 600 12px/1 var(--font); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-btn { width: 34px; height: 34px; border: 0; border-radius: 999px; background: #f6f1f7; font: 500 17px/1 var(--font); color: var(--ink); cursor: pointer; }
.dv-btn:hover { background: var(--blush); }
.dv-page { flex: 1; overflow: auto; padding: 40px 12% 120px; }
.docview.wide .dv-page { padding-left: calc(var(--side) + 12%); }
.dv-title { width: 100%; border: 0; outline: none; background: none; font: 800 36px/1.1 var(--font); letter-spacing: -.035em; color: var(--ink); margin-bottom: 18px; user-select: text; -webkit-user-select: text; }
.dv-title::placeholder { color: var(--ink-faint); }
.dv-body { min-height: 60vh; outline: none; font: 400 16px/1.7 var(--font); color: var(--ink); white-space: pre-wrap; user-select: text; -webkit-user-select: text; cursor: text; }
.dv-body:empty::before { content: attr(data-ph); color: var(--ink-faint); }
/* with a doc open, the tools step aside but Mochi's bubble (and its Undo) still shows on top */
.stage.doc-open .dock { z-index: 24; }
.stage.doc-open .dock .tools, .stage.doc-open .dock .selbar, .stage.doc-open .dock .m-pill, .stage.doc-open .shapepick { opacity: 0; pointer-events: none; }
/* on the All projects pages the board tools hide; Mochi stays to help organize */
.stage.at-home .dock .tools, .stage.at-home .dock .selbar, .stage.at-home .shapepick { display: none; }
.sub-boards { margin-left: 16px; padding-left: 8px; border-left: 1.5px dashed #eadfee; display: flex; flex-direction: column; gap: 1px; }
.sub-boards .board-row { font-size: 13px; }
/* full-page docs: keep the bar clear of the floating boxes on the left */
.docview.wide .dv-bar { padding-left: calc(var(--side) + 30px); }
.card.doc.drop-in .frame { box-shadow: 0 0 0 3px var(--select), 0 10px 30px rgba(120, 80, 120, .1); }
.docview.drop .dv-page { box-shadow: inset 0 0 0 3px var(--select); background: #f7fbff; }

/* right-click menu in the left box */
.row-menu { position: fixed; z-index: 100; min-width: 150px; max-width: 240px; padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 14px 36px rgba(120, 80, 120, .24), 0 0 0 1px rgba(120, 80, 120, .06); display: flex; flex-direction: column; }
.row-menu button { padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font: 600 12.5px/1 var(--font); color: var(--ink); cursor: pointer; }
.row-menu button:hover { background: var(--blush); }
.row-menu .danger { color: #d6455d; }
.row-menu p { margin: 6px 8px 10px; font: 500 12.5px/1.45 var(--font); color: var(--ink); }
.row-menu div { display: flex; gap: 6px; padding: 0 4px 4px; }
.row-menu div button { flex: 1; text-align: center; border: 1.5px solid #eee5f0; }
.row-menu .danger.solid { background: #e0566d; border-color: #e0566d; color: #fff; }
.board-row span[contenteditable="true"] { background: #fff; box-shadow: 0 0 0 1.5px var(--select); border-radius: 4px; padding: 0 3px; outline: none; cursor: text; user-select: text; -webkit-user-select: text; }

/* ---------- stamps (like FigJam's wheel) ---------- */
.wheel-stamps { position: absolute; bottom: 80px; z-index: 17; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: #fff; box-shadow: 0 16px 44px rgba(120, 80, 120, .24), 0 0 0 1px rgba(120, 80, 120, .06); opacity: 0; pointer-events: none; transform: scale(.85); transition: opacity .15s, transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.wheel-stamps.on { opacity: 1; pointer-events: auto; transform: none; }
.ws-ring button { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; font-size: 30px; line-height: 1; transition: transform .15s, background .15s; }
.ws-ring button:hover { background: var(--blush); transform: scale(1.15); }
.ws-ring img, .sp-grid img { width: 40px; height: 40px; image-rendering: pixelated; pointer-events: none; }
.ws-mid { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; border-radius: 50%; background: #e9f4ff; font: 300 30px/1 var(--font); color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(13, 153, 255, .15); }
.ws-mid:hover { background: #d9ecff; }
.stamp-pick { position: absolute; bottom: 80px; z-index: 18; width: 340px; margin-left: -170px; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 16px 44px rgba(120, 80, 120, .24); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .15s, transform .2s cubic-bezier(.2, .8, .3, 1); }
.stamp-pick.on { opacity: 1; pointer-events: auto; transform: none; }
.sp-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.sp-tabs button { flex: 1; padding: 8px 6px; border: 0; border-radius: 999px; background: none; font: 600 12px/1 var(--font); color: var(--ink-soft); cursor: pointer; }
.sp-tabs button.on { background: var(--blush); color: var(--ink); }
.sp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-height: 260px; overflow: auto; }
.sp-grid button { aspect-ratio: 1; border: 0; border-radius: 12px; background: none; display: grid; place-items: center; font-size: 28px; line-height: 1; cursor: pointer; }
.sp-grid button:hover { background: var(--blush); }
/* a stamp on the board: a little sticker with a white edge */
.card.stamp > .frame { display: none; }
.card.stamp { rotate: 0deg; }
.card.stamp .body { padding: 0; overflow: visible; display: grid; place-items: center; }
.card.stamp .st { width: 100%; height: 100%; display: grid; place-items: center; filter: drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 6px rgba(120, 80, 120, .2)); }
.card.stamp .st img { width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.card.stamp .st span { font-size: calc(var(--sz, 56px) * .82); line-height: 1; }
.card.stamp .knob { display: none; }
.ghost.stamp { background: none; box-shadow: none; display: none; }
.ghost.stamp.on { display: grid; place-items: center; opacity: .85; }
.ghost.stamp img { width: 100%; height: 100%; image-rendering: pixelated; }
.ghost.stamp span { position: static; font-size: 46px; line-height: 1; color: initial; }
/* the little burst when a stamp lands */
.burst { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -1.5px; top: -9px; width: 3px; height: 9px; border-radius: 2px; background: var(--ink); transform-origin: 1.5px 9px; animation: burst .45s ease-out forwards; }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-26px) scaleY(.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-44px) scaleY(1); } }
.card.stamp.pop .st { animation: stampin .35s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes stampin { from { transform: scale(1.5); } to { transform: none; } }
/* moving Mochis */
.mv-wiggle .st img, .sp-grid .mv-wiggle img, .ws-ring .mv-wiggle img { animation: mv-wiggle 1s ease-in-out infinite; }
.mv-hop .st img, .sp-grid .mv-hop img, .ws-ring .mv-hop img { animation: mv-hop .9s cubic-bezier(.3, 0, .3, 1) infinite; }
.mv-shake .st img, .sp-grid .mv-shake img { animation: mv-shake .35s linear infinite; }
.mv-float .st img, .sp-grid .mv-float img { animation: mv-float 2.2s ease-in-out infinite; }
.mv-pulse .st img, .sp-grid .mv-pulse img, .ws-ring .mv-pulse img { animation: mv-pulse 1.1s ease-in-out infinite; }
.mv-squish .st img, .sp-grid .mv-squish img { animation: mv-squish 1s ease-in-out infinite; transform-origin: 50% 100%; }
.mv-spin .st img, .sp-grid .mv-spin img { animation: mv-spin 1.6s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes mv-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes mv-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22%); } 60% { transform: translateY(-22%) rotate(4deg); } }
@keyframes mv-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5%); } 75% { transform: translateX(5%); } }
@keyframes mv-float { 0%, 100% { transform: translateY(4%); } 50% { transform: translateY(-8%); } }
@keyframes mv-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes mv-squish { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(1.15, .85); } 60% { transform: scale(.92, 1.1); } }
@keyframes mv-spin { 0% { transform: rotate(0); } 60%, 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .card.stamp .st img { animation: none !important; } }
.dock .tools button.on::after { display: none; }
.crumbs:empty { display: none; }
.crumbs button:first-child { margin-left: -6px; }

/* text sizes: S M L XL in the selection toolbar */
.sb-sizes { display: flex; gap: 1px; padding: 0 2px; }
.sb-sizes button { min-width: 30px; height: 34px; padding: 0 7px; border: 0; border-radius: 999px; background: none; font: 700 11.5px/1 var(--font); color: var(--ink-soft); cursor: pointer; }
.sb-sizes button:hover { background: var(--blush); color: var(--ink); }
.sb-sizes button.on { background: var(--ink); color: #fff; }

/* bold / italic / underline / strikethrough, for the whole card's words */
.card :is(.text, .nname, .head, li span) { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.card.t-bold :is(.text, .nname, .head, li span) { font-weight: 800; }
.card.t-nobold :is(.text, .nname, .head, li span) { font-weight: 400; }
.card.t-italic :is(.text, .nname, .head, li span) { font-style: italic; }
.card.t-under :is(.text, .nname, .head, li span) { text-decoration-line: underline; }
.card.t-strike :is(.text, .nname, .head, li span) { text-decoration-line: line-through; }
.card.t-under.t-strike :is(.text, .nname, .head, li span) { text-decoration-line: underline line-through; }
.sb-style button { font-family: Georgia, serif; font-size: 14px; min-width: 30px; }
.sb-style button b { font-weight: 800; } .sb-style button i { font-style: italic; }
.card .nname:empty, .card .text:empty { text-decoration-line: none !important; font-style: normal !important; }

/* ---------- settings ---------- */
.box header .gear { margin-left: auto; display: grid; place-items: center; }
.box header .gear + .mini { margin-left: 0; }
.settings { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(60, 40, 70, .18); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.settings.on { opacity: 1; pointer-events: auto; }
.set-panel { width: min(560px, calc(100vw - 40px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; border-radius: 26px; background: #fff; box-shadow: 0 30px 80px rgba(120, 80, 120, .3); transform: translateY(10px) scale(.98); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.settings.on .set-panel { transform: none; }
.set-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 6px 26px; }
.set-head h2 { margin: 0; font: 800 24px/1 var(--font); letter-spacing: -.03em; }
.set-body { overflow: auto; padding: 6px 26px 24px; flex: 1; }
.set-panel { height: min(600px, calc(100vh - 60px)); }
.set-tabs { align-self: flex-start; margin: 8px 26px 4px; }
.set-body section.tab-off { display: none !important; }
.set-body section { padding: 14px 0; border-bottom: 1px solid #f2ecf3; }
.set-body section:last-child { border-bottom: 0; }
.set-body h3 { margin: 0 0 8px; font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; cursor: default; }
label.set-row { cursor: pointer; }
.set-row b { display: block; font: 600 14px/1.3 var(--font); }
.set-row small { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--font); color: var(--ink-soft); }
.tgl { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #e7e1ea; position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.tgl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s cubic-bezier(.2, .9, .3, 1.3); }
.tgl:checked { background: var(--mint-deep); }
.tgl:checked::after { transform: translateX(16px); }
.set-lock { font: 600 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--mint-deep); white-space: nowrap; }
.mochi-colors { display: flex; gap: 6px; flex: none; }
.mochi-colors button { width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.mochi-colors button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.set-note { margin-top: 6px; font: 400 12.5px/1.5 var(--font); color: var(--ink-soft); }
.set-link { border: 0; background: none; padding: 0; font: inherit; color: var(--select); text-decoration: underline; cursor: pointer; }
.set-btn { flex: none; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--ink); background: none; font: 600 12.5px/1 var(--font); cursor: pointer; }
.set-btn:hover { background: var(--ink); color: #fff; }
.set-about { display: flex; gap: 12px; align-items: center; }
.set-about canvas { width: 34px; height: 30px; image-rendering: pixelated; flex: none; }
.set-about b { font: 800 14px/1.3 var(--font); } .set-about small { display: block; font: 400 12.5px/1.45 var(--font); color: var(--ink-soft); }
/* what the settings switch */
body.no-grid .grid { display: none; }
body.neat .card { rotate: 0deg !important; }
body.calm .card.stamp .st img, body.calm .sp-grid img, body.calm .ws-ring img { animation: none !important; }

/* ---------- voice memos ---------- */
.card.audio .body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.au-top { display: flex; align-items: center; gap: 8px; }
.au-top b, .au-top .text { font: 700 14px/1.25 var(--font); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.au-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5a6e; animation: au-blink 1s ease-in-out infinite; flex: none; }
.card.audio.paused .au-dot { animation: none; background: var(--ink-faint); }
@keyframes au-blink { 50% { opacity: .25; } }
.au-time { font: 600 11.5px/1 var(--font); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-live { width: 100%; height: 34px; display: block; }
.au-row { display: flex; align-items: center; gap: 10px; }
.au-play { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; cursor: pointer; display: grid; place-items: center; padding-left: 2px; }
.au-play.on { padding-left: 0; }
.au-wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.au-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--ink-faint); }
.au-wave i.past { background: var(--pink-deep); }
.au-tx { font: 400 13px/1.5 var(--font); color: var(--ink); white-space: pre-wrap; outline: none; padding: 9px 11px; border-radius: 12px; background: #faf5fb; }
.au-tx.wait { color: var(--ink-soft); font-style: italic; }
.au-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.au-acts button { padding: 7px 12px; border-radius: 999px; border: 1.5px solid #eee5f0; background: #fff; font: 600 11.5px/1 var(--font); color: var(--ink); cursor: pointer; }
.au-acts button:hover { border-color: var(--ink); }
.au-acts button.solid { background: #ff5a6e; border-color: #ff5a6e; color: #fff; }
.ghost.audio span { top: 50%; transform: translateY(-50%); }
.au-wave { min-width: 0; }
.au-wave i { min-width: 1px; }
.au-time { flex: none; }

.row-menu .rm-sep { height: 1px; margin: 4px 6px; background: #f0e9f1; }
/* while exporting: just the cards, no app around them */
body.exporting .side, body.exporting .dock, body.exporting .tray, body.exporting .top, body.exporting .keys, body.exporting .ghost, body.exporting .grid,
body.exporting .marquee, body.exporting .shapepick, body.exporting .wheel-stamps, body.exporting .stamp-pick, body.exporting .linkbox { visibility: hidden !important; }
body.exporting .card .handle, body.exporting .card .knob, body.exporting .card .chip { display: none !important; }
body.exporting .card.sel::after { display: none; }

/* ---------- drawing ---------- */
.drawbar { display: none; align-items: center; gap: 2px; height: 50px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 8px 26px rgba(120, 80, 120, .14); }
.dock.drawing .tools, .dock.drawing .selbar { display: none !important; }
.dock.drawing .drawbar { display: flex; }
.db-done { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font); cursor: pointer; }
.db-tool { width: 38px; height: 38px; border: 0; border-radius: 999px; background: none; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); }
.db-tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.db-tool:hover { background: var(--blush); color: var(--ink); }
.db-tool.on { background: var(--blush); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--pink); }
.db-sizes { display: flex; gap: 2px; }
.db-sizes button { width: 34px; height: 38px; border: 0; border-radius: 999px; background: none; display: grid; place-items: center; cursor: pointer; }
.db-sizes i { border-radius: 50%; background: var(--ink-soft); }
.db-sizes button.on { background: var(--blush); } .db-sizes button.on i { background: var(--ink); }
.db-colors { display: flex; gap: 5px; padding: 0 6px; }
.db-colors button { width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.db-colors button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.stage.drawing, .stage.drawing * { cursor: crosshair !important; }
.stage.erasing, .stage.erasing * { cursor: none !important; }
.erase-ring { position: absolute; z-index: 30; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255, 255, 255, .5); pointer-events: none; display: none; }
.stage.erasing .erase-ring { display: block; }
.live-ink { position: absolute; left: -5000px; top: -5000px; width: 10000px; height: 10000px; overflow: visible; pointer-events: none; }
/* a drawing on the board: only the ink itself can be grabbed */
.card.ink { pointer-events: none; rotate: 0deg !important; }
.card.ink > .frame, .card.ink .knob { display: none; }
.card.ink .body { padding: 0; overflow: visible; }
.card.ink svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.card.ink svg path { pointer-events: visiblePainted; cursor: move; }
.stage.drawing .card.ink svg path { pointer-events: none; }
.card.ink.sel .handle { pointer-events: auto; }
.card.ink.sel::after { border-style: dashed; }
.card.ink.fading { transition: opacity .25s; opacity: 0; }
/* play/pause icons for voice memos (drawn, so they sit dead center) */
.au-play svg { width: 13px; height: 13px; fill: #fff; display: block; }
.au-play, .au-play.on { padding: 0; }

/* segmented choices in settings */
.seg { display: flex; flex: none; padding: 3px; border-radius: 999px; background: #f3edf4; }
.seg button { padding: 7px 12px; border: 0; border-radius: 999px; background: none; font: 600 12px/1 var(--font); color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
#noteColors button.rand { background: conic-gradient(#ffb8d2, #f8e08a, #a8e6c3, #aed3ff, #cdb8ff, #ffb8d2); }

/* Mochi's chat: white in light mode, dark in dark mode */
.m-pill { background: #fff; color: var(--ink); box-shadow: 0 12px 30px rgba(120, 80, 120, .2), 0 0 0 1px rgba(120, 80, 120, .06); }
.m-bubble { background: #fff; color: var(--ink); box-shadow: 0 12px 30px rgba(120, 80, 120, .2), 0 0 0 1px rgba(120, 80, 120, .06); }
.m-bubble small { color: var(--pink-deep); }
.m-form input { color: var(--ink); } .m-form input::placeholder { color: var(--ink-faint); }
.mochi.thinking .m-name::after { color: var(--pink-deep); }
.m-acts button { border-color: var(--ink); background: var(--ink); color: #fff; }
.m-acts button.ghost { background: none; color: var(--ink); }

/* ---------- dark mode ---------- */
body.dark { --ink: #ece8f0; --ink-soft: #a9a1b1; --ink-faint: #6f6877; --blush: #3a2c37; --dot: #35303c; --surface: #26222b; --surface-2: #302b35; color-scheme: dark; }
body.dark, body.dark .stage { background: #1c1920; }
body.dark .box, body.dark .tools, body.dark .tray, body.dark .selbar, body.dark .drawbar, body.dark .cpop, body.dark .capture, body.dark .linkbox, body.dark .shapepick, body.dark .wheel-stamps,
body.dark .stamp-pick, body.dark .row-menu, body.dark .cover-menu, body.dark .set-panel, body.dark .docview, body.dark .tile, body.dark .tile.folder .paper, body.dark .tile.project .mf,
body.dark .tray-item, body.dark .ghost, body.dark kbd, body.dark .home-back, body.dark .sc-mark { background: var(--surface) !important; color: var(--ink); }
body.dark .box { background: rgba(38, 34, 43, .92) !important; }
body.dark .board-row:hover, body.dark .node-head:hover, body.dark .brand:hover, body.dark .pal:hover, body.dark .home-row, body.dark .dv-btn, body.dark .tile-art, body.dark .seg,
body.dark .card.canvas .cv-prev, body.dark .au-tx, body.dark .tile.folder .tile-art .back, body.dark .tile.folder .tile-art .tab, body.dark .b-url { background: var(--surface-2) !important; }
body.dark .tile.folder .tile-art .tab::after { background: radial-gradient(circle at 100% 0, transparent 17px, var(--surface-2) 17.5px); }
body.dark .tile.folder .tile-art .front, body.dark .seg button.on, body.dark .au-acts button, body.dark .card .tag, body.dark .crumbs button:hover, body.dark .home-crumbs button:hover { background: #3a3540 !important; color: var(--ink); }
body.dark .home { background-color: #1c1920; background-image: radial-gradient(#35303c 1.2px, transparent 1.2px); }
body.dark .settings { background: rgba(0, 0, 0, .45); }
body.dark .set-body section, body.dark .row-menu .rm-sep { border-color: #36313c; }
body.dark .pill-btn, body.dark .tile.add { border-color: #4a4452; }
body.dark .dv-back, body.dark .db-done { background: #ece8f0; color: #1c1920; }
body.dark .tgl { background: #3e3846; }
body.dark .cp-fields input, body.dark .linkbox input, body.dark .capture input { background: var(--surface-2); color: var(--ink); border-color: #3e3846; }
/* cards: white cards turn dark; pastel cards stay pastel with dark words */
body.dark .card > .frame { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
body.dark .card.c-white > .frame, body.dark .card.link > .frame, body.dark .card.doc > .frame, body.dark .card.canvas > .frame, body.dark .card.audio > .frame, body.dark .card.swatch > .frame, body.dark .card.image > .frame { background: #322d38 !important; }
body.dark .card:not(.c-white):is(.note, .todo) .body { color: #39343f; }
body.dark .card:not(.c-white):is(.note, .todo) .nname:empty::before, body.dark .card:not(.c-white):is(.note, .todo) .text:empty::before { color: rgba(57, 52, 63, .45); }
body.dark .card.shape .text { color: #39343f; }
body.dark .coll-head { color: #39343f; }
body.dark .coll-frame { background: color-mix(in srgb, var(--cframe) 16%, #221e26); }
body.dark .card.link .meta span, body.dark .au-time { color: var(--ink-soft); }
body.dark .au-play { background: #ece8f0; } body.dark .au-play svg { fill: #1c1920; }
body.dark .wires path.w { stroke: #8d8596; }
/* Mochi's chat goes dark with the room */
body.dark .m-pill, body.dark .m-bubble { background: rgba(40, 37, 46, .97); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
body.dark .m-bubble small { color: #7fd8ff; }
body.dark .m-form input { color: #fff; } body.dark .m-form input::placeholder { color: rgba(255, 255, 255, .45); }
body.dark .m-acts button { background: #fff; color: #222; border-color: #fff; } body.dark .m-acts button.ghost { background: none; color: #fff; }
body { --pen-ink: #494848; } body.dark { --pen-ink: #ece8f0; }
body.dark .tray-head b, body.dark .sb-dots button, body.dark .tile .mf { color: #39343f; } body.dark .tile.project .mf { color: var(--ink); }

/* images keep their crop inside a window; while cropping, the outside dims and the box has corner handles */
.card.image .imgwrap { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; }
.card.image .imgwrap img { border-radius: 0; }
.card.image.c-white:has(.crop-ui) { rotate: 0deg !important; }
.crop-ui { position: absolute; inset: 0; z-index: 2; }
.crop-box { position: absolute; box-shadow: 0 0 0 9999px rgba(20, 16, 24, .55); outline: 2px solid #fff; cursor: move; }
.crop-box::before, .crop-box::after { content: ""; position: absolute; inset: 0; border: 0 dashed rgba(255, 255, 255, .55); pointer-events: none; }
.crop-box::before { border-width: 0 1px; left: 33.3%; right: 33.3%; } .crop-box::after { border-width: 1px 0; top: 33.3%; bottom: 33.3%; }
.crop-box i { position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.crop-box i[data-h="nw"] { left: -2px; top: -2px; cursor: nwse-resize; border-radius: 2px 6px 6px 6px; } .crop-box i[data-h="ne"] { right: -2px; top: -2px; cursor: nesw-resize; border-radius: 6px 2px 6px 6px; }
.crop-box i[data-h="sw"] { left: -2px; bottom: -2px; cursor: nesw-resize; border-radius: 6px 6px 6px 2px; } .crop-box i[data-h="se"] { right: -2px; bottom: -2px; cursor: nwse-resize; border-radius: 6px 6px 2px 6px; }
.card.image .imgwrap:has(.crop-ui) { border-radius: 0; }
.conns + .set-row { margin-top: 6px; }
.au-count { height: 34px; display: grid; place-items: center; font: 800 30px/1 var(--font); color: var(--pink-deep); animation: pop .5s cubic-bezier(.2, .9, .3, 1.4); }

/* ---------- Mochi's chat window ---------- */
.m-chat { position: absolute; right: 0; bottom: calc(100% + 12px); width: 380px; height: min(520px, calc(100vh - 140px)); display: flex; flex-direction: column; border-radius: 24px; background: #fff; color: var(--ink);
  box-shadow: 0 20px 50px rgba(120, 80, 120, .24), 0 0 0 1px rgba(120, 80, 120, .06); opacity: 0; pointer-events: none; transform: translateY(10px) scale(.97); transform-origin: 90% 100%; transition: opacity .18s, transform .28s cubic-bezier(.2, .9, .3, 1.2); }
.mochi.chat .m-chat { opacity: 1; pointer-events: auto; transform: none; }
.mochi.chat .m-bubble { display: none; }
.mc-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid #f2ecf3; }
.mc-head canvas { width: 26px; height: 23px; image-rendering: pixelated; }
.mc-head b { font: 800 15px/1 var(--font); }
.mc-status { flex: 1; font: 600 11px/1 var(--font); color: var(--pink-deep); }
.mc-btn { border: 0; background: none; padding: 6px 9px; border-radius: 999px; font: 600 11.5px/1 var(--font); color: var(--ink-soft); cursor: pointer; }
.mc-btn:hover { background: var(--blush); color: var(--ink); }
.mc-btn.x { font-size: 18px; padding: 2px 9px; }
.mc-list { flex: 1; overflow: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 8px; user-select: text; -webkit-user-select: text; }
.mc-msg { max-width: 82%; padding: 9px 13px 10px; border-radius: 18px; font: 400 13.5px/1.45 var(--font); white-space: pre-wrap; word-break: break-word; animation: mc-in .25s cubic-bezier(.2, .9, .3, 1.2); }
.mc-msg.mochi { align-self: flex-start; background: #f6f1f7; border-bottom-left-radius: 6px; }
.mc-msg.me { align-self: flex-end; background: #ffd9e6; border-bottom-right-radius: 6px; }
.mc-msg .m-acts { margin-top: 8px; }
.mc-msg .m-acts button { background: var(--ink); color: #fff; border-color: var(--ink); }
.mc-msg .m-acts button.ghost { background: none; color: var(--ink); }
.mc-msg.typing { display: flex; gap: 4px; padding: 13px 14px; }
.mc-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: mc-dot 1s ease-in-out infinite; }
.mc-msg.typing i:nth-child(2) { animation-delay: .15s; } .mc-msg.typing i:nth-child(3) { animation-delay: .3s; }
.mc-empty { margin: auto; text-align: center; font: 400 13px/1.5 var(--font); color: var(--ink-soft); padding: 0 24px; }
.mc-empty b { display: block; font: 700 14px/1.3 var(--font); color: var(--ink); margin-bottom: 4px; }
.mc-ideas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.mc-ideas button { padding: 7px 11px; border-radius: 999px; border: 1.5px solid #eee5f0; background: none; font: 500 12px/1.2 var(--font); color: var(--ink); cursor: pointer; }
.mc-ideas button:hover { border-color: var(--pink); background: var(--blush); }
@keyframes mc-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes mc-dot { 50% { transform: translateY(-4px); opacity: .5; } }
.mc-form { display: flex; align-items: flex-end; gap: 8px; margin: 8px 10px 10px; padding: 6px 6px 6px 14px; border-radius: 20px; background: #f6f1f7; }
.mc-form textarea { flex: 1; border: 0; background: none; resize: none; outline: none; font: 400 14px/1.4 var(--font); color: var(--ink); max-height: 120px; padding: 6px 0; user-select: text; -webkit-user-select: text; }
.mc-form textarea::placeholder { color: var(--ink-faint); }
.mc-send { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font: 700 15px/1 var(--font); cursor: pointer; }
.m-form { display: none !important; }
.mochi.open .m-name { display: inline; }
body.dark .m-chat { background: rgba(38, 34, 43, .98); box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06); }
body.dark .mc-head { border-color: #36313c; }
body.dark .mc-msg.mochi, body.dark .mc-form { background: #322d38; }
body.dark .mc-msg.me { background: #5a3a4b; color: #fff; }
body.dark .mc-msg .m-acts button { background: #fff; color: #222; border-color: #fff; } body.dark .mc-msg .m-acts button.ghost { background: none; color: #fff; }
body.dark .mc-send { background: #ece8f0; color: #1c1920; }
body.dark .mc-ideas button { border-color: #3e3846; }
.au-dot.wait { animation: none; background: var(--ink-faint); }
.au-count.soft { font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.m-chat .mc-msg.typing { flex-direction: row; align-items: center; }
/* Mochi is drawn at the bottom of her canvas (headroom for her hop), so lift her to sit visually centered */
.m-pill canvas { transform: translateY(-4px); }
.mc-head canvas { margin-top: -9px; }
.m-pill { overflow: visible; }
#goo.hopping { animation: mochi-hop .62s cubic-bezier(.3, .7, .4, 1) both; transform-origin: 50% 100%; }
@keyframes mochi-hop {
  0% { transform: translateY(-4px) scale(1, 1); }
  14% { transform: translateY(-2px) scale(1.12, .86); }
  45% { transform: translateY(-26px) scale(.94, 1.08); }
  78% { transform: translateY(-4px) scale(1.1, .9); }
  100% { transform: translateY(-4px) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) { #goo.hopping { animation: none; } }
body.calm #goo.hopping { animation: none; }

/* row buttons in the left box and on Home tiles: toolbar-style line icons, bigger, with a soft circle on hover */
.f-btn { width: 26px; height: 26px; padding: 0; border-radius: 999px; place-items: center; flex: none; color: var(--ink-soft); font-size: 0; }
.f-btn svg { width: 16px; height: 16px; }
.f-btn:hover { background: var(--blush); color: var(--ink); }
.node-head:hover > .f-btn, .tile:hover .f-btn { display: grid; }
.f-btn[data-a="del"]:hover { color: #d6455d; }
.tile .f-btn { width: 30px; height: 30px; } .tile .f-btn svg { width: 17px; height: 17px; }

.board-row .f-btn { margin-left: auto; }
.board-row:hover > .f-btn { display: grid; }
.board-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Move to… picker */
.row-menu.mv { width: 260px; max-width: 260px; padding: 6px; }
.mv-head { padding: 8px 10px 6px; font: 700 12px/1.3 var(--font); color: var(--ink-soft); }
.mv-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.mv-row, .mv-group { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; font: 600 13px/1.2 var(--font); color: var(--ink); text-align: left; }
.mv-group { font-weight: 700; color: var(--ink-soft); font-size: 12px; padding-top: 10px; }
.mv-row { border: 0; background: none; cursor: pointer; }
.mv-row:hover { background: var(--blush); }
.mv-row.here { color: var(--ink-soft); cursor: default; }
.mv-row.here:hover { background: none; }
.mv-row em { margin-left: auto; font: 600 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--ink-faint); }
.mv-row span, .mv-group span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-row i, .mv-group i { flex: none; }
.mv-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-faint); margin: 0 4px; }
.mv-none { padding: 4px 10px 6px 40px; font: 400 12px/1.3 var(--font); color: var(--ink-faint); }
.row-menu .mv-list button { border: 0; flex: none; text-align: left; justify-content: flex-start; }
/* the boards inside a folder fan out so each one's preview shows; hovering spreads them like flipping through */
.tile.folder .tile-art .front { height: 104px; }
.tile.folder .peek { left: 16%; right: 16%; top: 26px; bottom: 40px; }
.tile.folder .paper { transform: translate(calc((var(--i) - var(--mid, 1)) * 38px), calc(var(--i) * 3px)) rotate(calc((var(--i) - var(--mid, 1)) * 7deg)); transform-origin: 50% 120%; }
.tile.folder:hover .paper { transform: translate(calc((var(--i) - var(--mid, 1)) * 46px), calc(-16px + var(--i) * 2px)) rotate(calc((var(--i) - var(--mid, 1)) * 9deg)); }
.tile.folder .paper svg { width: 100%; height: 100%; }

/* shape colors follow the theme: soft pastels in light, deeper calmer versions in dark */
body { --sh-gray: #e4dfe7; --sh-pink: #ffb8d2; --sh-butter: #f8e08a; --sh-mint: #a8e6c3; --sh-sky: #aed3ff; --sh-lilac: #cdb8ff; --sh-peach: #ffc8a6; --sh-ink: #494848; }
body.dark { --sh-gray: #4a4452; --sh-pink: #b7768f; --sh-butter: #b9a35a; --sh-mint: #6fa98a; --sh-sky: #6e93bd; --sh-lilac: #8a78bd; --sh-peach: #b98b6f; --sh-ink: #ece8f0; }
body.dark .card.shape .text { color: #fff; }
.sf-any { position: relative; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; background: conic-gradient(#ff9ec4, #f3d96a, #7ad3a3, #8cc1ff, #b89bff, #ff9ec4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); flex: none; }
.sf-any.on { background: var(--any); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--select); }
.sf-any input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
/* the board name stays readable when a card slides under it */
.top { transition: background .2s, box-shadow .2s, padding .2s; border-radius: 16px; }
.top.covered { background: rgba(251, 248, 252, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(120, 80, 120, .12); padding: 8px 14px 10px; margin: -8px 0 0 -14px; }
body.dark .top.covered { background: rgba(38, 34, 43, .88); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.top.covered { padding-bottom: 26px; }
.top.covered .saved { top: auto; bottom: 9px; left: 15px; }
.au-count.soft { display: flex; gap: 5px; align-items: center; justify-content: center; }
.au-count.soft i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink-deep); animation: mc-dot 1s ease-in-out infinite; }
.au-count.soft i:nth-child(2) { animation-delay: .15s; } .au-count.soft i:nth-child(3) { animation-delay: .3s; }
/* dark mode: anything filled with "ink" (which turns light in dark mode) gets dark text, so nothing is white on white */
body.dark .sb-sizes button.on, body.dark .selbar .sb-txt.on, body.dark .cp-acts .solid, body.dark .home-close:hover, body.dark .set-btn:hover,
body.dark .conn button:hover, body.dark .mc-send, body.dark .dv-back, body.dark .db-done, body.dark .au-play { background: #ece8f0; color: #1c1920; border-color: #ece8f0; }
body.dark .tools button::after { background: #ece8f0; color: #1c1920; }
body.dark .sb-sizes button.on i { background: #1c1920; }
body.dark .db-sizes button.on { background: var(--blush); } body.dark .db-sizes button.on i { background: #ece8f0; }
body.dark .home-back:hover, body.dark .linkbox button { background: #ece8f0; color: #1c1920; }

/* ---------- wireframes ---------- */
.design { position: absolute; right: 16px; top: 16px; width: 230px; z-index: 11; padding: 12px; border-radius: 22px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(120, 80, 120, .12); max-height: max(220px, calc(60% - 16px)); overflow: auto; scrollbar-width: thin; }
.dz-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; padding-left: 2px; }
.design.min .dz-body { display: none; }
.dz-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.dz-tools button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px; border: 0; border-radius: 12px; background: #f7f3f8; color: var(--ink-soft); font: 600 11px/1 var(--font); cursor: pointer; }
.dz-tools button:hover, .dz-tools button.on { background: var(--blush); color: var(--ink); }
.dz-tools button.on { box-shadow: inset 0 0 0 1.5px var(--pink); }
.dz-presets { display: none; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.dz-presets.on { display: flex; }
.dz-presets button { padding: 6px 9px; border: 1.5px solid #eee5f0; border-radius: 999px; background: none; font: 600 11px/1 var(--font); color: var(--ink); cursor: pointer; }
.dz-presets button:hover, .dz-presets button.on { border-color: var(--pink); background: var(--blush); }
.dz-props:empty { display: none; }
.dz-props { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f2ecf3; display: grid; gap: 10px; }
.dz-sec { display: grid; gap: 6px; }
.dz-sec > .label { margin: 0 2px; }
.dz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dz-f { display: flex; align-items: center; gap: 6px; padding: 0 8px; height: 30px; border-radius: 9px; background: #f7f3f8; font: 600 11px/1 var(--font); color: var(--ink-soft); }
.dz-f input, .dz-f select { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 12px/1 var(--font); color: var(--ink); user-select: text; -webkit-user-select: text; }
.dz-f input[type=color] { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 6px; cursor: pointer; }
.dz-f select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.dz-f.wide { grid-column: 1 / -1; }
.dz-row { display: flex; gap: 4px; }
.dz-row button { flex: 1; height: 30px; border: 0; border-radius: 9px; background: #f7f3f8; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }
.dz-row button:hover, .dz-row button.on { background: var(--blush); color: var(--ink); }
.dz-row svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.dz-hint { font: 400 11.5px/1.45 var(--font); color: var(--ink-soft); padding: 0 2px; }
/* wireframe things sit straight and crisp: no tilt, no wobble */
.card.wf { rotate: 0deg !important; }
.card.wf > .frame { display: none; }
.card.wf .body { padding: 0; overflow: visible; }
.card.wf .knob { opacity: 0; }
.card.wf:hover .knob { opacity: 1; }
.card.wf .tag { display: none; }
.card.frame { z-index: 0 !important; }
.card.frame .fr-name { position: absolute; left: 2px; bottom: calc(100% + 6px); font: 600 12px/1 var(--font); color: var(--ink-soft); white-space: nowrap; outline: none; cursor: text; }
.card.frame .fr-body { position: absolute; inset: 0; border-radius: var(--fr-r, 0); background: var(--fr-fill, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 14px 40px rgba(73, 72, 72, .12); }
.card.box .bx { position: absolute; inset: 0; }
.card.text .tx { white-space: pre-wrap; word-break: break-word; outline: none; min-height: 1em; }
.card.text .tx:empty::before { content: "Text"; color: #a1a1aa; }
.card.wf.sel::after { inset: -2px; border-radius: 3px; border-width: 1.5px; }
.card.wf .handle { width: 10px; height: 10px; right: -6px; bottom: -6px; border-radius: 2px; border-width: 1.5px; }
.ghost.frame, .ghost.box, .ghost.text { border-radius: 4px; background: rgba(255, 255, 255, .75); }
.ghost.frame span, .ghost.box span, .ghost.text span { position: absolute; top: -20px; left: 0; font-size: 12px; color: var(--ink-soft); }
.draw-rect { position: absolute; border: 1.5px solid var(--select); background: rgba(13, 153, 255, .06); pointer-events: none; z-index: 60; }
.guides { position: absolute; left: -5000px; top: -5000px; width: 10000px; height: 10000px; overflow: visible; pointer-events: none; z-index: 70; }
.guides line { stroke: #ff4f9a; stroke-width: 1; vector-effect: non-scaling-stroke; }
body.dark .design { background: rgba(38, 34, 43, .92); }
body.dark .dz-tools button, body.dark .dz-f, body.dark .dz-row button { background: #302b35; }
body.dark .dz-props { border-color: #36313c; }
body.dark .dz-presets button { border-color: #3e3846; }
/* shortcut hints: each one is its own little row item so wrapped lines never overlap */
.keys { row-gap: 7px; line-height: 1; align-items: center; }
.keys span { display: inline-flex; align-items: center; gap: 4px; height: 20px; white-space: nowrap; }
.keys kbd { line-height: 1; display: inline-block; }
/* short windows: the hints step aside so they don't crowd the left boxes */
@media (max-height: 760px) { .keys { display: none; } .side { bottom: 16px; } }
/* a wireframe box is just its shape (not one of the floating side boxes, which share the name) */
.card.box { background: none; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; flex: initial; }
body.dark .card.box { background: none !important; }
/* design panel fields fit their columns */
.dz-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dz-f { min-width: 0; }
.dz-f input:not([type=color]), .dz-f select { width: 100%; }
.dz-f > span { flex: none; }
.dz-row { flex-wrap: wrap; } .dz-row button { min-width: 28px; }

/* Material Icons, built in so they work offline (© Google, Apache 2.0) */
@font-face { font-family: "Material Icons Outlined"; src: url("icons/MaterialIconsOutlined-Regular.otf") format("opentype"); font-display: block; }
.mi { font-family: "Material Icons Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; display: inline-block; }
.card.icon .body { display: grid; place-items: center; }
.card.icon .mi { font-size: var(--isz, 24px); color: var(--ic, #27272a); }
.dz-icons { display: none; margin-top: 8px; }
.dz-icons.on { display: block; }
.dz-icons input { width: 100%; padding: 8px 10px; border: 1.5px solid #eee5f0; border-radius: 10px; background: #fff; font: 500 12.5px/1 var(--font); color: var(--ink); outline: none; user-select: text; -webkit-user-select: text; }
.dz-icons input:focus { border-color: var(--select); }
.dz-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-height: 210px; overflow: auto; margin-top: 6px; }
.dz-icon-grid button { aspect-ratio: 1; border: 0; border-radius: 8px; background: none; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.dz-icon-grid button:hover, .dz-icon-grid button.on { background: var(--blush); }
.dz-icon-grid .mi { font-size: 20px; }
.dz-icon-grid .more { grid-column: 1 / -1; aspect-ratio: auto; padding: 6px; font: 500 11px/1.3 var(--font); color: var(--ink-soft); cursor: default; }
.dz-pieces { margin-top: 12px; }
.dz-pieces > .label { margin: 0 2px 6px; }
.dz-piece-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dz-piece-grid button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border: 0; border-radius: 10px; background: #f7f3f8; color: var(--ink-soft); font: 600 10.5px/1.1 var(--font); cursor: pointer; }
.dz-piece-grid button .mi { font-size: 19px; }
.dz-piece-grid button:hover, .dz-piece-grid button.on { background: var(--blush); color: var(--ink); }
body.dark .dz-piece-grid button { background: #302b35; } body.dark .dz-icons input { background: #302b35; border-color: #3e3846; }
/* rotation: wireframe things turn freely; a little handle sits above the selection */
.card.wf { rotate: var(--rot, 0deg) !important; }
.card.wf .rot-h { position: absolute; left: 50%; top: -30px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--select); cursor: grab; display: none; z-index: 3; }
.card.wf .rot-h::after { content: ""; position: absolute; left: 50%; top: 12px; width: 2px; height: 14px; margin-left: -1px; background: var(--select); }
.card.wf.sel .rot-h { display: block; }
.card.wf.grouped.sel::after { border-style: dashed; }
.card.frame .rot-h { display: none !important; }
/* speed: the hand-cut wobble is lovely but costly; it steps aside while the view moves, and when zoomed far out */
.stage.moving .card .frame, .stage.far .card .frame, .stage.moving .coll-frame::before, .stage.far .coll-frame::before,
.stage.moving .card.shape svg.sh, .stage.far .card.shape svg.sh { filter: none !important; }
.stage.moving .world { will-change: transform; }
.stage.far .card.wf .rot-h, .stage.far .card .knob { display: none; }

/* font cards: the type itself, big */
.card.font .body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.fs-aa { font-size: 64px; line-height: 1; color: var(--ink); }
.fs-meta { display: flex; align-items: baseline; gap: 8px; }
.fs-meta b { font: 700 14px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-src { flex: none; margin-left: auto; font: 600 9.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.fs-sample { font-size: 18px; line-height: 1.35; color: var(--ink); outline: none; }
body.dark .card.font.c-white > .frame { background: #322d38 !important; }
.fs-meta { min-width: 0; } .fs-meta b { flex: 1; min-width: 0; }
/* the glow on what Mochi just made */
.card.just-made::before { content: ""; position: absolute; inset: -10px; border-radius: 24px; pointer-events: none; z-index: -1; animation: just-made 1.9s ease-out both; }
@keyframes just-made { 0% { box-shadow: 0 0 0 0 rgba(255, 158, 196, 0); } 18% { box-shadow: 0 0 0 6px rgba(255, 158, 196, .55), 0 0 34px 8px rgba(255, 158, 196, .45); } 100% { box-shadow: 0 0 0 14px rgba(255, 158, 196, 0), 0 0 40px 10px rgba(255, 158, 196, 0); } }
.card.wf.just-made::before { border-radius: 6px; }
.card.frame.just-made::before { border-radius: calc(var(--fr-r, 0px) + 10px); }

/* image spots: what picture goes here, until it's filled */
.bx-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; text-align: center; color: #a1a1aa; pointer-events: none; overflow: hidden; }
.bx-ph .mi { font-size: 28px; }
.bx-l { font: 500 12px/1.35 var(--font); max-width: 90%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dz-sub { grid-column: 1 / -1; margin: 8px 2px 2px; }
/* Mochi's quieter answer buttons share the .ghost name with the drag preview: keep them visible */
.m-acts { flex-wrap: wrap; }
.m-acts button.ghost { display: inline-block; position: static; z-index: auto; pointer-events: auto; box-shadow: none; border-radius: 999px; }
/* wireframe pieces keep their stacking (a section's background must never jump over its words) */
.card.wf:hover, .card.wf.dragging { z-index: auto; }

/* ---------- setup with Mochi ---------- */
.onboard { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(255, 228, 240, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.onboard.on { opacity: 1; pointer-events: auto; }
.ob-panel { position: relative; width: min(520px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow: auto; padding: 34px 34px 22px; border-radius: 30px; background: #fff; box-shadow: 0 30px 80px rgba(120, 80, 120, .28); transform: translateY(12px) scale(.98); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.onboard.on .ob-panel { transform: none; }
.ob-step { display: none; animation: ob-in .35s cubic-bezier(.2, .9, .3, 1.1) both; }
.ob-step.on { display: block; }
@keyframes ob-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.ob-step canvas { display: block; width: 96px; height: 84px; margin: 0 auto 6px; image-rendering: pixelated; }
.ob-step[data-step="0"], .ob-step[data-step="5"] { text-align: center; }
.ob-step h2 { margin: 0 0 8px; font: 800 26px/1.15 var(--font); color: var(--ink); letter-spacing: -.01em; }
.ob-step p { margin: 0 0 18px; font: 500 14.5px/1.55 var(--font); color: var(--ink-soft); }
.ob-step .set-row { padding: 12px 0; }
.ob-field { display: grid; gap: 8px; text-align: left; margin-top: 8px; }
.ob-field span { font: 700 13px/1 var(--font); color: var(--ink); }
.ob-field input { padding: 13px 16px; border-radius: 14px; border: 1.5px solid #eadfec; background: #fbf8fc; font: 600 15px/1 var(--font); color: var(--ink); outline: none; }
.ob-field input:focus { border-color: #ff9ec4; background: #fff; box-shadow: 0 0 0 4px rgba(255, 158, 196, .2); }
.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.onboard.last .ob-foot #obNext { visibility: hidden; }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 99px; background: #eadfec; transition: width .25s, background .25s; }
.ob-dots i.done { background: #ffc3da; }
.ob-dots i.on { width: 22px; background: #ff8fc2; }
.ob-primary, .ob-ghost { padding: 11px 20px; border-radius: 999px; font: 700 14px/1 var(--font); cursor: pointer; border: 1.5px solid var(--ink); }
.ob-primary { background: var(--ink); color: #fff; }
.ob-primary:hover { background: #2f2f2f; }
.ob-ghost { background: none; color: var(--ink); border-color: transparent; }
.ob-ghost:hover { background: var(--blush); }
.ob-big { display: grid; gap: 8px; justify-items: center; margin: 4px 0 14px; }
.ob-big .ob-primary { padding: 14px 26px; font-size: 15px; }
.ob-small { font-size: 12.5px !important; color: var(--ink-faint) !important; margin: 0 !important; }
.ob-skip { position: absolute; top: 16px; right: 18px; border: 0; background: none; font: 600 12px/1 var(--font); color: var(--ink-faint); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.ob-skip:hover { color: var(--ink); background: var(--blush); }
.ob-step .conns { margin-bottom: 6px; }
.set-btns { display: flex; gap: 6px; flex: none; }
body.dark .ob-panel, body.dark .coach-card { background: var(--surface); }
body.dark .onboard { background: rgba(20, 16, 24, .6); }
body.dark .ob-field input { background: #302b35; border-color: #3d3743; }
body.dark .ob-primary { background: #ece8f0; color: #1c1920; border-color: #ece8f0; }
body.dark .ob-dots i { background: #3d3743; }

/* ---------- the tour ---------- */
.coach { position: fixed; inset: 0; z-index: 94; pointer-events: none; display: none; }
.coach.on { display: block; }
.coach.dim { background: rgba(60, 40, 70, .14); }
.coach-ring { position: fixed; border-radius: 22px; box-shadow: 0 0 0 3px #ff8fc2, 0 0 0 9999px rgba(60, 40, 70, .16); transition: all .4s cubic-bezier(.2, .9, .3, 1.1); animation: coach-pulse 1.8s ease-in-out infinite; }
@keyframes coach-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 143, 194, .6), 0 0 0 9999px rgba(60, 40, 70, .16); } }
.coach-card { position: fixed; width: 320px; padding: 16px 18px 14px; border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(120, 80, 120, .28); pointer-events: auto; transition: left .4s cubic-bezier(.2, .9, .3, 1.1), top .4s cubic-bezier(.2, .9, .3, 1.1); }
.coach-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.coach-top canvas { width: 30px; height: 27px; image-rendering: pixelated; margin-top: -4px; }
.coach-top b { font: 800 14px/1 var(--font); color: var(--ink); }
.coach-top span { margin-left: auto; font: 600 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.coach-card p { margin: 0; font: 500 14px/1.5 var(--font); color: var(--ink); }
.coach-try { margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: #fff0f6; font: 600 13px/1.35 var(--font); color: #d64f8d; }
.coach-try.yay { background: #e3f9ee; color: #1f9a5e; }
.coach-acts { display: flex; justify-content: space-between; margin-top: 12px; }
.coach-acts button { padding: 9px 16px; font-size: 13px; }
body.dark .coach-try { background: #3a2a34; } body.dark .coach-try.yay { background: #1f3529; }

/* Mochi's "what next" ideas */
.m-acts button.next { background: #fff0f6; border-color: #ffd0e3; color: #c4417f; }
.m-acts button.next::before { content: "↳ "; opacity: .6; }
.m-acts button.next:hover { background: #ffe0ee; }
body.dark .m-acts button.next { background: #3a2a34; border-color: #5a3a4c; color: #ffb3d4; }
/* dark mode: "on" toggles stay green (the dark gray was winning over it) */
body.dark .tgl:checked { background: var(--mint-deep, #3fc48a); }
body.dark .tgl::after { background: #d9d3de; }
body.dark .tgl:checked::after { background: #fff; }

/* the tour, always at the top of Settings */
.set-start { display: flex; align-items: center; gap: 12px; padding: 14px 16px !important; border-radius: 18px; background: #fff0f6; border: 0 !important; margin-bottom: 6px; }
.set-start canvas { width: 34px; height: 30px; image-rendering: pixelated; flex: none; margin-top: -4px; }
.set-start > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.set-start b { font: 700 14px/1.2 var(--font); color: var(--ink); } .set-start small { font: 500 12px/1.35 var(--font); color: var(--ink-soft); }
.set-btn.hot { background: var(--ink); color: #fff; border-color: var(--ink); }
body.dark .set-start { background: #3a2a34; } body.dark .set-btn.hot { background: #ece8f0; color: #1c1920; border-color: #ece8f0; }
@media (max-width: 560px) { .set-start { flex-wrap: wrap; } }
.set-start > .set-btns { flex: none; display: grid; gap: 6px; }
.set-start .set-btn { padding: 9px 16px; white-space: nowrap; }
/* dark mode: names being renamed get a dark field, not white-on-white */
body.dark [contenteditable="true"].fname, body.dark .tile b[contenteditable="true"], body.dark .board-row span[contenteditable="true"], body.dark .pal span[contenteditable="true"] { background: #3a3540; color: var(--ink); }

/* the web demo */
.web-only { display: none !important; }
body.web .web-only { display: block !important; } body.web .native-only { display: none !important; }
body.web .web-pill.web-only { display: flex !important; }
.web-pill { align-items: center; justify-content: center; gap: 4px; width: 100%; margin: 2px 0 6px; padding: 7px 10px; border: 0; border-radius: 12px; background: #fff0f6; color: #a8467a; font: 600 12px/1.2 var(--font); cursor: pointer; }
.web-pill b { font-weight: 800; } .web-pill:hover { background: #ffe0ee; }
.web-note { margin: 4px 0 8px; padding: 12px 14px; border-radius: 14px; background: #fff0f6; color: var(--ink); font: 500 13.5px/1.5 var(--font); }
.web-note .set-link { font-weight: 700; }
body.dark .web-pill, body.dark .web-note { background: #3a2a34; color: #ffb3d4; }
body.web .conns { display: none; }
.web-note .set-link { color: #d64f8d; } body.dark .web-note .set-link { color: #ffb3d4; }
.tray-list { min-height: 0; overscroll-behavior: contain; }

/* updates, at the very top of Settings */
.set-update { padding: 14px 16px !important; border-radius: 18px; background: #f6f2f8; border: 0 !important; margin-bottom: 8px; }
.set-update.ready { background: #e6f7ee; }
.su-top { display: flex; align-items: center; gap: 12px; }
.su-icon { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); flex: none; }
.set-update.ready .su-icon { color: #1f9a5e; }
.su-text { flex: 1; min-width: 0; display: grid; gap: 3px; } .su-text b { font: 700 14px/1.2 var(--font); color: var(--ink); } .su-text small { font: 500 12px/1.4 var(--font); color: var(--ink-soft); }
.su-notes { margin: 12px 0 2px 46px; padding: 0; list-style: none; display: grid; gap: 6px; }
.su-notes li { font: 500 13px/1.4 var(--font); color: var(--ink); } .su-notes li::before { content: "✦ "; color: #1f9a5e; }
.gear.has-update { position: relative; } .gear.has-update::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #3fc48a; box-shadow: 0 0 0 2px #fff; }
body.dark .set-update { background: #302b35; } body.dark .set-update.ready { background: #1f3529; } body.dark .su-icon { background: #3a3540; }
/* the person who made it */
.set-maker { text-align: center; padding: 22px 18px 20px !important; border-radius: 20px; background: #fff0f6; border: 0 !important; margin-top: 6px; }
.sm-sig { font: 700 22px/1 'Caveat', cursive; color: #d0558f; }
.sm-name { font: 800 26px/1.1 var(--font); color: var(--ink); margin: 6px 0 8px; letter-spacing: -.01em; }
.set-maker small { display: block; max-width: 340px; margin: 0 auto 14px; font: 500 13px/1.5 var(--font); color: var(--ink-soft); }
.sm-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
body.dark .set-maker { background: #3a2a34; } body.dark .sm-sig { color: #ffb3d4; }

/* groups: a soft dashed outline around a group you've selected */
.group-boxes { position: absolute; left: 0; top: 0; pointer-events: none; }
.group-box { position: absolute; border: 2px dashed rgba(255, 143, 194, .85); border-radius: 22px; }
.group-box span { position: absolute; left: 14px; top: -11px; padding: 3px 9px; border-radius: 99px; background: #ff8fc2; color: #fff; font: 700 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }

/* design thinking templates: a little menu above the toolbar */
.tplpick { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(6px); z-index: 16; width: 270px; display: grid; gap: 2px; padding: 6px; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(120, 80, 120, .18); opacity: 0; pointer-events: none; transition: opacity .18s, transform .25s; }
.tplpick.on { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.tplpick button { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 0; border-radius: 16px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.tplpick button:hover { background: var(--blush); }
.tplpick .tp-e { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: #f6f1f8; color: var(--ink); }
.tplpick button:hover .tp-e { background: #fff; }
.tplpick .tp-e svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tplpick .tp-t { display: grid; gap: 1px; }
.tplpick b { font: 700 14px/1.2 var(--font); }
.tplpick small { font: 500 12px/1.3 var(--font); color: var(--ink-soft); }
.stage.doc-open .tplpick { opacity: 0; pointer-events: none; }
/* Mochi's how-to note: a little Mochi next to the title */
.card.note .nm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card.note .nm-head .nname { margin: 0; }
.card.note .nmochi { flex: none; width: 30px; height: auto; image-rendering: pixelated; pointer-events: none; }

/* Claude usage card in Settings → Helpers */
.usage { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: #f8f4f9; }
.usage .us-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font: 500 13px/1.3 var(--font); }
.usage .us-row b { font-weight: 700; }
.usage .us-row span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.usage small { display: block; margin: 6px 0 10px; font: 500 12px/1.4 var(--font); color: var(--ink-soft); }
body.dark .usage { background: rgba(255, 255, 255, .05); }

/* what's new card */
.news .ob-panel { text-align: center; padding-top: 28px; }
.news .nw-mochi { width: 72px; height: auto; image-rendering: pixelated; display: block; margin: 0 auto 6px; }
.news h2 { margin: 0; font: 800 26px/1.15 var(--font); color: var(--ink); }
.news .nw-v { margin: 4px 0 16px; font: 600 12.5px/1 var(--font); color: var(--ink-soft); }
.news .nw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.news .nw-list li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #faf6fb; }
.news .nw-e { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(120, 80, 120, .1); }
.news .nw-e svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.dark .news .nw-e { background: var(--surface-2); }
.news .nw-list b { display: block; font: 700 14px/1.3 var(--font); color: var(--ink); }
.news .nw-list small { display: block; margin-top: 2px; font: 500 12.5px/1.45 var(--font); color: var(--ink-soft); }
body.dark .news .nw-list li { background: rgba(255, 255, 255, .05); }
/* templates menu, what's new and the usage card in dark mode */
body.dark .tplpick { background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
body.dark .tplpick button:hover { background: var(--surface-2); }
body.dark .tplpick .tp-e { background: var(--surface-2); }
body.dark .tplpick button:hover .tp-e { background: #3d3743; }
body.dark .news .ob-panel { background: var(--surface); }
body.dark .ws-mid { background: #2c3644; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(140, 193, 255, .3); }
body.dark .ws-mid:hover { background: #34404f; }