/* Mesa Playground — full-window canvas. Card visuals come from /style.css (.mc, .sticky, .doc, .art …). */
html, body.play { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.play { background: var(--m-canvas); color: var(--m-label); font-family: var(--sf); }
.app { position: fixed; inset: 0; }

/* Top bar: translucent chrome over the canvas */
.topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 40; height: 52px;
  display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px;
  background: color-mix(in srgb, var(--m-canvas) 70%, transparent);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 .5px 0 rgba(var(--m-p), .1);
}
.home { display: grid; place-items: center; width: 30px; height: 34px; color: var(--m-label); }
.home svg { width: 19px; height: 25px; }
.crumbs-p { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; font-size: 13px; }
.crumbs-p::-webkit-scrollbar { display: none; }
.crumbs-p button { flex: none; border: 0; background: none; padding: 5px 8px; border-radius: 6px; font: 500 13px var(--sf); color: var(--m-2); cursor: pointer; white-space: nowrap; }
.crumbs-p button:last-child { color: var(--m-label); font-weight: 600; cursor: default; }
@media (hover: hover) { .crumbs-p button:not(:last-child):hover { background: rgba(var(--m-p), .06); color: var(--m-label); } }
.crumbs-p .sep { color: var(--m-3); font-size: 12px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.tb-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--m-2); font: 600 14px var(--sf); cursor: pointer; display: grid; place-items: center; transition: background-color 120ms ease, transform 120ms var(--ease-out); }
.tb-btn svg { font-size: 15px; }
.tb-btn:active { transform: scale(.94); }
@media (hover: hover) { .tb-btn:hover { background: rgba(var(--m-p), .06); color: var(--m-label); } }
.pill.get { font-size: 13px; padding: 7px 12px; }
.pill.get .gs { display: none; }
.pill.ghost { background: rgba(var(--m-p), .07); color: var(--m-label); }

/* Viewport + world */
.viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; outline: none; cursor: default; }
.viewport.panning, .viewport.space { cursor: grab; }
.viewport.panning:active { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wire { fill: none; stroke: rgba(var(--m-p), .55); stroke-width: 1.8; stroke-linecap: round; pointer-events: stroke; }
.wire.sel { stroke: var(--m-accent); stroke-width: 2; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--m-accent) 45%, transparent)); }
.wire.ghost { stroke: var(--m-accent); stroke-dasharray: 5 4; }
#pa path { fill: rgba(var(--m-p), .55); }
.wire-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }

/* Cards on the playground */
.world .mc { position: absolute; left: 0; top: 0; transform: translate(var(--px), var(--py)) rotate(var(--r, 0deg)); cursor: default; user-select: none; -webkit-user-select: none; transition: box-shadow 160ms ease; }
.world .mc.dragging { transition: none; z-index: 1000 !important; }
.world .mc.dragging:not(.board) { scale: 1.03; }
.world .mc.sel::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--m-accent); pointer-events: none; }
.world .mc.editing { user-select: text; -webkit-user-select: text; cursor: text; }
.world .mc.spawn { animation: spawn 380ms cubic-bezier(.34, 1.4, .64, 1); }
@keyframes spawn { from { opacity: 0; scale: .92; } }
.world .mc [contenteditable] { outline: none; cursor: text; }
.world .mc [contenteditable]:empty::before { content: attr(data-ph); color: var(--m-3); }
.world .sticky { min-height: 90px; }
.world .sticky p, .world .doc p { white-space: pre-wrap; word-break: break-word; }
.world .doc { width: 250px; aspect-ratio: auto; min-height: 230px; max-height: 320px; }
.world .doc.editing { aspect-ratio: auto; min-height: 312px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.world .doc p[data-md] { white-space: normal; }
.world .doc.editing p[data-md] { white-space: pre-wrap; }
.world .doc .ln { display: block; min-height: 1em; }
.world .doc h3 { min-height: 1.15em; }
.world .board { position: absolute; cursor: default; }
.world .board.dragging { scale: 1.03; }
.world .link-card .lk-text b { word-break: break-word; }
.world .link-card:not(.photo) { background: var(--m-material); }

/* Connect handle */
.handle { position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--m-surface); box-shadow: 0 0 0 1.5px var(--m-accent), 0 1px 4px rgba(0,0,0,.2); cursor: crosshair; opacity: 0; transition: opacity 120ms ease, transform 120ms var(--ease-out); z-index: 3; }
.handle::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--m-accent); }
.world .mc.sel .handle { opacity: 1; }
@media (hover: hover) { .world .mc:hover .handle { opacity: 1; } .handle:hover { transform: scale(1.2); } }
.world .mc.drop { box-shadow: 0 0 0 2px var(--m-accent), 0 6px 20px rgba(0,0,0,.18); }

/* Table card editing */
.world .mtable td[contenteditable] { cursor: text; }
.world .mtable td:focus { box-shadow: inset 0 0 0 1px var(--m-accent); border-radius: 4px; }
.add-row { display: flex; align-items: center; gap: 5px; padding: 7px 10px; font-size: 11px; color: var(--m-2); border: 0; background: none; cursor: pointer; width: 100%; border-top: .5px solid rgba(var(--m-p), .08); }
.add-row svg { font-size: 10px; }
@media (hover: hover) { .add-row:hover { background: rgba(var(--m-p), .03); color: var(--m-label); } }

/* Todo card editing */
.world .td-row .t { flex: 1; min-width: 0; }
.world .td-add input { flex: 1; border: 0; background: none; outline: none; font: 12px var(--sf); color: var(--m-label); padding: 0; }
.world .td-add input::placeholder { color: var(--m-3); }

/* Creature card */
.mon-card { width: 150px; border-radius: 10px; overflow: hidden; background: var(--m-surface); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1), 0 2px 12px rgba(0,0,0,.1); }
.mon-card .mon-img { background: #1d1f27; padding: 10px; }
.mon-card .mon-img div { background: #f6f5f0; border-radius: 6px; aspect-ratio: 1; display: grid; place-items: center; }
.mon-card img { width: 78%; image-rendering: pixelated; pointer-events: none; }
.mon-card .mon-meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.mon-card .mon-meta b { font: 400 12px/1.2 var(--pixel); }
.mon-card .mon-meta span { font: 10px var(--sfmono); color: var(--m-2); }

/* Marquee */
.marquee { position: absolute; z-index: 30; border-radius: 3px; background: color-mix(in srgb, var(--m-accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-accent) 70%, transparent); pointer-events: none; }

/* Empty state */
.empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; color: var(--m-2); font-size: 15px; }
.empty p { margin: 0; }
.meta-p { margin-top: 4px !important; font-size: 13px; color: var(--m-3); }

/* Dock (bottom center): glass capsule */
.dock, .zoom, .selbar {
  position: absolute; z-index: 40; display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 16px; background: var(--m-material);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 8px 30px rgba(0,0,0,.14);
}
.dock { left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
.dock button, .zoom button, .selbar button {
  border: 0; background: none; color: var(--m-label); cursor: pointer; border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: background-color 120ms ease, transform 120ms var(--ease-out);
}
.dock button { width: 64px; height: 50px; font-size: 10.5px; font-weight: 500; color: var(--m-2); }
.dock button svg { font-size: 18px; color: var(--m-label); }
.dock button:active, .zoom button:active, .selbar button:active { transform: scale(.93); }
@media (hover: hover) { .dock button:hover, .zoom button:hover, .selbar button:hover { background: rgba(var(--m-p), .07); } }
.zoom { right: 14px; bottom: max(16px, env(safe-area-inset-bottom)); border-radius: 12px; padding: 4px; }
.zoom button { width: 30px; height: 30px; font-size: 13px; color: var(--m-2); }
.zoom .zpct { width: 50px; font: 500 12px var(--sfmono); color: var(--m-label); }
.zsep { width: .5px; height: 18px; margin: 0 3px; background: rgba(var(--m-p), .15); }
.selbar { left: 50%; top: 64px; transform: translateX(-50%); border-radius: 12px; padding: 4px 6px; gap: 4px; }
.selbar[hidden] { display: none; }
.selbar button { width: 30px; height: 30px; font-size: 14px; }
.swatches { display: flex; gap: 5px; padding: 0 4px; }
.swatches:empty { display: none; }
.swatches button { width: 18px; height: 18px; border-radius: 50%; padding: 0; background: var(--c); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.swatches button.on { box-shadow: 0 0 0 2px var(--m-surface), 0 0 0 3.5px var(--m-accent); }
.selbar.connecting [data-cmd="connect"] { background: color-mix(in srgb, var(--m-accent) 16%, transparent); color: var(--m-accent); }

/* Toast */
.toast { position: absolute; left: 50%; bottom: 92px; z-index: 50; transform: translate(-50%, 8px); padding: 8px 14px; border-radius: 999px; background: rgba(28, 26, 23, .88); color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 220ms var(--ease-out); white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ⌘K palette (reuses .palette look from style.css) */
.pal-wrap, .help-wrap { position: absolute; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 80px 16px 16px; background: rgba(0,0,0,.18); }
.pal-wrap[hidden], .help-wrap[hidden] { display: none; }
.pal-wrap .palette { animation: palin 160ms var(--ease-out); }
@keyframes palin { from { opacity: 0; scale: .96; } }
.pal-list li { cursor: pointer; }

/* Help */
.help { width: min(100%, 440px); padding: 22px 24px 18px; border-radius: 16px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 8px 48px rgba(0,0,0,.3); animation: palin 160ms var(--ease-out); }
.help h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.help dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; font-size: 13px; }
.help dt { font: 12px var(--sfmono); color: var(--m-2); white-space: nowrap; }
.help dd { margin: 0; }
.help-foot { display: flex; justify-content: space-between; margin-top: 18px; }
.help-foot .pill { font-size: 13px; padding: 7px 12px; }

@media (max-width: 640px) {
  .dock { left: 8px; right: 8px; transform: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .dock::-webkit-scrollbar { display: none; }
  .dock button { width: 58px; flex: none; }
  .zoom { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px); right: 8px; }
  .zoom [data-cmd="zoom-reset"], .zoom [data-cmd="zoom-in"], .zoom [data-cmd="zoom-out"] { display: none; }
  .pill.get { font-size: 12px; padding: 6px 10px; } .pill.get .gx { display: none; } .pill.get .gs { display: inline; }
  .help dl { grid-template-columns: 1fr; gap: 2px; }
  .help dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .world .mc.spawn, .pal-wrap .palette, .help { animation: none; } }

/* ===== Mesa chrome (from ContentView+Chrome.swift) ===== */
.empty[hidden] { display: none; }
.empty { gap: 8px; font-size: 13px; color: var(--m-2); }
.empty b { font-size: 15px; font-weight: 600; color: var(--m-label); margin-bottom: 4px; }
.empty p { display: flex; align-items: center; justify-content: center; gap: 8px; }
.empty svg { color: var(--m-3); font-size: 14px; }

/* Breadcrumb: glass capsule, mono segments separated by "/" */
.crumbs-p { height: 30px; padding: 0 6px; border-radius: 999px; background: var(--m-material); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1); }
.crumbs-p button { font: 500 11px/1 var(--sfmono); padding: 5px 4px; }
.crumbs-p .sep { font: 11px var(--sfmono); color: var(--m-3); }
.topbar { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.home { border-radius: 10px; background: var(--m-material); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1); width: 34px; height: 34px; }
.top-right .tb-btn { background: var(--m-material); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1); border-radius: 50%; }

/* Left tool palette: vertical glass, 32px buttons, active = accent on accent 18% */
.palette-l {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px;
  border-radius: 12px; background: var(--m-material);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 8px 30px rgba(0,0,0,.12);
}
.palette-l button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--m-label); display: grid; place-items: center; cursor: pointer; font-size: 14px; transition: background-color 120ms ease, transform 120ms var(--ease-out); }
.palette-l button:active { transform: scale(.92); }
@media (hover: hover) { .palette-l button:hover { background: rgba(var(--m-p), .07); } }
.palette-l button.on { color: var(--m-accent); background: color-mix(in srgb, var(--m-accent) 18%, transparent); }
.pdiv { width: 22px; height: 1px; margin: 3px 0; background: rgba(var(--m-p), .12); }

/* Bottom bar */
.bb-left, .bb-right { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 8px; align-items: center; }
.bb-left { left: 20px; }
.bb-right { right: 20px; }
.glass-c { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font: 600 13px var(--sf); color: var(--m-label); background: var(--m-material); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 4px 16px rgba(0,0,0,.1); transition: transform 120ms var(--ease-out), color 120ms ease; }
.glass-c svg { font-size: 13px; }
.glass-c:active, .ai-pill:active { transform: scale(.93); }
.glass-c[disabled] { color: var(--m-4); cursor: default; }
.glass-c.on { color: var(--m-accent); }
.ai-pill { width: 46px; height: 32px; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--m-2); background: var(--m-material); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 4px 16px rgba(0,0,0,.1); transition: transform 120ms var(--ease-out), color 120ms ease; }
.ai-pill svg { font-size: 14px; }
@media (hover: hover) { .ai-pill:hover { color: var(--m-accent); } }
.zoom { left: 50%; right: auto; transform: translateX(-50%); height: 34px; border-radius: 999px; padding: 0 6px; gap: 0; bottom: max(20px, env(safe-area-inset-bottom)); }
.zoom button { width: 28px; height: 28px; border-radius: 8px; }
.zoom .zpct { width: auto; min-width: 46px; font: 500 12px var(--sfmono); }
.zsep { width: 1px; height: 16px; margin: 0 4px; }

/* Tool cursors */
.viewport.tool-spawn { cursor: crosshair; }
.viewport.tool-marquee { cursor: crosshair; }
.viewport.tool-connector { cursor: crosshair; }
.viewport.tool-connector .mc { cursor: crosshair; }

/* Pending note (click-and-type): 220×140, material, accent 90% 1.5pt + glow, blinking caret */
.pending { position: absolute; z-index: 35; width: 220px; min-height: 140px; padding: 12px; border-radius: 10px; background: var(--m-material); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m-accent) 90%, transparent), 0 2px 20px color-mix(in srgb, var(--m-accent) 18%, transparent); font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; transform-origin: 0 0; pointer-events: none; }
.pending[hidden] { display: none; }
.pending .ptext:empty::after { content: "Start typing…"; color: var(--m-3); }
.caret { float: right; width: 1.5px; height: 18px; background: var(--m-accent); animation: blink 1.1s ease-in-out infinite; }
.pending .ptext:not(:empty) + .caret, .pending .ptext:not(:empty) ~ .caret { float: none; display: inline-block; vertical-align: -3px; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }

/* Bookmarks tray: 320 wide, regular material, radius 12 */
.bm-tray { position: absolute; right: 12px; top: 60px; bottom: 70px; z-index: 45; width: 320px; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .14), 0 10px 40px rgba(0,0,0,.18); animation: trayin 220ms var(--ease-out); }
.bm-tray[hidden] { display: none; }
@keyframes trayin { from { opacity: 0; transform: translateX(12px); } }
.bm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 10px 14px; border-bottom: .5px solid rgba(var(--m-p), .1); }
.bm-head b { display: block; font-size: 13px; font-weight: 600; }
.bm-head span { font-size: 11px; color: var(--m-2); }
.bm-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.bm-row { position: relative; padding: 8px 12px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.bm-row + .bm-row::before { content: ""; position: absolute; left: 41px; right: 0; top: 0; height: .5px; background: rgba(var(--m-p), .1); }
@media (hover: hover) { .bm-row:hover { background: rgba(var(--m-p), .04); } }
.bm-l1 { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.av { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1d1f27; color: #f2ede4; font: 600 10px var(--sf); }
.av img { width: 80%; image-rendering: pixelated; }
.bm-l1 b { font-weight: 500; }
.bm-l1 .hd { color: var(--m-2); font-size: 11px; }
.bm-l1 .tm { margin-left: auto; color: var(--m-3); font-size: 10px; }
.bm-text { margin: 4px 0 0 28px; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bm-media { margin: 6px 0 2px 28px; height: 110px; border-radius: 8px; background: #1d1f27 center / auto 80% no-repeat; image-rendering: pixelated; }
.bm-ghost { position: fixed; z-index: 70; width: 260px; pointer-events: none; opacity: .92; transform: rotate(-2deg); border-radius: 12px; background: var(--m-surface); box-shadow: 0 16px 40px rgba(0,0,0,.25); padding: 10px 12px; font-size: 12px; }

/* Tweet card (TweetCardView.swift): radius 12, background, 0.5pt primary 10%, padding 14 */
.tweet { width: 360px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 12px; background: var(--m-surface); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1), 0 2px 12px rgba(0,0,0,.08); }
.tw-head { display: flex; align-items: center; gap: 10px; }
.tw-head .av { width: 40px; height: 40px; font-size: 15px; }
.tw-head b { display: block; font-size: 15px; font-weight: 500; }
.tw-head span { font-size: 13px; color: var(--m-2); }
.tw-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.tw-text .tag { color: var(--m-accent); }
.tw-media { height: 180px; border-radius: 12px; background: #1d1f27 center / auto 82% no-repeat; image-rendering: pixelated; }
.tw-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--m-2); }


/* More sticky papers (NoteStyle.swift) */
.sticky.pink { background: linear-gradient(#ffc4de, #f0b0cf); }
.sticky.purple { background: linear-gradient(#e2d1fc, #cfbded); }
.sticky.orange { background: linear-gradient(#ffd691, #f0c282); }
@media (prefers-color-scheme: dark) {
  .sticky.pink { background: linear-gradient(#65364a, #52213b); }
  .sticky.purple { background: linear-gradient(#463863, #332454); }
  .sticky.orange { background: linear-gradient(#62401f, #4f2b0f); }
}
.handle { display: none !important; }
.selbar { top: 12px; }

@media (max-width: 640px) {
  .palette-l { top: auto; bottom: 66px; left: 8px; right: 8px; transform: none; flex-direction: row; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; border-radius: 14px; }
  .palette-l::-webkit-scrollbar { display: none; }
  .palette-l button { flex: none; }
  .pdiv { width: 1px; height: 22px; margin: 0 3px; flex: none; }
  .bb-left { left: 8px; bottom: 14px; }
  .bb-right { right: 8px; bottom: 14px; }
  .zoom { bottom: 14px; }
  .zoom [data-cmd="zoom-in"], .zoom [data-cmd="zoom-out"] { display: none; }
  .bm-tray { left: 8px; right: 8px; width: auto; top: 56px; bottom: 120px; }
  .ai-panel { right: 8px; left: 8px; width: auto; bottom: 64px; max-height: calc(100% - 130px); }
  .access-pop { right: 8px; left: 8px; width: auto; }

  .selbar { top: 54px; }
}
.world .bd-grid i { background-color: #fff !important; background-blend-mode: normal; }
.world .bd-grid i.t-note { background: linear-gradient(var(--sticky-top), var(--sticky-bot)) !important; }
.world .bd-grid i.t-table, .world .bd-grid i.t-doc { background: var(--m-paper) !important; }
.pending { pointer-events: auto; padding: 0; }
.pending .ptext { display: block; width: 100%; min-height: 140px; padding: 12px; border: 0; background: none; resize: none; outline: none; font: 13px/1.4 var(--sf); color: var(--m-label); caret-color: var(--m-accent); }
.pending .ptext::placeholder { color: var(--m-3); }
.tw-media, .bm-media { background-color: #f6f5f0 !important; }
@media (max-width: 640px) { .bm-tray.lifting { opacity: .08; transition: opacity 160ms ease; } }
.home { width: 34px; height: 34px; padding: 0; background: none; box-shadow: none; backdrop-filter: none; }
.home img { width: 34px; height: 34px; border-radius: 22.5%; box-shadow: 0 2px 8px rgba(120,60,20,.25); }

/* Photo card (image card) */
.photo-card { width: 220px; padding: 6px 6px 8px; border-radius: 10px; background: var(--m-surface); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1), 0 2px 12px rgba(0,0,0,.1); }
.photo-card .ph { aspect-ratio: 400 / 260; border-radius: 6px; background: #ddd center / cover no-repeat; }
.photo-card .ph-cap { display: block; padding: 7px 4px 0; font-size: 12px; font-weight: 500; }
.av.av-photo { background: #ddd center / cover no-repeat; }
.bm-media.bm-photo, .tw-media.tw-photo { background-size: cover !important; background-color: #ddd !important; image-rendering: auto; }

/* First-visit coach card on touch screens */
.coach { position: absolute; left: 12px; right: 12px; top: 58px; z-index: 55; padding: 14px 16px; border-radius: 16px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 10px 40px rgba(0,0,0,.2); animation: palin 200ms var(--ease-out); }
.coach b { font-size: 15px; }
.coach ul { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--m-2); }
.coach li span { color: var(--m-label); font-weight: 600; }
.coach .pill { font-size: 14px; padding: 8px 16px; }

/* Tooltips: small dark label with a keycap, scale-in from the trigger side */
.tip { position: fixed; z-index: 90; display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; pointer-events: none; white-space: nowrap;
  font: 500 12px/1 var(--sf); color: #fff; background: rgba(28, 28, 30, .92); box-shadow: 0 4px 16px rgba(0,0,0,.2);
  animation: tip-in 140ms cubic-bezier(.23, 1, .32, 1); }
.tip[hidden] { display: none; }
.tip.instant { animation: none; }
.tip kbd { font: 500 11px/1 var(--sf); padding: 3px 5px; border-radius: 4px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); }
@keyframes tip-in { from { opacity: 0; transform: scale(.96); } }
@media (prefers-color-scheme: dark) { .tip { background: rgba(245, 245, 247, .95); color: #1c1c1e; } .tip kbd { color: #1c1c1e; background: rgba(0,0,0,.08); } }

/* Context hint pill under the selection (or above the bottom bar for tool modes) */
.ctx-hint { position: fixed; z-index: 45; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  font: 500 12px/1 var(--sf); color: var(--m-label); background: var(--m-material);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .14), 0 4px 18px rgba(0,0,0,.12); }
.ctx-hint[hidden] { display: none; }
.ctx-hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-accent); flex: none; }
.ctx-hint em { font-style: normal; color: var(--m-3); }
.ctx-hint.pop { animation: hint-in 220ms cubic-bezier(.23, 1, .32, 1); }
@keyframes hint-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .tip, .ctx-hint.pop { animation: none; } }

/* Get early access (top bar) */
.top-right button.pill.get { border: 0; cursor: pointer; font-family: inherit; }
.access-pop { position: absolute; top: 54px; right: 12px; z-index: 58; width: 330px; padding: 16px; border-radius: 16px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 10px 40px rgba(0,0,0,.2); animation: palin 180ms var(--ease-out); font-size: 13px; }
.access-pop[hidden] { display: none; }
.access-pop > b { font-size: 15px; }
.access-pop > p { margin: 4px 0 12px; color: var(--m-2); line-height: 1.45; }
.access-more { display: block; margin-top: 2px; font-size: 12px; color: var(--m-2); }
.app .wl-row { background: rgba(var(--m-p), .05); border-color: rgba(var(--m-p), .1); padding: 4px; }
.app .wl-row input[type=email] { font-size: 15px; padding: 6px 10px; color: var(--m-label); }
.app .wl-row button { font-size: 13px; padding: 7px 14px; background: var(--m-accent); color: #fff; }
.app .wl-msg { margin: 6px 0 0 10px; font-size: 12px; min-height: 0; }
.app .wl-msg:empty { display: none; }

/* Empty board: start from a template */
.empty .empty-tpl { pointer-events: auto; margin: 10px auto 0; border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 7px 14px; }

/* Template picker */
.tpl { width: min(100%, 560px); }
.tpl h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.tpl-sub { margin: 4px 0 16px; color: var(--m-2); font-size: 13px; }
.tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tpl-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border: 0; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; background: rgba(var(--m-p), .05); color: var(--m-label); transition: background-color 140ms ease, transform 140ms var(--ease-out); }
.tpl-grid button:active { transform: scale(.97); }
@media (hover: hover) { .tpl-grid button:hover { background: rgba(var(--m-p), .09); } }
.tpl-grid button:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 1px; }
.tpl-grid .ti { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 8px; background: var(--m-surface); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1); color: var(--m-accent); font-size: 15px; }
.tpl-grid b { font-size: 13px; font-weight: 600; }
.tpl-grid span:last-child { font-size: 11.5px; color: var(--m-2); line-height: 1.3; }
.tpl .help-foot { align-items: center; }
.tpl-or { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--m-accent); cursor: pointer; margin-right: auto; }

/* Assistant demo panel */
.ai-pill.on { box-shadow: inset 0 0 0 1.5px var(--m-accent); }
.ai-panel { position: absolute; right: 20px; bottom: 64px; z-index: 46; width: 340px; max-height: calc(100% - 140px); display: flex; flex-direction: column; border-radius: 18px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 6px 40px rgba(0,0,0,.18); font-size: 13px; animation: palin 180ms var(--ease-out); }
.ai-panel[hidden] { display: none; }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 16px; }
.ai-head b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ai-head b svg { color: var(--m-accent); }
.ai-badge { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: var(--m-2); background: rgba(var(--m-p), .07); }
.ai-x { margin-left: auto; width: 26px; height: 26px; }
.ai-scroll { overflow-y: auto; padding: 0 16px 12px; overscroll-behavior: contain; }
.ai-intro { margin: 0 0 10px; color: var(--m-2); line-height: 1.45; }
.ai-log { display: grid; gap: 8px; }
.ai-log:not(:empty) { margin-bottom: 12px; }
.ai-line { line-height: 1.45; color: var(--m-label); animation: palin 200ms var(--ease-out); }
.ai-line.me { justify-self: end; max-width: 85%; padding: 7px 11px; border-radius: 14px 14px 4px 14px; background: var(--m-accent); color: #fff; }
.ai-line.fine { font-size: 12px; color: var(--m-2); }
.ai-line.status { display: flex; align-items: center; gap: 7px; color: var(--m-2); }
.ai-line.status svg { color: var(--m-accent); animation: aipulse 1.2s ease-in-out infinite; }
@keyframes aipulse { 50% { opacity: .35; } }
.ai-line.dots { display: flex; gap: 4px; padding: 4px 0; }
.ai-line.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--m-p), .35); animation: aidot 1s ease-in-out infinite; }
.ai-line.dots i:nth-child(2) { animation-delay: .15s; } .ai-line.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aidot { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }
.ai-approve { padding: 10px 12px; border-radius: 12px; background: var(--m-surface); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12); }
.ai-approve > span { display: flex; gap: 7px; align-items: flex-start; }
.ai-approve > span svg { flex: none; margin-top: 2px; color: var(--m-accent); }
.ai-approve > div { display: flex; gap: 6px; margin-top: 10px; }
.ai-approve .pill { border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 6px 14px; }
.ai-approve .pill:not(.ghost) { background: var(--m-accent); color: #fff; }
.ai-decided { font-size: 12px; color: var(--m-2); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chips button { padding: 6px 11px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; background: rgba(var(--m-p), .06); color: var(--m-label); transition: background-color 140ms ease, transform 140ms var(--ease-out); }
.ai-chips button:active { transform: scale(.96); }
@media (hover: hover) { .ai-chips button:hover { background: rgba(var(--m-p), .11); } }
.ai-panel.running .ai-chips button { opacity: .45; pointer-events: none; }
.ai-ask { margin-top: 14px; padding-top: 12px; border-top: .5px solid rgba(var(--m-p), .12); }
.ai-ask label { display: block; font-weight: 600; margin-bottom: 6px; }
.ai-ask-row { display: flex; gap: 4px; padding: 3px 3px 3px 10px; border-radius: 10px; background: rgba(var(--m-p), .05); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1); }
.ai-ask-row:focus-within { box-shadow: inset 0 0 0 1.5px var(--m-accent); }
.ai-ask-row input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 14px; color: var(--m-label); }
.ai-ask-row button { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(var(--m-p), .12); color: var(--m-label); font: 600 12.5px var(--sf); }
.ai-ask-row button:disabled { opacity: .5; }
.ai-ask-msg { margin: 6px 0 0; font-size: 12px; color: var(--m-2); }
.ai-ask-msg:empty { display: none; }
.ai-ask-msg[data-kind=err] { color: #d1453b; }
.ai-foot { padding: 10px 16px 14px; border-top: .5px solid rgba(var(--m-p), .12); }
.ai-early { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--m-accent); }
.ai-foot .waitlist[hidden] { display: none; }
.ai-panel.running .ai-intro, .ai-panel.running .ai-chips, .ai-panel.running .ai-ask, .ai-panel.running .ai-foot { display: none; }
.ai-panel.running .ai-log { margin-bottom: 0; }
@media (max-width: 640px) { .ai-panel.running .ai-line:not(:nth-last-child(-n+2)) { display: none; } }

/* Claude's cursor */
.claude-cursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: flex; align-items: flex-start; transition: transform 640ms cubic-bezier(.32,.72,0,1), opacity 240ms ease; }
.claude-cursor.instant { transition: none; }
.claude-cursor[hidden] { display: none; }
.claude-cursor.leaving { opacity: 0; }
.claude-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.claude-cursor path { fill: #d97757; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.claude-cursor span { margin: 16px 0 0 -4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; background: #d97757; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.claude-cursor.tap svg { animation: ctap 260ms ease; }
@keyframes ctap { 40% { transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .claude-cursor { transition: none; } }
.app .wl-row:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 22%, transparent); }
@media (max-width: 640px) { .tpl-grid { grid-template-columns: 1fr 1fr; } .tpl { padding: 18px 16px 14px; } .tpl-wrap { padding-top: 60px; } }

/* Live HTML cards (styles live in /style.css under .lv) */
.live-card { width: 320px; border-radius: 12px; overflow: hidden; }
.world .bd-grid i.t-html { background: #fbfaf7 !important; }

/* Claude looking at a card */
.world .mc.noticed { animation: noticed 1.1s ease-out; }
@keyframes noticed { 0% { box-shadow: 0 0 0 0 rgba(217,119,87,.0); } 25% { box-shadow: 0 0 0 4px rgba(217,119,87,.55), 0 0 30px rgba(217,119,87,.35); } 100% { box-shadow: 0 0 0 0 rgba(217,119,87,0); } }

/* Follow-up suggestion in the Assistant log */
.ai-line.next { display: grid; gap: 6px; }
.ai-next-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--m-2); }
.ai-next { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: var(--m-label); background: color-mix(in srgb, var(--m-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-accent) 35%, transparent); transition: transform 140ms var(--ease-out), background-color 140ms ease; }
.ai-next svg { color: #d97757; }
.ai-next:active { transform: scale(.97); }
@media (hover: hover) { .ai-next:hover { background: color-mix(in srgb, var(--m-accent) 18%, transparent); } }
.ai-panel.used .ai-intro { display: none; }

/* Live card picker */
.live-pop { position: fixed; z-index: 58; width: 270px; padding: 8px; border-radius: 16px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 10px 40px rgba(0,0,0,.22); animation: palin 160ms var(--ease-out); }
.live-pop[hidden] { display: none; }
.live-pop header { padding: 6px 8px 8px; display: grid; gap: 1px; }
.live-pop header b { font-size: 13px; }
.live-pop header span, .live-pop footer { font-size: 11.5px; color: var(--m-2); }
.live-pop footer { padding: 8px 8px 4px; border-top: .5px solid rgba(var(--m-p), .1); margin-top: 4px; }
.live-pop button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--m-label); }
@media (hover: hover) { .live-pop button:hover { background: rgba(var(--m-p), .07); } }
.live-pop button .ti { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fbfaf7; color: #c8371f; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); font-size: 14px; flex: none; }
.live-pop button b { display: block; font-size: 13px; font-weight: 500; }
.live-pop button em { display: block; font-style: normal; font-size: 11.5px; color: var(--m-2); }
.palette-l [data-livetool].on { background: rgba(var(--m-p), .1); }

/* Claude's placeholders and citations */
.world .ghost-pos { position: absolute; left: 0; top: 0; z-index: 900; pointer-events: none; }
.world .ghost-pos .ghost-card { position: relative; }
.ai-panel .cite { border: 0; font: inherit; font-size: 12px; padding: 1px 7px 1px 5px; }
.lv-btn.press { transform: scale(.9); }
.lv-sw button.press i { transform: scale(.9); }

/* Files */
.world .file-card { width: 260px; }
.file-card .fc-thumb { height: 130px; background: #eee center / cover no-repeat; }
.file-card .fc-actions span { cursor: pointer; }
@media (hover: hover) { .file-card .fc-actions span:hover { background: rgba(var(--m-p), .05); } }
.viewport.file-over { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--m-accent) 55%, transparent); }
.viewport.file-over::after { content: "Drop files to add them as cards"; position: absolute; left: 50%; top: 70px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--m-accent); color: #fff; font: 600 13px/1 var(--sf); pointer-events: none; }
/* @mention menu */
.mention-pop { position: fixed; z-index: 80; width: 270px; padding: 6px; border-radius: 12px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 10px 30px rgba(0,0,0,.22); }
.mention-pop[hidden] { display: none; }
.mention-pop header { padding: 4px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--m-2); }
.mention-pop button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--m-label); text-align: left; }
.mention-pop button.on { background: var(--m-accent); color: #fff; }
.mention-pop button.on em { color: rgba(255,255,255,.75); }
.mention-pop .pi { display: grid; place-items: center; width: 18px; color: inherit; opacity: .8; }
.mention-pop .mt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-pop em { font-style: normal; font-size: 11px; color: var(--m-2); }
.world .sticky .mention { background: rgba(0,0,0,.08); color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.3); }

/* ==========================================================================
   App shell: navigation panel (left), inspector (right), Inbox, Scratch Pad
   ========================================================================== */
.glassp { background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 10px 40px rgba(0,0,0,.18); }
.nav-p, .insp { position: absolute; top: 58px; bottom: 14px; z-index: 44; display: flex; flex-direction: column; border-radius: 18px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 10px 40px rgba(0,0,0,.18); transition: transform 280ms cubic-bezier(.32,.72,0,1), opacity 220ms ease; }
.nav-p { left: 12px; width: 270px; transform: translateX(-110%); opacity: 0; pointer-events: none; }
.insp { right: 12px; width: 312px; transform: translateX(110%); opacity: 0; pointer-events: none; }
.app.nav-open .nav-p, .app.insp-open .insp { transform: none; opacity: 1; pointer-events: auto; }
.tb-side, .tb-insp { width: 32px; height: 32px; }
.app.nav-open .tb-side, .app.insp-open .tb-insp { color: var(--m-accent); }
/* make room for the panels */
.app.nav-open .crumbs-p { margin-left: 0; }
.app.nav-open .bb-left { left: 296px; }
.app.insp-open .bb-right { right: 336px; }
.app.insp-open .ai-panel { right: 336px; }
.app.insp-open .bm-tray, .app.insp-open .inbox-tray { right: 336px; }
@media (min-width: 761px) { .palette-l { display: none; } }
.empty p:nth-of-type(2) { display: none; }
.nav-p svg, .insp svg { width: 18px; height: 18px; flex: none; }
/* nav */
.np-home { display: flex; align-items: center; gap: 10px; margin: 8px; padding: 9px 10px; border: 0; border-radius: 12px; background: rgba(var(--m-p), .06); color: var(--m-label); font: 600 15px var(--sf); cursor: pointer; }
.np-home svg:first-child { color: var(--m-accent); width: 20px; height: 20px; }
.np-home svg:last-child { margin-left: auto; width: 14px; height: 14px; color: var(--m-2); }
.np-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.np-g { padding: 12px 10px 4px; font-size: 12px; color: var(--m-2); }
.np-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px calc(4px + var(--d, 0) * 16px); border: 0; border-radius: 8px; background: none; color: var(--m-label); font: 14px var(--sf); cursor: pointer; text-align: left; }
.np-row svg { width: 16px; height: 16px; color: var(--m-2); }
.np-row .np-chev { width: 12px; display: grid; place-items: center; }
.np-row .np-chev svg { width: 11px; height: 11px; }
.np-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-row em { font-style: normal; font-size: 12px; color: var(--m-2); font-variant-numeric: tabular-nums; }
.np-row.on { background: color-mix(in srgb, var(--m-accent) 16%, transparent); }
@media (hover: hover) { .np-row:hover:not(.on), .np-home:hover { background: rgba(var(--m-p), .07); } }
.np-pin svg { width: 13px; height: 13px; color: var(--m-accent); }
.np-empty { margin: 2px 10px 6px; font-size: 12px; color: var(--m-3); }
.np-custom { display: flex; align-items: center; gap: 8px; margin: 0 8px 8px; padding: 10px; border: 0; border-top: .5px solid rgba(var(--m-p), .1); background: none; color: var(--m-label); font: 14px var(--sf); cursor: pointer; text-align: left; }
/* inspector */
.in-tabs { display: flex; gap: 16px; padding: 16px 18px 6px; }
.in-tabs button { border: 0; background: none; padding: 0; font: 500 15px var(--sf); color: var(--m-2); cursor: pointer; }
.in-tabs button.on { color: var(--m-label); font-weight: 650; }
.in-body { flex: 1; overflow-y: auto; padding: 8px 16px 16px; }
.in-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--m-p), .06); color: var(--m-2); margin-bottom: 6px; }
.in-search svg { width: 15px; height: 15px; }
.in-search input { flex: 1; border: 0; outline: none; background: none; font: 14px var(--sf); color: var(--m-label); }
.in-g { margin: 14px 2px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--m-2); }
.in-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
.in-tile { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--m-label); font: inherit; }
.in-tile span { display: grid; place-items: center; width: 100%; aspect-ratio: 1.12; border-radius: 12px; background: rgba(var(--m-p), .06); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .08); transition: background-color 140ms ease, transform 140ms var(--ease-out); }
.in-tile span svg { width: 24px; height: 24px; }
.in-tile b { font-size: 12.5px; font-weight: 500; }
.in-tile:active span { transform: scale(.95); }
@media (hover: hover) { .in-tile:hover span { background: rgba(var(--m-p), .1); } }
.in-tile.mac { opacity: .6; }
.in-tile span { position: relative; }
.in-tile.mac span::after { content: "Mac"; position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 5px; font: 600 9px/1.4 var(--sf); background: rgba(var(--m-p), .1); color: var(--m-2); }
.in-tile.blk .bg-g { font: 600 17px var(--sf); }
.in-empty, .in-hint { margin: 14px 2px; font-size: 13px; color: var(--m-2); line-height: 1.45; }
.in-hint { margin-top: 2px; font-size: 12.5px; }
.in-sw { display: flex; gap: 10px; flex-wrap: wrap; }
.in-sw button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.in-sw button.on { box-shadow: 0 0 0 2px var(--m-material), 0 0 0 4px var(--m-accent); }
.in-papers, .in-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.in-papers button, .in-looks button { display: grid; justify-items: center; gap: 6px; padding: 6px 4px 8px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: 12.5px var(--sf); color: var(--m-label); }
.in-papers button.on, .in-looks button.on { background: color-mix(in srgb, var(--m-accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--m-accent); }
.in-papers i { width: 46px; height: 58px; border-radius: 5px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.12); }
.in-looks i { width: 54px; height: 44px; border-radius: 8px; background: rgba(var(--m-p), .1); position: relative; overflow: hidden; }
.in-looks .lk-grid { background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(var(--m-p), .12) 4px 25px), rgba(var(--m-p), .06); }
.in-looks .lk-cover { background: url(/assets/photos/torii.svg) center / cover; }
.in-looks .lk-frosted { background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.15)), url(/assets/photos/bamboo.svg) center / cover; filter: saturate(.8); }
.in-looks .lk-pond { border-radius: 50%; width: 44px; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(255,255,255,.15)); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .2); }
.in-looks .lk-folder { background: linear-gradient(160deg, #f6b06a, #f2994a); border-radius: 4px 8px 8px 8px; }
.in-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(var(--m-p), .07); }
.in-seg button { flex: 1; padding: 6px 0; border: 0; border-radius: 8px; background: none; font: 500 13px var(--sf); color: var(--m-label); cursor: pointer; }
.in-seg button.on { background: var(--m-surface); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.in-info { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin-top: 6px; font-size: 13px; }
.ii-k { color: var(--m-2); }
.ii-v { color: var(--m-label); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ii-bl { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 8px; background: rgba(var(--m-p), .05); margin-bottom: 4px; color: var(--m-label); font: 13px var(--sf); cursor: pointer; text-align: left; }
.ii-bl svg { width: 15px; height: 15px; color: #0a64d6; }
.in-btn { width: 100%; margin-top: 16px; padding: 9px; border: 0; border-radius: 10px; background: rgba(var(--m-p), .08); color: var(--m-label); font: 500 13px var(--sf); cursor: pointer; }
/* inbox tray + badge */
.inbox-tray { position: absolute; right: 20px; bottom: 64px; z-index: 46; width: 340px; max-height: calc(100% - 140px); display: flex; flex-direction: column; border-radius: 18px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .12), 0 10px 40px rgba(0,0,0,.2); animation: palin 180ms var(--ease-out); }
.inbox-tray[hidden] { display: none; }
.inbox-tray .bm-head svg { width: 14px; height: 14px; }
.ib-list { list-style: none; margin: 0; padding: 0 8px 6px; overflow-y: auto; }
.ib-list li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
@media (hover: hover) { .ib-list li:hover { background: rgba(var(--m-p), .05); } }
.ib-list .ci { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; }
.ib-list .ci svg { width: 15px; height: 15px; }
.ib-list .ci-safari { background: linear-gradient(160deg, #3aa0ff, #1167e8); }
.ib-list .ci-pad { background: linear-gradient(160deg, #f6cf4a, #e8a90c); color: #3a2a00; }
.ib-list .ct { flex: 1; min-width: 0; display: grid; }
.ib-list .ct b { font: 500 13px/1.3 var(--sf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--m-label); }
.ib-list .ct em { font-style: normal; font-size: 11.5px; color: var(--m-2); }
.ib-list button { border: 0; border-radius: 7px; padding: 5px 9px; background: var(--m-accent); color: #fff; font: 600 11.5px var(--sf); cursor: pointer; }
.ib-list button.ghost { background: rgba(var(--m-p), .07); color: var(--m-2); padding: 5px 6px; display: grid; place-items: center; }
.ib-list button.ghost svg { width: 12px; height: 12px; }
.ib-zero { display: grid; justify-items: center; gap: 4px; padding: 26px 10px; color: var(--m-2); font-size: 12.5px; }
.ib-zero span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #34c759; color: #fff; font-size: 18px; }
.ib-zero b { color: var(--m-label); font-size: 14px; } .ib-zero em { font-style: normal; }
.ib-foot { padding: 10px 14px 12px; border-top: .5px solid rgba(var(--m-p), .1); font-size: 11.5px; color: var(--m-2); }
.ib-foot kbd, .scratch kbd { display: inline-block; padding: 1px 5px; margin-right: 2px; border-radius: 4px; background: rgba(var(--m-p), .08); font: 600 10.5px var(--sf); }
.bb-right [data-cmd="inbox"] { position: relative; }
.bb-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff3b30; color: #fff; font: 700 10px/16px var(--sf); text-align: center; }
.bb-badge[hidden] { display: none; }
.glass-c svg { width: 17px; height: 17px; }
.scratch { position: absolute; left: 50%; top: 70px; z-index: 70; width: min(520px, calc(100% - 24px)); transform: translateX(-50%); padding: 10px 12px 12px; border-radius: 16px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .16), 0 20px 60px rgba(0,0,0,.35); animation: pad-summon 360ms cubic-bezier(.34,1.4,.64,1); }
.scratch[hidden] { display: none; }
.scratch header { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12.5px; color: var(--m-2); }
.scratch header svg { width: 15px; height: 15px; }
.scratch header kbd { margin-left: auto; }
.scratch input { width: 100%; border: 0; outline: none; padding: 11px 12px; border-radius: 10px; background: rgba(var(--m-p), .06); font: 16px var(--sf); color: var(--m-label); }
@keyframes pad-summon { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.97); } }

/* ==========================================================================
   Cards: Text, Header, Section, X post with video, hero link, paper themes, board looks
   ========================================================================== */
.world .text-card { min-width: 120px; max-width: 420px; padding: 4px 6px; background: none; box-shadow: none; color: var(--m-label); }
.world .text-card p { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.4; }
.world .text-card.sz-s p { font-size: 12.5px; } .world .text-card.sz-l p { font-size: 22px; letter-spacing: -.01em; }
.world .header-card { padding: 6px 16px; border-radius: 999px; background: rgba(var(--m-p), .08); color: var(--ink, var(--m-label)); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .1); }
.world .header-card h2 { margin: 0; font: 600 20px/1.2 var(--sf); letter-spacing: -.01em; white-space: nowrap; }
.world .header-card.sz-s h2 { font-size: 15px; } .world .header-card.sz-l h2 { font-size: 30px; }
.world .section-card { border-radius: 16px; background: rgba(var(--m-p), .025); box-shadow: inset 0 0 0 1px rgba(var(--m-p), .14); }
.world .section-card .sec-label { position: absolute; left: -26px; top: 14px; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 13px var(--sf); color: var(--m-2); letter-spacing: .02em; }
.world .section-card.sel { box-shadow: inset 0 0 0 1.5px var(--m-accent); }
.world .x-card { width: 340px; padding: 14px; background: #fff; color: #0f1419; border-radius: 16px; box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 6px 24px rgba(0,0,0,.18); }
.world .x-card .tw-head b { color: #0f1419; } .world .x-card .tw-head span { color: #536471; }
.world .x-card .tw-text { font-size: 15px; color: #0f1419; }
.world .x-card .tw-text .tag { color: #1d9bf0; }
.world .x-card .tw-foot { color: #536471; font-size: 12.5px; }
.tw-view { color: #1d9bf0; }
.tw-video { position: relative; height: 190px; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; }
.tw-poster { position: absolute; inset: 0; background: center / cover; transition: transform 12s linear, filter 300ms ease; }
.tw-video.playing .tw-poster { transform: scale(1.18) translate(-3%, -2%); }
.tw-video.paused .tw-poster { transform: scale(1.09) translate(-1.5%, -1%); }
.tw-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); transition: opacity 200ms ease, transform 200ms ease; }
.tw-play svg { width: 24px; height: 24px; margin-left: 3px; }
.tw-video.playing .tw-play { opacity: 0; transform: scale(.8); }
.tw-time { position: absolute; left: 10px; bottom: 12px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font: 600 11px var(--sf); }
.tw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); }
.tw-bar i { display: block; height: 100%; width: 0; background: #1d9bf0; transition: width 250ms linear; }
.bm-vid { position: relative; }
.bm-vid::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 30px; text-align: center; }
.world .link-hero { width: 260px; height: 180px; padding: 0; position: relative; overflow: hidden; border-radius: 14px; background: #222; }
.lh-img { position: absolute; inset: 0; background: center / cover; }
.lh-over { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 40px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; }
.lh-over b { font: 600 15px/1.25 var(--sf); }
.lh-over .lk-host { font-size: 11.5px; color: rgba(255,255,255,.75); }
/* paper themes */
.doc.theme-cream { background: #f6efdf; }
.doc.theme-gray { background: #e9e9eb; }
.doc.theme-black, .doc.theme-navy { color: rgba(255,255,255,.9); }
.doc.theme-black { background: #1c1c1e; } .doc.theme-navy { background: #1f3155; }
.doc.theme-black p, .doc.theme-navy p { color: rgba(255,255,255,.72); }
.doc.theme-black b, .doc.theme-navy b { color: #fff; }
.doc.theme-black code, .doc.theme-navy code { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
/* board looks */
.world .board.look-cover { padding: 0; height: 180px; overflow: hidden; position: relative; }
.bc-img { position: absolute; inset: 0; background: center / cover; }
.bc-over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; }
.bc-over b { font: 600 15px var(--sf); } .bc-over em { font-style: normal; font-size: 11.5px; opacity: .8; }
.world .board.look-frosted { padding: 0; height: 180px; position: relative; overflow: hidden; background: rgba(var(--m-p), .05); }
.bf-back { position: absolute; inset: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; filter: blur(6px) saturate(1.2); opacity: .85; }
.bf-back i { border-radius: 6px; background: center / cover; }
.bf-glass { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5); color: var(--m-label); }
.bf-glass b { font: 600 14px var(--sf); } .bf-glass em { font-style: normal; font-size: 11.5px; color: var(--m-2); }
.world .board.look-pond { width: 190px !important; height: 190px; padding: 0; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), rgba(255,255,255,.08) 70%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .2), 0 10px 30px rgba(0,0,0,.18); }
.bp-disc { position: absolute; inset: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; opacity: .9; }
.bp-disc i { border-radius: 4px; background: center / cover; }
.bp-t { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font: 600 13px var(--sf); color: var(--m-label); }
.world .board.look-folder { width: 170px !important; height: 150px; padding: 0; background: none; box-shadow: none; position: relative; }
.bfo-back { position: absolute; inset: 0 0 8px; border-radius: 6px 14px 14px 14px; background: color-mix(in srgb, var(--fc) 75%, #000); }
.bfo-back::before { content: ""; position: absolute; left: 0; top: -10px; width: 64px; height: 14px; border-radius: 6px 10px 0 0; background: inherit; }
.bfo-peek { position: absolute; left: 14px; right: 14px; top: 10px; height: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bfo-peek i { border-radius: 5px; background: #fff center / cover; transform: rotate(-3deg); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.bfo-peek i + i { transform: rotate(4deg); }
.bfo-front { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 12px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 70%, #fff), var(--fc)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.2); color: #fff; }
.bfo-front b { font: 600 14px var(--sf); text-shadow: 0 1px 2px rgba(0,0,0,.2); } .bfo-front em { font-style: normal; font-size: 11.5px; opacity: .85; }

/* ==========================================================================
   Document editor
   ========================================================================== */
.doc-ed-wrap { position: absolute; inset: 0; z-index: 60; display: flex; padding: 58px 14px 14px; background: rgba(0,0,0,.25); }
.app.insp-open .doc-ed-wrap { padding-right: 336px; }
.doc-ed-wrap[hidden] { display: none; }
.doc-ed { flex: 1; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fdfdfc; color: #1d1d1f; box-shadow: 0 20px 70px rgba(0,0,0,.35); animation: palin 220ms var(--ease-out); }
.doc-ed > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: .5px solid rgba(0,0,0,.08); }
.doc-ed > header > svg { width: 18px; height: 18px; color: rgba(0,0,0,.5); }
.de-name { font: 600 14.5px var(--sf); flex: 1; }
.de-mode { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(0,0,0,.06); }
.de-mode button, .de-x { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 7px; background: none; color: rgba(0,0,0,.55); cursor: pointer; }
.de-mode button svg, .de-x svg { width: 17px; height: 17px; }
.de-mode button.on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.de-page { flex: 1; overflow-y: auto; padding: 34px clamp(20px, 7vw, 76px) 60px; }
.de-title { width: 100%; border: 0; outline: none; background: none; font: 700 30px/1.15 var(--sf); letter-spacing: -.02em; color: inherit; margin-bottom: 18px; }
.de-preview { font: 16px/1.6 var(--sf); max-width: 760px; }
.de-preview h2 { font-size: 22px; margin: 26px 0 8px; } .de-preview h3 { font-size: 18px; margin: 20px 0 6px; } .de-preview h4 { font-size: 16px; margin: 16px 0 4px; }
.de-preview p { margin: 0 0 10px; }
.de-preview code { font: 500 13.5px var(--sfmono); padding: 1px 5px; border-radius: 5px; background: rgba(0,0,0,.06); color: #c5293a; }
.de-preview pre { margin: 10px 0 14px; padding: 14px 16px; border-radius: 10px; background: #1d1d1f; overflow-x: auto; }
.de-preview pre code { background: none; color: #f2f2f2; padding: 0; }
.de-preview blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid rgba(0,0,0,.2); background: rgba(0,0,0,.035); color: rgba(0,0,0,.7); border-radius: 0 8px 8px 0; }
.de-preview hr { border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 22px 0; }
.de-preview table { border-collapse: collapse; margin: 10px 0 16px; font-size: 14.5px; }
.de-preview th, .de-preview td { border: 1px solid rgba(0,0,0,.12); padding: 6px 12px; text-align: left; }
.de-preview th { background: rgba(0,0,0,.04); font-weight: 600; }
.de-li { position: relative; padding-left: 20px; margin: 3px 0; } .de-li::before { content: "•"; position: absolute; left: 6px; color: rgba(0,0,0,.45); }
.de-ol { display: flex; gap: 8px; margin: 3px 0; } .de-ol span { color: rgba(0,0,0,.5); min-width: 16px; }
.de-todo { display: flex; align-items: center; gap: 10px; margin: 4px 0; cursor: pointer; }
.de-todo span { width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.3); flex: none; }
.de-todo.done span { background: #007aff; box-shadow: none; } .de-todo.done { color: rgba(0,0,0,.45); text-decoration: line-through; }
.de-gap { height: 8px; }
.de-ph { color: rgba(0,0,0,.4); }
.de-src { width: 100%; max-width: 760px; min-height: 320px; border: 0; outline: none; resize: none; background: none; font: 14px/1.65 var(--sfmono); color: #1d1d1f; }
.de-preview .mention { font-size: .92em; }
.doc-ed[data-theme="black"], .doc-ed[data-theme="navy"] { color: #f2f2f2; }
.doc-ed[data-theme="black"] { background: #1c1c1e; } .doc-ed[data-theme="navy"] { background: #1f3155; } .doc-ed[data-theme="cream"] { background: #f6efdf; } .doc-ed[data-theme="gray"] { background: #e9e9eb; }
.doc-ed[data-theme="black"] .de-src, .doc-ed[data-theme="navy"] .de-src { color: #f2f2f2; }
@media (max-width: 760px) {
  .nav-p { top: 54px; bottom: 74px; left: 8px; width: min(300px, calc(100% - 16px)); z-index: 62; }
  .insp { top: auto; bottom: 74px; left: 8px; right: 8px; width: auto; height: 62%; transform: translateY(110%); z-index: 62; }
  .app.insp-open .bb-right, .app.insp-open .ai-panel, .app.insp-open .inbox-tray, .app.insp-open .bm-tray { right: 8px; }
  .app.nav-open .bb-left { left: 8px; }
  .inbox-tray { left: 8px; right: 8px; width: auto; bottom: 120px; }
  .app.insp-open .doc-ed-wrap { padding-right: 14px; }
  .doc-ed-wrap { padding: 54px 6px 6px; }
}
.app.doc-open .ctx-hint, .app.doc-open .selbar { display: none !important; }
@media (max-width: 640px) { .zoom { display: none !important; } }
/* Snap grid */
.viewport.snap { background-image: radial-gradient(circle, rgba(var(--m-p), .22) 1.1px, transparent 1.4px); background-size: var(--gs, 20px) var(--gs, 20px); background-position: var(--gx, 0) var(--gy, 0); }
.glass-c.on { color: var(--m-accent); }

/* A lighter, narrower inspector */
.insp { width: 252px; top: 62px; bottom: 76px; border-radius: 16px; }
.app.insp-open .bb-right, .app.insp-open .ai-panel, .app.insp-open .bm-tray, .app.insp-open .inbox-tray { right: 276px; }
.app.insp-open .doc-ed-wrap { padding-right: 276px; }
.in-tabs { gap: 12px; padding: 12px 14px 4px; }
.in-tabs button { font-size: 13px; }
.in-body { padding: 6px 12px 12px; }
.in-search { padding: 6px 9px; } .in-search input { font-size: 13px; }
.in-g { margin: 12px 2px 6px; font-size: 10.5px; }
.in-grid { gap: 6px 8px; }
.in-tile { gap: 4px; }
.in-tile span { aspect-ratio: 1.35; border-radius: 10px; }
.in-tile span svg { width: 19px; height: 19px; }
.in-tile b { font-size: 11px; }
.in-tile.mac span::after { top: 4px; right: 4px; font-size: 8px; padding: 0 4px; }
.in-papers i { width: 36px; height: 46px; } .in-looks i { width: 44px; height: 36px; }
.in-sw button { width: 24px; height: 24px; }
@media (max-width: 760px) { .insp { width: auto; top: auto; bottom: 74px; } }
.world .doc.editing::before { display: none; }

/* Guided tour */
.world .mc.tour-focus { z-index: 800 !important; box-shadow: 0 0 0 2px var(--m-accent), 0 0 0 9999px rgba(0,0,0,.52) !important; transition: box-shadow 300ms ease; }
.tour { position: fixed; z-index: 75; width: 290px; padding: 14px 16px 12px; border-radius: 16px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .16), 0 16px 50px rgba(0,0,0,.4); }
.tour[hidden] { display: none; }
.tour.pop { animation: palin 220ms var(--ease-out); }
.tour-dots { display: flex; gap: 4px; margin-bottom: 9px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(var(--m-p), .2); transition: width 200ms ease, background-color 200ms ease; }
.tour-dots i.on { width: 16px; background: var(--m-accent); }
.tour b { display: block; font: 650 15px/1.3 var(--sf); color: var(--m-label); }
.tour p { margin: 5px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--m-2); }
.tour-btns { display: flex; align-items: center; gap: 6px; }
.tour-btns .pill { border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 7px 14px; }
.tour-btns .pill:not(.ghost) { background: var(--m-accent); color: #fff; }
.tour-skip { margin-right: auto; border: 0; background: none; color: var(--m-2); font: 13px var(--sf); cursor: pointer; padding: 0; }

/* Ask Mesa */
.ask-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; cursor: pointer; background: var(--m-material); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .14); color: var(--m-2); font: 13px var(--sf); min-width: 230px; }
.ask-pill svg { width: 14px; height: 14px; color: #d97757; }
.ask-pill span { flex: 1; text-align: left; }
.ask-pill kbd { padding: 2px 6px; border-radius: 5px; background: rgba(var(--m-p), .08); font: 600 11px var(--sf); color: var(--m-2); }
@media (hover: hover) { .ask-pill:hover { color: var(--m-label); } }
.ask-pill.tour-focus { position: relative; z-index: 900; box-shadow: 0 0 0 2px var(--m-accent), 0 0 0 9999px rgba(0,0,0,.52); }
@media (max-width: 760px) { .ask-pill { min-width: 0; padding: 0 10px; } .ask-pill span, .ask-pill kbd { display: none; } }
.pal-list li.pal-ask .pt { color: var(--m-label); font-weight: 600; }
.pal-list li.pal-ask .pi, .pal-list li.pal-try .pi { color: #d97757; }
.pal-list li.pal-try .pt { color: var(--m-2); }
/* Arrival line */
.arrive { position: absolute; left: 50%; top: 62px; z-index: 47; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 9px 16px; border-radius: 999px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .14), 0 10px 30px rgba(0,0,0,.25); font: 500 14px var(--sf); color: var(--m-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrive[hidden] { display: none; }
.arrive svg { width: 14px; height: 14px; color: #d97757; flex: none; }
.arrive.pop { animation: arrive-in 420ms cubic-bezier(.34,1.4,.64,1); }
@keyframes arrive-in { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.96); } }
/* Spaces menu */
.sp-menu { position: fixed; z-index: 90; width: 240px; padding: 6px; border-radius: 14px; background: var(--m-material); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(var(--m-p), .16), 0 14px 40px rgba(0,0,0,.3); animation: palin 140ms var(--ease-out); }
.sp-menu[hidden] { display: none; }
.sp-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--m-label); font: 14px var(--sf); cursor: pointer; text-align: left; }
.sp-menu button svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { .sp-menu button:hover:not(:disabled) { background: var(--m-accent); color: #fff; } }
.sp-menu button:disabled { opacity: .4; cursor: default; }
.sp-menu hr { border: 0; height: .5px; margin: 5px 8px; background: rgba(var(--m-p), .15); }
.np-rename { flex: 1; min-width: 0; border: 0; outline: none; border-radius: 6px; padding: 2px 6px; background: var(--m-surface); color: var(--m-label); font: 600 15px var(--sf); box-shadow: inset 0 0 0 1.5px var(--m-accent); }
/* Sections: drag by the label; the empty space inside behaves like canvas */
.world .section-card { pointer-events: none; }
.world .section-card .sec-label { pointer-events: auto; cursor: grab; padding: 6px 4px; border-radius: 6px; }
@media (hover: hover) { .world .section-card .sec-label:hover { background: rgba(var(--m-p), .08); color: var(--m-label); } }
.viewport.holding { cursor: crosshair; }
/* Folder: its own card type, a glass folder you can open */
.world .folder-card { --fw: 170px; --fh: 205px; width: var(--fw); height: var(--fh); padding: 0; background: none; box-shadow: none; position: relative; perspective: 900px; }
.world .folder-card .mf-peek:not([style*="url"]) { background: linear-gradient(135deg, #fff 0 45%, rgba(255,255,255,.6) 45%); }
.world .folder-card .mf-label b { font-size: 15px; }
.world .folder-card.sel .mf-front { box-shadow: inset 0 0 0 .6px rgba(255,255,255,.28), 0 0 0 2px var(--m-accent), 4px 3px 12px rgba(0,0,0,.24); }
@media (hover: hover) { .world .folder-card:hover .mf-front { transform: rotateY(-16deg); } }
/* Bottom bar: keep the zoom pill clear of the right-hand buttons when the inspector narrows the canvas */
@media (min-width: 641px) and (max-width: 1240px) {
  .app.insp-open .zoom { left: 128px; transform: none; }
  .app.insp-open.nav-open .zoom { left: 404px; }
}
@media (min-width: 641px) and (max-width: 1020px) {
  .app.insp-open.nav-open .zoom { display: none; }
}
@media (max-width: 760px) {
  .app.insp-open .bb-right, .app.insp-open .ai-panel, .app.insp-open .bm-tray, .app.insp-open .inbox-tray { right: 8px; }
  .app.insp-open .zoom { display: none; }
  .app.insp-open .doc-ed-wrap { padding-right: 6px; }
  .insp .in-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .insp .in-tile span { aspect-ratio: auto; height: 56px; }
}

.ai-ask-note { margin: -2px 0 8px; font-size: 12px; line-height: 1.4; color: var(--m-2); }
.ai-near { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--m-accent); font: 600 12.5px var(--sf); cursor: pointer; text-align: left; }
.world .table-card .mtable td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.world .table-card .mtable { width: 100%; }