.studio-shell{ max-width:1180px; margin:0 auto; padding:28px 16px 56px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; }
.studio-side,.studio-main{ background:var(--glass-deep); border:1px solid var(--glass-edge); border-radius:12px;
  isolation:isolate;
  backdrop-filter:var(--frost-deep); -webkit-backdrop-filter:var(--frost-deep); }
.studio-side{ padding:14px; align-self:start; position:sticky; top:14px; }
.studio-sidehead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.studio-sidehead h2{ font-size:18px; }
.side-actions{ display:flex; gap:6px; }
.project-list{ display:grid; gap:6px; }
.project-row{ display:flex; align-items:center; gap:4px; }
.project-item{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; background:transparent; color:var(--ink-2); border:1px solid transparent; border-radius:7px; padding:10px; font-family:inherit; font-weight:750; font-size:14px; line-height:1.2; }
.project-item:hover,.project-item.active{ color:var(--ink); border-color:var(--glass-edge); background:var(--glass-lift); }
.project-item.active{ border-color:var(--brand); }
.project-cog{ flex:0 0 auto; width:34px; height:34px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink-3); font-size:16px; opacity:0; transition:opacity .2s ease, color .2s ease, background .2s ease; }
/* Every project's settings are a hover away, rather than something you can
   only reach once you are already inside that project. */
.project-row:hover .project-cog,.project-row:focus-within .project-cog,.project-cog:focus-visible{ opacity:1; }
.project-item.active ~ .project-cog{ opacity:.62; }
/* Nothing hovers on a touch screen, so there they simply stay. */
@media (hover:none){ .project-cog{ opacity:.62; } }
.project-cog:hover{ background:var(--glass-lift); color:var(--brand); border-color:var(--glass-edge); }
.studio-main{ position:relative; min-height:560px; padding:clamp(18px,4vw,38px); }
.studio-empty{ max-width:530px; margin:80px auto; text-align:center; color:var(--ink-2); }
.studio-empty h1{ color:var(--ink); margin-bottom:10px; }
.studio-gate{ grid-column:1 / -1; min-height:calc(100vh - 150px); display:grid; place-items:center; }
.studio-gate .studio-empty{ margin:0; }
.studio-loading{ display:grid; justify-items:center; }
/* Placeholder cards held in the grid while a project's blocks load. */
.block-skeleton{ display:grid; gap:9px; border-color:var(--line); background:var(--well); pointer-events:none; }
.block-skeleton span{ height:12px; border-radius:6px; background:linear-gradient(90deg,var(--line) 0%,var(--line-strong) 50%,var(--line) 100%); background-size:220% 100%; animation:skeleton-sweep 1.15s ease-in-out infinite; }
.block-skeleton span:first-child{ width:44%; height:16px; }
.block-skeleton span:last-child{ width:72%; }
@keyframes skeleton-sweep{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.block-grid .studio-block{ animation:studio-new .3s cubic-bezier(.2,.75,.28,1) backwards; }
.studio-spinner{ width:26px; height:26px; border:3px solid var(--line-strong); border-right-color:var(--brand); border-radius:50%; animation:spin .85s linear infinite; margin-bottom:14px; }
.project-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:16px; }
.project-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.danger-action:hover{ color:var(--bad)!important; border-color:var(--bad)!important; }
.project-title{ width:100%; border:0; background:transparent; color:var(--ink); font:650 clamp(28px,5vw,42px)/1.1 "Space Grotesk",sans-serif; outline:none; margin:0; }
.section-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.section-filter,.page-filter,.add-card{ border:1px solid var(--glass-edge); background:var(--glass); color:var(--ink-2); border-radius:999px; padding:8px 11px; font-family:inherit; font-weight:750; font-size:13px; line-height:1;
  transition:background .22s ease, border-color .22s ease, color .22s ease; }
.section-filter:not(.active):hover,.page-filter:not(.active):hover,.add-card:hover{ background:var(--glass-lift); }
.section-filter.active{ color:#fff; background:var(--brand); border-color:var(--brand); }
.section-filter:hover,.add-card:hover{ border-color:var(--brand); color:var(--brand); }
.section-filter.active:hover{ color:#fff; }
/* The cog used to sit beside its section and hold that width whether or not it
   was showing, so every section paid for it all the time. It rides on the
   corner of the pill now: no room of its own, and no text underneath it. */
.section-choice{ position:relative; display:flex; align-items:center; }
.section-cog{ position:absolute; z-index:3; top:-7px; right:-7px; width:20px; height:20px; padding:0;
  display:grid; place-items:center; border:1px solid var(--glass-edge); border-radius:50%;
  background:var(--card); color:var(--ink-3); font-size:10px; line-height:1; opacity:0;
  transition:opacity .18s ease,background .18s ease,color .18s ease,border-color .18s ease; }
.section-choice:hover .section-cog,.section-choice:focus-within .section-cog,.section-cog:focus-visible{ opacity:1; }
.section-cog:hover{ background:var(--glass-lift); border-color:var(--brand); color:var(--brand); }
@media (hover:none){ .section-cog{ opacity:.72; } }
.section-popover{ position:absolute; z-index:4; top:35px; right:0; min-width:150px; padding:5px; border:1px solid var(--line); border-radius:8px; background:var(--card); box-shadow:0 12px 28px #0005; display:grid; }
.section-popover button{ border:0; border-radius:5px; background:transparent; color:var(--ink-2); text-align:left; padding:8px; font-family:inherit; font-weight:700; font-size:12px; }.section-popover button:hover{ background:var(--glass-lift); color:var(--ink); }.section-popover .danger{ color:var(--bad); }
.page-bar{ display:flex; gap:7px; flex-wrap:wrap; padding:0 0 15px; margin-bottom:15px; border-bottom:1px solid var(--line); }.page-filter.active{ color:var(--ink); border-color:var(--brand); background:var(--brand-soft); }.section-lock-note{ color:var(--ink-3); font-size:13px; margin:-3px 0 14px; }.add-row.is-locked{ opacity:.6; }
.block-grid{ position:relative; min-height:180px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.studio-block{ position:relative; min-width:0; border:1px solid transparent; border-radius:10px; padding:14px; background:transparent; transition:transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease; }
.studio-block:hover,.studio-block:focus-within{ border-color:var(--glass-edge); background:var(--glass-lift); box-shadow:0 8px 20px #0002; }
.studio-block:focus-within{ border-color:color-mix(in srgb,var(--brand) 65%,var(--line)); }
.studio-block.is-pending{ border-color:color-mix(in srgb,var(--brand) 52%,var(--line)); background:color-mix(in srgb,var(--brand) 5%,var(--well)); animation:studio-new .34s cubic-bezier(.2,.75,.28,1) backwards; }
.studio-block.save-failed{ border-color:var(--bad); }
.studio-block.idea .block-kicker{ color:var(--gold); }
.studio-block.lesson .block-kicker{ color:var(--brand); }
/* The held card keeps its slot as the gap. Its entry animation is off, or
   every move would replay the fade. */
/* The held card leaves the layout and rides under the pointer. */
.studio-block.is-floating{ position:fixed; z-index:60; margin:0; pointer-events:none;
  border-color:var(--brand); background:var(--well); box-shadow:0 18px 44px #000a;
  transform:none!important; transition:none!important; animation:none!important; }
.studio-block.no-entry{ animation:none!important; }
/* The gap it left behind, which is what actually moves between slots. */
.block-gap{ border:1px dashed color-mix(in srgb,var(--brand) 60%,transparent); border-radius:10px;
  background:color-mix(in srgb,var(--brand) 7%,transparent); animation:none!important; }
.block-grid.is-reordering{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
.block-grid.is-reordering .drag-handle{ opacity:1; cursor:grabbing; }
.block-kicker{ color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:8px; }
.block-title{ width:calc(100% - 28px); border:0; border-radius:5px; background:transparent; color:var(--ink); font:750 18px/1.25 "Space Grotesk",sans-serif; outline:none; padding:3px 4px; margin-left:-4px; transition:background .22s ease, box-shadow .22s ease; }
.studio-block:hover .block-title,.studio-block:focus-within .block-title{ background:var(--glass-lift); }
.block-title:focus{ box-shadow:0 2px 0 var(--brand); }
.block-delete{ position:absolute; top:10px; right:10px; border:0; background:transparent; color:var(--ink-3); font-size:19px; line-height:1; }
.block-delete:hover{ color:var(--bad); }
.drag-handle{ touch-action:none; position:absolute; top:10px; right:38px; border:0; border-radius:5px; background:transparent; color:var(--ink-3); font-size:18px; line-height:1; cursor:grab; opacity:0; transition:opacity .2s ease, background .2s ease; }
.drag-handle:active{ cursor:grabbing; }
.studio-block:hover .drag-handle,.studio-block:focus-within .drag-handle{ opacity:1; }
.drag-handle:hover{ background:var(--glass-lift); color:var(--brand); }
.rich-tools{ display:flex; gap:5px; margin:12px 0 8px; max-height:0; overflow:hidden; opacity:0; transform:translateY(-4px); transition:max-height .24s ease, opacity .2s ease, transform .24s ease; }
.studio-block:focus-within .rich-tools{ max-height:42px; opacity:1; transform:translateY(0); }
.rich-tools button{ min-width:29px; border:1px solid var(--line); border-radius:5px; background:var(--card); color:var(--ink-2); padding:5px; font-family:inherit; font-weight:800; font-size:12px; line-height:1; }
.rich-tools button:hover{ color:var(--brand); border-color:var(--brand); }
.block-body{ min-height:62px; outline:none; color:var(--ink-2); line-height:1.55; overflow-wrap:anywhere; border-radius:6px; padding:4px; margin:8px -4px 0; transition:background .22s ease, box-shadow .22s ease; }
.studio-block:hover .block-body,.studio-block:focus-within .block-body{ background:var(--glass-lift); }
.block-body:focus{ background:var(--card)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 55%,transparent); }
.block-body:empty::before{ content:attr(data-placeholder); color:var(--ink-3); }
/* Fixed pixel sizes. Relative units compounded whenever a heading ended up
   nested inside another heading, so each new heading press grew the text. */
.block-body h1,.block-body h2,.block-body h3,.block-body h4,.block-body h5,.block-body h6{ margin:8px 0; color:var(--ink); font-family:"Space Grotesk",sans-serif; font-weight:700; line-height:1.3; }
.block-body h1{ font-size:25px; }.block-body h2{ font-size:20px; }.block-body h3{ font-size:17px; }
.block-body h4,.block-body h5,.block-body h6{ font-size:17px; }
.block-body li h1,.block-body li h2,.block-body li h3{ margin:0; }
.block-body p{ margin:7px 0; }
.block-body ul,.block-body ol{ margin:7px 0; padding-left:24px; }
.task-row{ display:flex; align-items:center; gap:9px; margin:13px 0 8px; color:var(--ink-2); font-weight:750; }
.task-row input{ width:19px; height:19px; accent-color:var(--good); }
.studio-block.done .block-title{ color:var(--ink-3); text-decoration:line-through; }
.block-date{ width:100%; margin-top:11px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:6px; padding:8px 9px; font-family:inherit; font-weight:700; font-size:13px; color-scheme:dark; }
.lesson-practice{ width:100%; margin-top:11px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:6px; padding:9px; font-family:inherit; font-weight:700; font-size:13px; }
.lesson-answer,.image-url{ width:100%; margin-top:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:6px; padding:9px; font-family:inherit; font-weight:700; font-size:13px; }
.lesson-quiz{ margin-top:10px; padding:11px; border-radius:7px; background:var(--well); color:var(--ink-2); }
.lesson-quiz p{ margin:0 0 9px; }
.task-list{ display:grid; gap:8px; margin-top:10px; }
.task-list label{ display:flex; align-items:center; gap:8px; min-width:0; }
.task-list input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--good); flex:0 0 auto; }
.task-list input[type="text"],.task-list input:not([type]){ min-width:0; width:100%; border:0; border-bottom:1px solid transparent; background:transparent; color:var(--ink-2); padding:6px 2px; font-family:inherit; font-weight:700; font-size:14px; outline:none; }
.task-list label:focus-within input[type="text"],.task-list label:focus-within input:not([type]){ border-color:var(--brand); }
.add-task,.table-tools button{ width:max-content; border:0; background:transparent; color:var(--brand); padding:5px 2px; font-family:inherit; font-weight:800; font-size:13px; }
.status-select{ width:100%; margin-top:10px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); padding:9px; font-family:inherit; font-weight:750; font-size:13px; }
.idea-stage{ border-color:color-mix(in srgb,var(--gold) 45%,var(--line)); }
.table-tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }.table-tools span{ color:var(--ink-3); font-size:11px; font-weight:700; }
.table-frame{ position:relative; margin:8px -4px 0; }
.block-table{ overflow-x:auto; padding:0; margin:0; }
.block-table table{ width:100%; table-layout:fixed; border-collapse:collapse; color:var(--ink-2); }
.block-table th,.block-table td{ min-width:0; height:39px; border:1px solid var(--line); padding:8px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.block-table th{ color:var(--ink); background:var(--well); font-weight:750; }
.block-table .selected-cell{ outline:2px solid var(--brand); outline-offset:-2px; background:var(--brand-soft); }
/* While cells are being dragged across, the browser's own text selection would
   fight the cell selection. */
.block-table.is-selecting,.block-table.is-resizing{ user-select:none; -webkit-user-select:none; }
.table-resizers{ position:absolute; inset:0; pointer-events:none; }
.col-resizer{ position:absolute; top:0; bottom:0; width:11px; margin-left:-6px; cursor:col-resize; pointer-events:auto; touch-action:none; }
.col-resizer::after{ content:""; position:absolute; top:0; bottom:0; left:5px; width:2px; border-radius:2px; background:var(--brand); opacity:0; transition:opacity .16s ease; }
.col-resizer:hover::after,.is-resizing~.table-resizers .col-resizer::after{ opacity:.85; }
.image-preview{ display:grid; place-items:center; min-height:88px; margin-top:10px; overflow:hidden; border:1px dashed var(--line-strong); border-radius:7px; color:var(--ink-3); font-size:13px; text-align:center; }
.image-preview img{ display:block; width:100%; max-height:360px; object-fit:contain; }

.read-only .image-drop,.read-only .image-tools,
.read-only .table-resizers,.read-only [data-import-lesson],.read-only .block-delete,.read-only .drag-handle,.read-only .rich-tools,.read-only .add-row,.read-only [data-new-section],.read-only .block-date,.read-only .lesson-practice,.read-only .lesson-answer,.read-only .image-url,.read-only .table-tools,.read-only .idea-stage{ display:none; }
.read-only .studio-block:hover,.read-only .studio-block:focus-within{ box-shadow:none; background:transparent; border-color:transparent; }
.read-only .block-title,.read-only .block-body{ cursor:default; }
/* Step list beside one open step, so the block keeps a steady height no
   matter how long the lesson runs. */
.lesson-builder{ display:grid; grid-template-columns:minmax(158px,204px) 1fr; gap:11px; margin-top:10px; align-items:start; }
.step-rail{ display:grid; gap:5px; align-content:start; max-height:326px; overflow:auto; padding:1px; }
.step-chip{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink-2); text-align:left; transition:border-color .18s ease, background .18s ease; }
.step-chip:hover{ border-color:var(--brand); }
.step-rail:not(.is-locked) .step-chip{ cursor:grab; touch-action:manipulation; }
.step-rail.is-reordering{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
.step-rail.is-reordering .step-chip{ cursor:grabbing; }
.step-chip.dragging{ opacity:.55; border-color:var(--brand); box-shadow:0 6px 18px #0007; }
.step-chip.active{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 13%,var(--card)); }
.step-chip-num{ display:grid; place-items:center; flex:none; width:21px; height:21px; border-radius:6px; background:var(--well); color:var(--ink-3); font-family:inherit; font-weight:800; font-size:11px; line-height:1; }
.step-chip.active .step-chip-num{ background:var(--brand); color:#fff; }
.step-chip-text{ display:grid; gap:3px; min-width:0; }
.step-chip-text b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font:750 13px/1.2 "Space Grotesk",sans-serif; }
.step-chip-text>span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font-family:inherit; font-weight:800; font-size:10px; line-height:1; letter-spacing:.07em; text-transform:uppercase; }
.step-rail>.add-task{ justify-self:start; }

/* Lesson details fold away once they are set. */
.lesson-details-toggle{ display:flex; align-items:center; gap:9px; width:100%; margin-top:10px; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink-2); font-family:inherit; font-weight:800; font-size:11px; line-height:1; letter-spacing:.07em; text-transform:uppercase; text-align:left; transition:border-color .18s ease; }
.lesson-details-toggle:hover{ border-color:var(--brand); }
.lesson-details-toggle .chev{ flex:none; color:var(--ink-3); }
.lesson-details-peek{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font-weight:700; letter-spacing:0; text-transform:none; }
.lesson-dot{ display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:7px; color:#fff; font-size:12px; letter-spacing:0; }/* Only the step that was just swapped in animates; the rail and the rest of the card stay put. */
.lesson-step{ border:1px solid var(--line); border-radius:7px; padding:10px; background:var(--card); animation:studio-new .2s cubic-bezier(.2,.75,.28,1) backwards; }.lesson-step-head{ display:flex; align-items:center; gap:7px; margin-bottom:8px; color:var(--ink-3); font-family:inherit; font-weight:800; font-size:11px; line-height:1; text-transform:uppercase; letter-spacing:.07em; }.lesson-step-head select{ margin-left:auto; border:1px solid var(--line); border-radius:5px; background:var(--well); color:var(--ink-2); padding:5px; font-family:inherit; font-weight:700; font-size:12px; }.lesson-step-head button{ border:0; background:transparent; color:var(--ink-3); font-size:17px; line-height:1; padding:2px 4px; }
.lesson-step-head button:not(:disabled):hover{ color:var(--brand); }
.step-move{ font-size:14px; }
.step-move:disabled{ opacity:.3; }.lesson-step textarea,.lesson-step input{ width:100%; border:1px solid var(--line); border-radius:6px; background:var(--well); color:var(--ink); padding:8px; font-family:inherit; font-weight:700; font-size:13px; line-height:1.45; outline:none; margin-top:7px; }.lesson-step textarea{ min-height:62px; resize:vertical; }.lesson-step textarea:focus,.lesson-step input:focus{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 25%,transparent); }.lesson-card{ margin-top:10px; }
.lesson-card-head{ display:flex; align-items:center; gap:10px; }
.lesson-card-head>div{ display:grid; gap:3px; min-width:0; }
.lesson-card-head b{ color:var(--ink); font-family:inherit; font-weight:800; font-size:11px; line-height:1; letter-spacing:.07em; text-transform:uppercase; }
.lesson-card-head span{ color:var(--ink-3); font-family:inherit; font-weight:700; font-size:12px; line-height:1.2; }
.lesson-card-blurb{ margin:10px 0 0; color:var(--ink-2); font-size:14px; line-height:1.5; }
.lesson-card-steps{ display:grid; gap:5px; margin:11px 0 0; padding:0; list-style:none; counter-reset:none; }
.lesson-card-steps li{ display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font-family:inherit; font-weight:700; font-size:13px; line-height:1.3; }
.lesson-card-steps li span{ display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:6px; background:var(--well); color:var(--ink-3); font-family:inherit; font-weight:800; font-size:11px; line-height:1; }
.lesson-actions{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
/* Lesson details, matching the fields a published course unit carries. */
.lesson-meta{ animation:studio-new .22s ease backwards; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-top:10px; padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.lesson-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.lesson-field.tiny{ max-width:112px; }
.lesson-field.wide{ grid-column:1/-1; }
.lesson-field>span{ color:var(--ink-3); font-family:inherit; font-weight:800; font-size:11px; line-height:1; letter-spacing:.07em; text-transform:uppercase; }
.lesson-field input,.lesson-field textarea{ width:100%; border:1px solid var(--line); border-radius:6px; background:var(--well); color:var(--ink); padding:8px; font-family:inherit; font-weight:700; font-size:13px; line-height:1.45; outline:none; }
.lesson-field textarea{ min-height:54px; resize:vertical; }
.lesson-field input:focus,.lesson-field textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 25%,transparent); }
.lesson-field input[type="color"]{ height:36px; padding:3px; cursor:pointer; }
.choice-list{ display:grid; gap:6px; margin-top:9px; }
.choice-hint{ color:var(--ink-3); font-family:inherit; font-weight:800; font-size:11px; line-height:1; letter-spacing:.07em; text-transform:uppercase; }
.choice-row{ display:flex; align-items:center; gap:8px; }
.choice-row input[type="radio"]{ flex:none; width:16px; height:16px; margin:0; accent-color:var(--good); }
.choice-row input[data-choice-text]{ flex:1; min-width:0; margin-top:0; }
.choice-row button{ flex:none; border:0; background:transparent; color:var(--ink-3); font-size:16px; line-height:1; padding:2px 4px; }
.choice-row button:hover{ color:var(--bad); }
.choice-list>.add-task{ justify-self:start; }
/* Studio teaching text is written in a textarea, so keep its line breaks. */
.studio-practice-host .teach .body{ white-space:pre-line; }
.add-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:18px; margin-top:16px; border-top:1px solid var(--line); }
.add-row span{ color:var(--ink-3); font-size:13px; font-weight:800; }
.save-dot{ display:inline-flex; align-items:center; gap:4px; margin-left:7px; color:var(--ink-3); font-size:10px; letter-spacing:0; text-transform:none; }
.save-dot::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--brand); animation:save-pulse .85s ease-in-out infinite; }
@keyframes save-pulse{ 50%{ opacity:.25; transform:scale(.7); } }
@keyframes studio-new{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:translateY(0); } }
.settings-top{ border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:18px; }
.settings-top h1{ margin:12px 0 5px; font-size:34px; }
.settings-top p,.settings-card p{ color:var(--ink-2); margin:5px 0; }
.settings-card{ border:1px solid var(--line); border-radius:10px; padding:16px; margin:12px 0; }
.settings-card h2{ font-size:19px; margin:0 0 8px; }
.settings-inline{ display:flex; gap:10px; align-items:center; margin-top:12px; }
.settings-inline .dialog-input{ flex:1; }
.section-settings{ display:grid; gap:7px; margin-top:12px; }
.section-settings>div{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:8px; }
.section-settings .btn{ width:auto; padding:8px 11px; }
.share-list{ display:grid; gap:7px; margin:11px 0; }
.share-row{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.share-row.pending{ border-style:dashed; }
.share-who{ display:grid; gap:2px; min-width:0; flex:1; }
.share-who b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font:750 14px/1.2 "Space Grotesk",sans-serif; }
.share-who small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font-family:inherit; font-weight:700; font-size:12px; line-height:1.2; }
.share-role{ flex:none; color:var(--ink-3); font-family:inherit; font-weight:800; font-size:10px; line-height:1; letter-spacing:.08em; text-transform:uppercase; }
.share-invite{ flex-wrap:wrap; }
.share-invite input{ flex:1; min-width:170px; }
.share-note{ margin-top:8px; color:var(--ink-3); font-size:12px; }
.settings-danger{ border-color:color-mix(in srgb,var(--bad) 45%,var(--line)); }
.studio-practice-overlay{ position:fixed!important; z-index:9999!important; inset:0!important; display:block!important; overflow:auto; background:#0b0d18!important; animation:studio-new .25s ease both; }.studio-practice-host{ position:relative; min-height:100vh; background:#0b0d18; }.studio-practice-host .app{ min-height:100vh; padding-top:24px; background:#0b0d18; }.studio-practice-close{ display:none; }
@media(max-width:780px){ .lesson-builder{ grid-template-columns:1fr; }.step-rail{ grid-auto-flow:column; grid-auto-columns:minmax(148px,1fr); max-height:none; overflow-x:auto; }.studio-shell{ grid-template-columns:1fr; padding-top:18px; }.studio-side{ position:static; }.block-grid{ grid-template-columns:1fr; } }

/* Live collaboration never replays the page animation. */
.studio-block.remote-patch{ animation:none!important; transition:background .18s ease, border-color .18s ease; }
.collab-people{ display:flex; align-items:center; gap:5px; margin-left:auto; }
.collab-person{ position:relative; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:color-mix(in srgb,var(--brand) 22%,var(--card)); border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line)); color:var(--ink); font:800 9px/1 "IBM Plex Mono",monospace; }
.collab-person i{ position:absolute; right:-1px; bottom:-1px; width:7px; height:7px; border-radius:50%; border:1px solid var(--card); background:var(--good); }
.studio-block{ position:relative; }
.collab-marker{ position:absolute; z-index:4; right:10px; top:9px; max-width:calc(100% - 78px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; border-radius:5px; padding:3px 6px; background:color-mix(in srgb,var(--brand) 90%,#111); color:white; font:700 10px/1.2 "IBM Plex Mono",monospace; box-shadow:0 2px 8px #0004; }
.collab-selection-rect{ position:absolute; z-index:3; pointer-events:none; border-radius:2px; background:color-mix(in srgb,var(--brand) 30%,transparent); outline:1px solid color-mix(in srgb,var(--brand) 60%,transparent); }

/* Viewer avatars belong with the project controls, not between the title and them. */
.project-actions .collab-people{ margin:0 3px 0 0; flex:none; }
.collab-people:empty{ display:none; }

/* Project ownership is visible before opening anything. */
.project-group{ display:grid; gap:5px; margin:0 0 14px; }
.project-group:last-child{ margin-bottom:0; }
.project-group h3{ display:flex; align-items:center; justify-content:space-between; margin:4px 7px 3px; color:var(--ink-3); font:800 10px/1 "IBM Plex Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }
.project-group h3 span{ display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--well); color:var(--ink-3); font-size:9px; }
.project-row.is-shared{ border-left:2px solid color-mix(in srgb,var(--brand) 58%,transparent); padding-left:3px; }
.project-item{ display:grid; gap:3px; min-height:47px; }
.project-row-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-item small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font:700 10px/1.15 "IBM Plex Mono",monospace; }
.project-item.shared small{ color:color-mix(in srgb,var(--brand) 72%,var(--ink-3)); }
.project-list-empty{ margin:14px 7px; color:var(--ink-3); font-size:12px; }
.project-heading{ min-width:0; }
.project-title{ width:auto; }
.project-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; color:var(--ink-3); font:700 10px/1.2 "IBM Plex Mono",monospace; }
.project-meta span{ padding:4px 6px; border:1px solid var(--line); border-radius:999px; background:var(--well); }
.project-meta .shared{ color:color-mix(in srgb,var(--brand) 82%,var(--ink)); border-color:color-mix(in srgb,var(--brand) 32%,var(--line)); }

.collab-face{display:block;width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center}.collab-person.has-face{overflow:hidden;background:var(--well)}.authbtn.has-avatar{background-size:cover!important;background-position:center!important;color:transparent!important}

.collab-person{width:34px!important;height:34px!important;overflow:visible!important}.collab-person.has-face{overflow:visible!important}.collab-face{width:34px!important;height:34px!important;overflow:hidden;border-radius:50%}.collab-person i{right:-3px!important;bottom:-2px!important;width:10px!important;height:10px!important;border:2px solid var(--card)!important;z-index:2}

/* Studio collaboration upgrades */
.studio-upgrade-overlay{position:fixed;inset:0;background:rgba(5,8,16,.76);display:grid;place-items:center;padding:18px;z-index:1000}.studio-upgrade-dialog{position:relative;width:min(620px,100%);max-height:min(78vh,760px);overflow:auto;background:var(--card,#171d2b);border:1px solid var(--line,#38425a);border-radius:14px;padding:24px;color:var(--ink,#f5f7ff);box-shadow:0 24px 80px #0008}.studio-upgrade-dialog h2{margin:0 34px 8px 0}.upgrade-close{position:absolute;right:14px;top:12px;border:0;background:none;color:var(--ink-3,#aab3c8);font-size:28px}.upgrade-copy{color:var(--ink-3,#aab3c8);line-height:1.5}.upgrade-template-list,.upgrade-history-list,.upgrade-comments,.upgrade-task-list{display:grid;gap:10px;margin-top:16px}.upgrade-template,.upgrade-history,.upgrade-comments article,.upgrade-task{background:var(--well,#111725);border:1px solid var(--line,#38425a);border-radius:10px;padding:13px;text-align:left;color:inherit}.upgrade-template{display:grid;gap:4px}.upgrade-template span,.upgrade-history span,.upgrade-task small{color:var(--ink-3,#aab3c8)}.upgrade-history{display:grid;gap:7px}.upgrade-history .btn{justify-self:start}.upgrade-task{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-items:center}.upgrade-task small{grid-column:2}.upgrade-comment-form{display:grid;gap:9px;margin-top:14px}.upgrade-comment-form textarea,.upgrade-live-text{width:100%;min-height:86px;background:var(--well,#111725);border:1px solid var(--line,#38425a);border-radius:9px;color:var(--ink,#f5f7ff);padding:11px;font:inherit}.upgrade-comment-form .btn{justify-self:end}.upgrade-comments article p{margin:6px 0 0;white-space:pre-wrap}.upgrade-mention{color:var(--brand,#8065ff);font-weight:700}.upgrade-comment{position:absolute;top:10px;right:42px;border:0;background:transparent;color:var(--ink-3,#aab3c8);font:600 11px/1 var(--mono,monospace);opacity:0;transition:opacity .18s}.studio-block:hover .upgrade-comment,.studio-block:focus-within .upgrade-comment{opacity:1}.upgrade-slash{position:fixed;z-index:1010;display:grid;min-width:170px;background:var(--card,#171d2b);border:1px solid var(--line,#38425a);border-radius:9px;padding:5px;box-shadow:0 12px 30px #0008}.upgrade-slash button{border:0;background:transparent;color:var(--ink,#f5f7ff);padding:9px;text-align:left;border-radius:6px}.upgrade-slash button:hover{background:#ffffff12}.upgrade-live-label{font:600 11px/1.2 var(--mono,monospace);color:var(--brand,#8065ff);margin-bottom:8px}.upgrade-live-text{min-height:180px;resize:vertical;line-height:1.55}@media(max-width:650px){.project-actions .btn.ghost.sm{padding:8px}.upgrade-comment{opacity:1}.studio-upgrade-dialog{padding:18px}}

/* Keep the Studio shell inside a narrow viewport even when header controls grow. */
.studio-shell,.studio-side,.studio-main,.studio-sidehead,.side-actions{min-width:0}
@media(max-width:780px){.studio-shell{grid-template-columns:minmax(0,1fr);width:100%;overflow-x:clip}.studio-sidehead{align-items:flex-start;flex-wrap:wrap}.side-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.project-actions{flex-wrap:wrap;justify-content:flex-end}.project-title{overflow-wrap:anywhere}.studio-main{width:100%;min-width:0}}

/* Comments belong in the block label, where the count stays visible and never overlaps controls. */
.block-kicker .upgrade-comment{position:static;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:3px 6px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink-3);font:700 10px/1.1 "IBM Plex Mono",monospace;opacity:1}.block-kicker .upgrade-comment:hover,.block-kicker .upgrade-comment.has-comments{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 48%,var(--line));background:color-mix(in srgb,var(--brand) 10%,transparent)}.studio-block .upgrade-live-label,.studio-block .upgrade-live-text{display:none!important}

/* Presence belongs to the project identity, not to action buttons or tabs. */
.project-presence{display:flex;align-items:center;gap:8px;margin-top:9px;color:var(--ink-3);font:700 10px/1 "IBM Plex Mono",monospace}.project-presence[hidden]{display:none}.project-presence .collab-people{margin-left:0}.project-presence .collab-person{width:29px;height:29px;font-size:10px}.project-presence .collab-person i{width:8px;height:8px}

/* A collaborative note is a real document editor. Carets and selections use
   each collaborator's assigned Yjs awareness color without moving the card. */
.collab-tools{margin-top:12px}.block-body .tiptap{min-height:62px;outline:0}.block-body .tiptap p:first-child{margin-top:0}.block-body .tiptap p:last-child{margin-bottom:0}.block-body .tiptap .collaboration-cursor__caret{position:relative;border-left:2px solid var(--cursor-color,#8466ff);margin-left:-1px;margin-right:-1px;pointer-events:none}.block-body .tiptap .collaboration-cursor__label{position:absolute;left:-1px;top:-1.35em;z-index:5;white-space:nowrap;border-radius:4px 4px 4px 0;padding:2px 5px;background:var(--cursor-color,#8466ff);color:#fff;font:700 10px/1.2 "IBM Plex Mono",monospace}.block-body .tiptap .collaboration-cursor__selection{background:color-mix(in srgb,var(--cursor-color,#8466ff) 24%,transparent)}.studio-block.collab-offline .block-kicker::after{content:' · offline';color:var(--warn,#e0a42d)}

/* ---------- reading an earlier version ----------
   The bar is the only thing telling you the page is not the present, so it
   stays visible the whole time you are scrolling through the old copy, and
   carries the way back. */
.preview-bar{
  position:sticky; top:58px; z-index:6;
  display:flex; align-items:center; gap:12px;
  margin:-4px 0 16px; padding:11px 14px;
  border:1px solid color-mix(in srgb,var(--warn,#e0a33a) 52%,transparent);
  border-left:3px solid var(--warn,#e0a33a);
  border-radius:10px;
  background:color-mix(in srgb,var(--warn,#e0a33a) 12%,var(--card,#171d2b));
  box-shadow:0 8px 22px #0003;
  animation:preview-bar-in .26s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes preview-bar-in{ from{ opacity:0; transform:translateY(-6px); } }
.preview-dot{ width:9px; height:9px; border-radius:50%; background:var(--warn,#e0a33a); flex:none; }
.preview-said{ display:grid; gap:2px; flex:1; min-width:0; }
.preview-said b{ font-size:14px; }
.preview-said span{ color:var(--ink-2,#c3cbdd); font-size:12.5px; line-height:1.45; }
.preview-bar .btn{ flex:none; }
/* Nothing inside the old copy should look like it invites a change. */
.studio-main.in-preview .block-grid{ opacity:.97; }
.studio-main.in-preview .add-row,
.studio-main.in-preview .drag-handle,
.studio-main.in-preview .section-cog,
.studio-main.in-preview .upgrade-comment{ display:none; }
.studio-main.in-preview .studio-block{ cursor:default; }
.studio-main.in-preview .studio-block:hover{ transform:none; box-shadow:none; }
@media(max-width:650px){
  .preview-bar{ flex-wrap:wrap; top:52px; }
  .preview-bar .btn{ width:100%; }
}

/* ---------- the version list ---------- */
.upgrade-history-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.upgrade-history{ display:grid; gap:9px; }
.upgrade-history.is-auto{ background:color-mix(in srgb,var(--well,#111725) 62%,transparent); }
.upgrade-history-line{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.upgrade-history-line b{ font-size:14.5px; }
.upgrade-history-line span{ color:var(--ink-3,#aab3c8); font-size:12.5px; }
.version-tag{
  font:700 10px/1 var(--mono,monospace); letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand,#8065ff); border:1px solid color-mix(in srgb,var(--brand,#8065ff) 46%,transparent);
  border-radius:999px; padding:3px 7px; font-style:normal;
}
.version-actions{ display:flex; gap:7px; flex-wrap:wrap; }

/* ---------- choosing an image ----------
   One target instead of a heading, a button, a limits line and a prompt all
   stacked on top of each other. */
.image-drop{
  display:grid; justify-items:center; gap:5px;
  margin-top:10px; padding:26px 16px;
  border:1px dashed var(--line-strong); border-radius:9px;
  color:var(--ink-2); text-align:center; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.image-drop:hover,.image-drop:focus-within,.image-drop.is-over{
  border-color:var(--brand); color:var(--ink);
  background:color-mix(in srgb,var(--brand) 9%,transparent);
}
.image-drop-mark{
  display:grid; place-items:center; width:30px; height:30px; margin-bottom:2px;
  border:1px solid currentColor; border-radius:50%;
  font:600 17px/1 var(--mono,monospace); opacity:.75;
}
.image-drop b{ font-size:13.5px; }
.image-drop small{ color:var(--ink-3); font-size:11.5px; line-height:1.4; max-width:34ch; }
.image-tools{ display:flex; gap:7px; margin-top:9px; }
.image-swap{
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  border-radius:7px; padding:7px 11px; font-family:inherit; font-weight:700; font-size:12px; line-height:1; cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.image-swap:hover{ border-color:var(--brand); color:var(--ink); background:var(--glass-lift); }
.image-url{ font-size:12px; }
.image-preview{ margin-top:10px; }

/* ---------- the project list steps aside ----------
   A column you can fold away on a wide screen; a drawer over the page on a
   narrow one, where it used to take the whole of the first screen. */
/* Not an action on this project, so it does not look like one: it reads as a
   way back out to the list, sitting above the title rather than in the row of
   buttons that all act on what is open. */
.studio-crumb{ margin:0 0 14px; }
/* On its own line above the list, where nothing beside it moves or has to
   make room: the same spot whether the column is open or folded to a rail. */
.studio-side > .studio-crumb{ margin:0 0 10px; }
/* Named for a screen reader, drawn as a handle: the heading beside it already
   says Projects, and a word that appears and disappears is a moving target. */
.studio-side .side-toggle-label{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.studio-side .side-toggle{ padding:7px 9px; }
.studio-main > .studio-crumb{ display:none; }
.side-toggle{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 11px 7px 9px;
  border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--ink-3); cursor:pointer;
  font-family:inherit; font-weight:800; font-size:11px; line-height:1;
  letter-spacing:.08em; text-transform:uppercase;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.side-toggle:hover,.side-toggle:focus-visible{
  color:var(--ink); border-color:var(--glass-edge); background:var(--glass-lift);
}
.side-toggle-mark{
  width:13px; height:10px; flex:none;
  border-top:2px solid currentColor; border-bottom:2px solid currentColor;
  box-sizing:content-box; position:relative;
}
.side-toggle-mark::after{
  content:''; position:absolute; left:0; top:4px; width:100%; height:2px; background:currentColor;
}
.studio-shell{ transition:grid-template-columns .26s cubic-bezier(.16,1,.3,1); }
/* Folded, the column leaves a rail behind rather than closing to nothing, so
   the handle stays under the cursor instead of travelling with the edge of the
   page. */
@media(min-width:781px){
  .studio-shell.side-closed{ grid-template-columns:60px minmax(0,1fr); gap:0; }
  .studio-shell.side-closed > .studio-side{
    background:transparent; border-color:transparent; box-shadow:none; overflow:visible;
  }
  .studio-shell.side-closed .studio-sidehead,
  .studio-shell.side-closed .project-list{ display:none; }
  .studio-shell.side-closed .studio-side > .studio-crumb{ margin:0; }
}
.studio-side{ transition:opacity .2s ease, transform .26s cubic-bezier(.16,1,.3,1); }
/* Only the panel that changes is named, so the list beside it sits still
   while the two versions of the panel cross over each other. */
/* Named only for the length of a switch inside Studio. Left named, the panel
   was also a named part of the page you were leaving when you navigated away,
   so its picture stayed on screen, fading and sliding on its own, after the
   rest of the page had already gone. */
@media (prefers-reduced-motion: no-preference){
  :root.studio-switch .studio-main{ view-transition-name:studio-main; }
}
/* Everything outside the panel — the project list beside it — is untouched by
   this change, so it should not be animated for it. Left alone it would take
   the site's own page-arrival slide, nine pixels, for no reason. */
:root.studio-switch::view-transition-old(root){ animation:none; opacity:0; }
:root.studio-switch::view-transition-new(root){ animation:none; opacity:1; }
::view-transition-old(studio-main){ animation:studio-swap-out .16s ease both; }
::view-transition-new(studio-main){ animation:studio-swap-in .26s cubic-bezier(.16,1,.3,1) both; }
@keyframes studio-swap-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes studio-swap-in{ from{ opacity:0; transform:translateY(10px); } }
.studio-empty{ padding-top:4px; }
.side-scrim{ display:none; }
@media(max-width:780px){
  .studio-main > .studio-crumb{ display:block; }
  .studio-shell,.studio-shell.side-closed{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .studio-shell.side-closed{ gap:0; }
  .studio-side{
    /* It is still a grid item, and the grid's own alignment would otherwise
       size it to its contents rather than the screen. */
    position:fixed; z-index:60; left:0; top:0; align-self:stretch;
    height:100vh; height:100dvh;
    width:min(310px,86vw); margin:0; border-radius:0 12px 12px 0;
    /* Sitting on top of the work rather than beside it, so it reads as a
       surface of its own instead of a pane of the page showing through. */
    background:color-mix(in srgb,var(--card) 88%,transparent);
    overflow:auto; transform:translateX(-102%); opacity:1;
    box-shadow:18px 0 44px #0006;
  }
  .studio-side.is-open{ transform:none; }
  .studio-shell.side-closed > .studio-side{
    opacity:1; transform:translateX(-102%); border-width:1px;
    padding:14px; overflow:auto;
    background:color-mix(in srgb,var(--card) 88%,transparent);
    box-shadow:18px 0 44px #0006;
  }
  .side-scrim{
    display:block; position:fixed; inset:0; z-index:59;
    background:rgba(4,7,16,.58); animation:scrim-in .2s ease;
  }
  .side-scrim[hidden]{ display:none; }
  @keyframes scrim-in{ from{ opacity:0; } }
}
@media (prefers-reduced-motion: reduce){
  .studio-shell,.studio-side{ transition:none; }
}

/* On a narrow screen the heading and its buttons were fighting over one row,
   which left a column of five buttons down the side and a title broken in the
   middle of a word. They take a row each instead. */
@media(max-width:780px){
  .project-top{ flex-direction:column; align-items:stretch; gap:14px; }
  .project-actions{ justify-content:flex-start; }
  .project-actions .btn{ flex:0 0 auto; }
  .project-title{ overflow-wrap:normal; word-break:normal; hyphens:auto; }
}

/* ---------- more kinds of block, and a way to change your mind ---------- */
/* Kept beside the grip and the cross, and revealed the same way: a card at rest
   shows its content, not its controls. */
.block-more{ position:absolute; top:10px; right:66px; padding:1px 5px; border:0; border-radius:5px; background:transparent; color:var(--ink-3); font-size:17px; line-height:1; opacity:0; transition:opacity .2s ease, background .2s ease, color .2s ease; }
.studio-block:hover .block-more,.studio-block:focus-within .block-more,.block-more:focus-visible{ opacity:1; }
.block-more:hover{ background:var(--glass-lift); color:var(--brand); }
@media (hover:none){ .block-more{ opacity:.62; } }
.block-menu{ position:absolute; z-index:6; top:34px; right:10px; min-width:170px; max-height:330px; overflow:auto; padding:5px; border:1px solid var(--line); border-radius:9px; background:var(--card); box-shadow:0 16px 34px #0006; display:grid; }
.block-menu-head{ padding:7px 8px 4px; color:var(--ink-3); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.block-menu button{ border:0; border-radius:6px; background:transparent; color:var(--ink-2); text-align:left; padding:7px 8px; font-family:inherit; font-weight:700; font-size:12px; }
.block-menu button:hover{ background:var(--glass-lift); color:var(--ink); }

.block-quote,.block-code{ outline:none; overflow-wrap:anywhere; }
.block-quote:empty::before,.block-code:empty::before{ content:attr(data-placeholder); color:var(--ink-3); }
.block-quote{ margin:8px 0 0; padding:2px 0 2px 14px; border-left:3px solid var(--brand); color:var(--ink-2); font-size:15px; font-style:italic; line-height:1.6; }
.callout-row{ display:flex; align-items:flex-start; gap:10px; margin-top:8px; padding:10px; border:1px solid var(--glass-edge); border-radius:9px; background:var(--glass-lift); }
.callout-row .block-body{ flex:1 1 auto; min-height:28px; margin:0; padding:0; }
.studio-block:hover .callout-row .block-body,.studio-block:focus-within .callout-row .block-body{ background:transparent; }
.callout-icon{ flex:0 0 auto; padding:2px 4px; border:0; border-radius:7px; background:transparent; font-size:19px; line-height:1; }
.callout-icon:hover{ background:var(--glass-deep); }
.block-code{ margin:8px 0 0; padding:11px 12px; border:1px solid var(--glass-edge); border-radius:9px; background:color-mix(in srgb,#05070e 55%,transparent); color:var(--ink-2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5; }
.studio-block.quote .block-kicker{ color:var(--ink-3); }
.studio-block.callout .block-kicker{ color:var(--gold); }
.studio-block.code .block-kicker{ color:var(--ink-3); }

/* ---------- one way in, instead of a button for every kind ---------- */
.add-row{ position:relative; }
.add-open{ padding:9px 14px; border:1px dashed var(--glass-edge); border-radius:9px; background:transparent; color:var(--brand); font-family:inherit; font-weight:800; font-size:13px; transition:background .2s ease, border-color .2s ease; }
.add-open:hover{ background:var(--glass-lift); border-color:var(--brand); }
.add-palette{ position:absolute; z-index:8; left:0; top:calc(100% + 8px); width:min(340px,92vw); padding:8px; border:1px solid var(--line); border-radius:11px; background:var(--card); box-shadow:0 20px 44px #0007; }
.add-search{ width:100%; box-sizing:border-box; padding:9px 10px; border:1px solid var(--glass-edge); border-radius:8px; background:var(--well); color:var(--ink); font-family:inherit; font-weight:700; font-size:13px; }
.add-search:focus{ outline:none; border-color:var(--brand); }
.add-results{ display:grid; max-height:320px; overflow:auto; margin-top:6px; }
.add-group{ padding:8px 8px 4px; color:var(--ink-3); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.add-results button{ display:grid; gap:1px; padding:7px 8px; border:0; border-radius:8px; background:transparent; text-align:left; }
.add-results button b{ color:var(--ink); font-size:13px; font-weight:750; }
.add-results button small{ color:var(--ink-3); font-size:11.5px; }
.add-results button:hover{ background:var(--glass-lift); }
.add-empty{ margin:0; padding:10px 8px; color:var(--ink-3); font-size:12px; }

/* ---------- a task list you can work down without the mouse ---------- */
.task-list{ display:grid; gap:2px; margin-top:8px; }
.task-row{ display:flex; align-items:center; gap:8px; padding:3px 4px; border:1px solid transparent; border-radius:7px; }
.task-row:hover{ background:var(--glass-lift); }
.task-row.is-dragging{ opacity:.45; }
.task-row.is-over{ border-color:var(--brand); }
.task-grip{ cursor:grab; color:var(--ink-3); font-size:13px; opacity:0; transition:opacity .18s ease; }
.task-row:hover .task-grip{ opacity:.8; }
.task-text{ flex:1 1 auto; min-width:0; padding:4px 2px; border:0; background:transparent; color:var(--ink-2); font-family:inherit; font-size:13.5px; }
.task-text:focus{ outline:none; }
.task-row.done .task-text{ color:var(--ink-3); text-decoration:line-through; }
.task-drop{ padding:2px 4px; border:0; background:transparent; color:var(--ink-3); font-size:15px; line-height:1; opacity:0; }
.task-row:hover .task-drop,.task-drop:focus-visible{ opacity:1; }
.task-drop:hover{ color:var(--bad); }
.task-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.task-count{ color:var(--ink-3); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
@media (hover:none){ .task-grip,.task-drop{ opacity:.6; } }

/* ---------- picking an icon, and giving a table a look ---------- */
.callout-row{ position:relative; }
.icon-picker{ position:absolute; z-index:7; top:100%; left:0; display:flex; flex-wrap:wrap; gap:2px; width:max-content; max-width:230px; margin-top:4px; padding:5px; border:1px solid var(--line); border-radius:9px; background:var(--card); box-shadow:0 14px 30px #0006; }
.icon-picker button{ padding:4px 5px; border:0; border-radius:6px; background:transparent; font-size:17px; line-height:1; }
.icon-picker button:hover{ background:var(--glass-lift); }
.table-tools{ position:relative; }
.table-design{ position:absolute; z-index:7; left:0; top:calc(100% + 6px); display:grid; gap:2px; min-width:200px; padding:7px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:0 16px 34px #0006; }
.table-design label{ display:flex; align-items:center; gap:8px; padding:6px 7px; border-radius:7px; color:var(--ink-2); font-size:12px; font-weight:700; }
.table-design label:hover{ background:var(--glass-lift); }
.table-design-head{ padding:7px 7px 3px; color:var(--ink-3); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.table-align{ display:flex; gap:4px; padding:0 3px 3px; }
.table-align button{ flex:1 1 auto; padding:6px 4px; border:1px solid var(--glass-edge); border-radius:7px; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:750; font-size:11.5px; }
.table-align button:hover{ border-color:var(--brand); color:var(--brand); }
.block-table.zebra tr:nth-child(even) td{ background:color-mix(in srgb,var(--card-2) 30%,transparent); }
.block-table.dense th,.block-table.dense td{ height:30px; padding:4px 7px; font-size:12.5px; }
.add-palette.above{ top:auto; bottom:calc(100% + 8px); }

/* ---------- a table you add to at its edges ---------- */
/* The button's own padding left less room than the + needs, and a grid item
   wider than its track is pushed off the end rather than centred, so the mark
   sat three pixels right of the strip it was meant to be in the middle of. */
.table-add{ position:absolute; z-index:3; display:grid; place-items:center; padding:0; border:1px dashed var(--glass-edge); border-radius:7px; background:color-mix(in srgb,var(--card) 80%,transparent); color:var(--ink-3); font-family:inherit; font-weight:800; font-size:14px; line-height:1; opacity:0; transition:opacity .18s ease, color .18s ease, border-color .18s ease; }
.table-frame:hover .table-add,.table-add:focus-visible{ opacity:1; }
.table-add:hover{ color:var(--brand); border-color:var(--brand); border-style:solid; }
.table-add-col{ top:0; right:-24px; width:20px; height:100%; }
.table-add-row{ left:0; bottom:-24px; height:20px; width:100%; }
.table-selection{ display:inline-flex; align-items:center; gap:6px; padding:2px 4px 2px 8px; border:1px solid var(--glass-edge); border-radius:999px; background:var(--glass-lift); }
.table-selection[hidden]{ display:none; }
.table-selection b{ color:var(--ink-3); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.table-selection button{ border:0; border-radius:6px; background:transparent; color:var(--ink-2); padding:4px 7px; font-family:inherit; font-weight:750; font-size:11.5px; }
.table-selection button:hover{ background:var(--glass-lift); color:var(--bad); }
.table-frame{ margin-right:26px; margin-bottom:26px; }
.task-grip{ touch-action:none; }
@media(max-width:780px){ .table-add{ opacity:.55; } }

/* ---------- a database: a shape, and rows of its own ---------- */
.db{ margin-top:10px; }
.db-scroll{ overflow-x:auto; border:1px solid var(--glass-edge); border-radius:9px; }
/* A database is a wide thing among narrow ones: it takes the row to itself,
   its columns keep a width you can read and tap, and the box scrolls when
   there are more of them than will fit. */
.db-grid{ width:max-content; min-width:100%; border-collapse:collapse; color:var(--ink-2); }
.db-grid th,.db-grid td{ min-width:132px; }
.db-grid th:first-child,.db-grid td:first-child{ min-width:176px; }
.db-grid th.db-slim,.db-grid td.db-slim{ min-width:0; }
.db-grid th,.db-grid td{ border-right:1px solid var(--glass-edge); border-bottom:1px solid var(--glass-edge); padding:0; vertical-align:middle; }
.db-grid tr td:last-child,.db-grid tr th:last-child{ border-right:0; }
.db-grid tbody tr:last-child td{ border-bottom:0; }
.db-grid thead th{ background:var(--well); }
.db-prop{ display:grid; gap:1px; width:100%; padding:7px 9px; border:0; background:transparent; color:var(--ink); text-align:left; font-family:inherit; font-weight:750; font-size:12.5px; }
.db-prop small{ color:var(--ink-3); font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.db-prop:hover:not(:disabled){ background:var(--glass-lift); color:var(--brand); }
.db-slim{ width:34px; text-align:center; }
.db-plus,.db-drop{ width:26px; height:26px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ink-3); font-family:inherit; font-size:14px; line-height:1; }
.db-plus:hover{ background:var(--glass-lift); color:var(--brand); }
.db-drop{ opacity:0; font-size:15px; }
.db-grid tr:hover .db-drop,.db-drop:focus-visible{ opacity:1; }
.db-drop:hover{ background:var(--glass-lift); color:var(--bad); }
.db-grid td:has(input[type=checkbox]){ text-align:center; }
.db-grid td input[type=checkbox]{ margin:8px auto; }
.db-blank td{ padding:14px 10px; color:var(--ink-3); font-size:12.5px; }
.db-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.db-new{ border:0; background:transparent; color:var(--brand); padding:5px 2px; font-family:inherit; font-weight:800; font-size:13px; }
.db-count{ color:var(--ink-3); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.db-menu{ position:fixed; z-index:80; display:grid; min-width:178px; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:0 16px 34px #0006; }
.db-menu button{ border:0; border-radius:6px; background:transparent; color:var(--ink-2); text-align:left; padding:7px 8px; font-family:inherit; font-weight:700; font-size:12px; }
.db-menu button:hover{ background:var(--glass-lift); color:var(--ink); }
.db-menu button.is-on{ color:var(--brand); }
.db-menu button.danger{ color:var(--bad); }
.db-menu-head{ padding:7px 8px 3px; color:var(--ink-3); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
@media (hover:none){ .db-drop{ opacity:.6; } }

/* ---------- what a cell holds, and how a choice is made ---------- */
.db-text,.db-area{ width:100%; box-sizing:border-box; padding:8px 9px; border:0; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:600; font-size:13px; }
.db-area{ resize:vertical; min-height:38px; line-height:1.45; }
.db-text:focus,.db-area:focus{ outline:2px solid var(--brand); outline-offset:-2px; border-radius:4px; }
.db-linked{ display:flex; align-items:center; }
.db-open{ flex:0 0 auto; padding:0 8px; color:var(--ink-3); text-decoration:none; font-size:13px; }
.db-open:hover{ color:var(--brand); }
.db-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; width:100%; min-height:38px; padding:6px 9px; border:0; background:transparent; text-align:left; font-family:inherit; }
.db-tags:hover:not(:disabled){ background:var(--glass-lift); }
.db-blankmark{ color:var(--ink-3); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.db-chip{ display:inline-block; max-width:100%; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:800; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.db-chip[data-tone="0"]{ background:color-mix(in srgb,#6c5cff 26%,transparent); color:#c9c2ff; }
.db-chip[data-tone="1"]{ background:color-mix(in srgb,#2fa36b 26%,transparent); color:#9fe3c1; }
.db-chip[data-tone="2"]{ background:color-mix(in srgb,#e0713d 26%,transparent); color:#f6c3a4; }
.db-chip[data-tone="3"]{ background:color-mix(in srgb,#2f8fd0 26%,transparent); color:#a9d8f5; }
.db-chip[data-tone="4"]{ background:color-mix(in srgb,#c44f8f 26%,transparent); color:#f2b6d6; }
.db-chip[data-tone="5"]{ background:color-mix(in srgb,#c9a227 26%,transparent); color:#f0dd9c; }
.db-choices{ position:fixed; z-index:80; display:grid; gap:2px; min-width:172px; max-width:280px; max-height:280px; overflow:auto; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:0 18px 38px #0007; }
.db-choices button{ display:flex; align-items:center; gap:8px; border:0; border-radius:7px; background:transparent; padding:5px 7px; text-align:left; font-family:inherit; }
.db-choices button:hover{ background:var(--glass-lift); }
.db-choices button.is-on::after{ content:"✓"; margin-left:auto; color:var(--brand); font-size:12px; font-weight:800; }
.db-nochoices{ margin:0; padding:9px 8px; color:var(--ink-3); font-size:12px; }
.db-choices-foot{ margin-top:3px; padding-top:4px; border-top:1px solid var(--glass-edge); }
.db-choices-foot button{ color:var(--ink-3); font-size:11.5px; font-weight:700; }

/* ---------- a database on a phone: a card for every row ---------- */
@media(max-width:640px){
  .db-grid,.db-grid th,.db-grid td,.db-grid td:first-child{ min-width:0; width:auto; }
  .db-scroll{ border:0; overflow:visible; }
  .db-grid,.db-grid tbody,.db-grid tr,.db-grid td{ display:block; width:auto; }
  .db-grid thead{ display:none; }
  .db-grid tbody tr{ margin-bottom:10px; border:1px solid var(--glass-edge); border-radius:10px; overflow:hidden; background:var(--glass); }
  .db-grid td{ display:flex; align-items:center; gap:10px; border-right:0; border-bottom:1px solid var(--glass-edge); padding:2px 4px; }
  .db-grid td:last-child{ border-bottom:0; }
  .db-grid td::before{ content:attr(data-label); flex:0 0 38%; padding-left:7px; color:var(--ink-3); font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
  .db-grid td:has(input[type=checkbox]){ text-align:left; }
  .db-grid td.db-slim{ justify-content:flex-end; padding:2px 6px; background:color-mix(in srgb,var(--card-2) 22%,transparent); }
  .db-grid td.db-slim::before{ content:none; }
  .db-text,.db-area,.db-tags{ font-size:16px; }
  .db-grid td input[type=checkbox]{ margin:10px 0; }
  .db-blank td::before{ content:none; }
}

/* ---------- the plain table, on a screen you touch ---------- */
@media(max-width:640px){
  /* Columns narrow enough to fit a phone are too narrow to tap or read, so the
     table keeps a workable width and the box it sits in scrolls. */
  .block-table table{ min-width:480px; }
  .block-table th,.block-table td{ height:44px; font-size:15px; }
  .table-frame{ margin-right:0; }
  .table-add-col{ right:2px; opacity:.5; }
  .table-tools{ gap:6px; }
  .table-tools span{ flex:1 1 100%; }
}

/* ---------- taking in several blocks at once ---------- */
.marquee{ position:absolute; z-index:5; pointer-events:none; border:1px solid var(--brand); border-radius:6px; background:color-mix(in srgb,var(--brand) 15%,transparent); }
.studio-block.is-chosen{ border-color:var(--brand); background:var(--glass-lift); box-shadow:0 0 0 1px var(--brand), 0 10px 26px #0004; }
.chosen-bar{ position:fixed; z-index:70; left:50%; bottom:20px; transform:translateX(-50%); display:flex; align-items:center; gap:5px; padding:7px 8px 7px 13px; border:1px solid var(--line); border-radius:13px; background:var(--card); box-shadow:0 20px 44px #0008; animation:chosen-in .18s ease; }
@keyframes chosen-in{ from{ opacity:0; transform:translate(-50%,8px); } }
.chosen-bar b{ margin-right:5px; color:var(--ink); font-size:12px; font-weight:800; letter-spacing:.03em; }
.chosen-bar button{ position:relative; padding:7px 10px; border:0; border-radius:8px; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:750; font-size:12.5px; }
.chosen-bar button:hover{ background:var(--glass-lift); color:var(--ink); }
.chosen-bar button.danger:hover{ color:var(--bad); }
.chosen-bar button.quiet{ color:var(--ink-3); }
.move-menu{ position:absolute; z-index:71; left:0; bottom:calc(100% + 8px); display:grid; min-width:172px; max-height:260px; overflow:auto; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:0 18px 38px #0007; }
.move-menu button{ border:0; border-radius:7px; background:transparent; color:var(--ink-2); text-align:left; padding:7px 8px; font-family:inherit; font-weight:700; font-size:12px; }
.move-menu button:hover{ background:var(--glass-lift); color:var(--ink); }
.move-head{ padding:7px 8px 3px; color:var(--ink-3); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
@media(max-width:780px){ .chosen-bar{ left:12px; right:12px; bottom:12px; transform:none; justify-content:space-between; } @keyframes chosen-in{ from{ opacity:0; transform:translateY(8px); } } }

/* ---------- views over the same rows ---------- */
.db-views{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.db-tabs{ display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.db-tab{ padding:5px 10px; border:0; border-radius:7px; background:transparent; color:var(--ink-3); font-family:inherit; font-weight:800; font-size:12px; }
.db-tab:hover{ background:var(--glass-lift); color:var(--ink-2); }
.db-tab.is-on{ background:var(--glass-lift); color:var(--ink); box-shadow:inset 0 -2px 0 var(--brand); }
.db-setup{ padding:5px 9px; border:1px solid var(--glass-edge); border-radius:7px; background:transparent; color:var(--ink-3); font-family:inherit; font-weight:750; font-size:11.5px; }
.db-setup:hover{ border-color:var(--brand); color:var(--brand); }
.db-setup-panel{ position:fixed; z-index:80; width:min(320px,86vw); max-height:70vh; overflow:auto; padding:8px; border:1px solid var(--line); border-radius:11px; background:var(--card); box-shadow:0 20px 44px #0008; }
.db-setup-head{ padding:8px 6px 4px; color:var(--ink-3); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.db-setup-row{ display:flex; align-items:center; gap:5px; padding:2px 4px; }
.db-setup-row select,.db-setup-row input{ flex:1 1 auto; min-width:0; padding:6px 7px; border:1px solid var(--glass-edge); border-radius:7px; background:var(--well); color:var(--ink-2); font-family:inherit; font-weight:700; font-size:12px; }
.db-kind{ flex:1 1 auto; padding:7px 9px; border:1px solid var(--glass-edge); border-radius:8px; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:750; font-size:12px; }
.db-kind.is-on{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.db-quiet{ border:0; border-radius:7px; background:transparent; color:var(--ink-3); padding:6px 7px; font-family:inherit; font-weight:750; font-size:12px; }
.db-quiet:hover{ background:var(--glass-lift); color:var(--ink-2); }
.db-quiet.danger{ color:var(--bad); }
.db-rule-drop{ flex:0 0 auto; width:26px; height:26px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ink-3); font-size:14px; }
.db-rule-drop:hover{ background:var(--glass-lift); color:var(--bad); }

/* ---------- the board ---------- */
.db-board{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.db-lane{ flex:0 0 232px; display:flex; flex-direction:column; gap:7px; padding:8px; border:1px solid var(--glass-edge); border-radius:10px; background:color-mix(in srgb,var(--card-2) 16%,transparent); transition:border-color .18s ease, background .18s ease; }
.db-lane.is-over{ border-color:var(--brand); background:var(--brand-soft); }
.db-lane header{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px 2px; }
.db-lane header b{ color:var(--ink-3); font-size:11px; font-weight:800; }
.db-lane-rows{ display:grid; gap:6px; min-height:34px; }
.db-card{ display:grid; gap:5px; padding:9px 10px; border:1px solid var(--glass-edge); border-radius:9px; background:var(--card); cursor:grab; touch-action:none; }
.db-card:hover{ border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); }
.db-card.is-dragging{ opacity:.5; cursor:grabbing; }
.db-card b{ color:var(--ink); font-size:13px; font-weight:750; line-height:1.35; }
@media(max-width:640px){ .db-lane{ flex-basis:80%; } }

/* ---------- code: its lines counted, and a way to take it with you ---------- */
.code-wrap{ position:relative; margin-top:8px; }
.code-body{ display:flex; align-items:stretch; border:1px solid var(--glass-edge); border-radius:9px; background:color-mix(in srgb,#05070e 55%,transparent); overflow:hidden; }
.code-lines{ flex:0 0 auto; display:flex; flex-direction:column; padding:11px 8px 11px 10px; border-right:1px solid var(--glass-edge); background:color-mix(in srgb,#05070e 35%,transparent); color:var(--ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5; text-align:right; user-select:none; }
.code-lines span{ display:block; }
.block-code{ flex:1 1 auto; margin:0; padding:11px 12px; border:0; border-radius:0; background:transparent; }
.code-copy{ display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid var(--glass-edge); border-radius:7px; background:color-mix(in srgb,var(--card) 88%,transparent); color:var(--ink-3); font-family:inherit; font-weight:750; font-size:11px; opacity:0; transition:opacity .18s ease, color .18s ease, border-color .18s ease; }
.studio-block:hover .code-copy,.studio-block:focus-within .code-copy,.code-copy:focus-visible{ opacity:1; }
.code-copy:hover{ color:var(--brand); border-color:var(--brand); }
.code-copy.is-done{ opacity:1; color:var(--good,#6ee7b7); border-color:currentColor; }
.code-copy svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; }
@media (hover:none){ .code-copy{ opacity:.7; } }
.db-laneName{ color:var(--ink-2); font-size:12px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Nothing gets picked up by the pointer while a band is being drawn, and the
   whole page keeps the grabbing cursor while a card is being carried. */
.studio-main.is-banding{ user-select:none; -webkit-user-select:none; }
.studio-main.is-banding *{ cursor:default; }
body.is-carrying{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
body.is-carrying *{ cursor:grabbing !important; }

/* Code runs as far as it was written: a line that is too long to fit scrolls
   rather than folding, because a fold is not where the line ends. */
.code-tools{ display:flex; justify-content:flex-end; margin-bottom:5px; }
.block-code{ flex:1 1 auto; min-width:0; margin:0; border:0; border-radius:0; white-space:pre; overflow-x:auto; }
.code-body{ align-items:flex-start; }
.code-lines{ position:sticky; left:0; z-index:1; }
.table-clear{ width:22px; padding:0 !important; color:var(--ink-3) !important; font-size:14px; }
.table-clear:hover{ color:var(--ink) !important; background:var(--glass-lift); }
.db-lane-add{ width:22px; height:22px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ink-3); font-family:inherit; font-size:14px; line-height:1; opacity:0; transition:opacity .18s ease, color .18s ease; }
.db-lane:hover .db-lane-add,.db-lane-add:focus-visible{ opacity:1; }
.db-lane-add:hover{ background:var(--glass-lift); color:var(--brand); }
.db-lane header b{ margin-left:auto; }
@media (hover:none){ .db-lane-add{ opacity:.6; } }

/* A block's width is its own, and says so on the element, so these come after
   the rules that set a width by kind and win over them. */
/* -------------------------------------------------------------------- rows
   A row is an element holding one or more blocks, and a block's width is its
   share of the row it is on rather than a slot in one long grid. Shares are
   flex weights, so a row of one fills the row whatever its number says, and
   two blocks split it between them. Nothing outside a row can be moved by
   anything that happens inside it. */
.block-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.block-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:stretch; gap:12px; min-width:0; }
.block-row>.studio-block,.block-row>.block-gap{ min-width:0; }
/* While a card is being carried the row holds an extra body - the gap it is
   about to land in - so the tracks are shared out evenly until it lands. */
.block-grid.is-reordering .block-row{ grid-template-columns:none!important; }
/* The handle is the line between two blocks, so the last one on a row has
   none - there is nothing on its right to trade with. It is a short mark in
   the middle of that line rather than a bar down the whole card: a coloured
   line the height of a card reads as something left behind, not as something
   to take hold of. It is only coloured while the pointer is on it. */
.block-row>.studio-block:last-child .width-grip{ display:none; }
.width-grip{ position:absolute; top:0; bottom:0; right:-7px; width:14px; border:0; background:transparent; cursor:col-resize; z-index:4; touch-action:none; }
.width-grip::before{ content:''; position:absolute; left:5px; top:50%; width:4px; height:34px; margin-top:-17px; border-radius:4px; background:var(--ink-3,#aab3c8); opacity:0; transition:opacity .16s ease, height .16s ease, background .16s ease; }
.block-row:hover .width-grip::before{ opacity:.45; }
.width-grip:hover::before,body.is-sizing .width-grip:hover::before{ opacity:1; height:56px; margin-top:-28px; background:var(--brand,#8065ff); }
body.is-sizing{ cursor:col-resize; user-select:none; -webkit-user-select:none; }
body.is-sizing .studio-block{ transition:none; }

/* ------------------------------------------- a card that has to be narrow
   A quarter of a row is about 200px, and everything in the corners was laid
   out for something twice that. The handles keep their corner, the kicker
   gives way to them rather than running underneath, and the comment button
   moves to the bottom where nothing else is. */
.block-kicker{ padding-right:94px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:16px; }
.block-title{ width:100%; }
.studio-block{ padding-bottom:30px; }
.studio-block .upgrade-comment{ position:absolute; top:auto; bottom:7px; right:9px; margin:0; z-index:3; opacity:0; }
.studio-block:hover .upgrade-comment,.studio-block:focus-within .upgrade-comment,.studio-block .upgrade-comment.has-comments{ opacity:1; }
.studio-block input,.studio-block textarea,.studio-block select{ max-width:100%; min-width:0; }
.task-row,.task-row .task-text{ min-width:0; }
.code-body,.table-frame,.db-frame{ max-width:100%; }

@media(max-width:780px){
  .block-row{ grid-auto-flow:row; grid-template-columns:minmax(0,1fr)!important; }
  .width-grip{ display:none; }
  .studio-block .upgrade-comment{ opacity:1; }
}

/* A block takes the track it is given. Widths used to be written per kind
   here, which now reads as a block quietly spanning its whole row and
   pushing whoever is beside it into a track of their own. */
.block-row>.studio-block,.block-row>.block-gap{ grid-column:auto; grid-row:auto; }