/* ==========================================================================
   Parameters (prototype): a designer's edit mode for refining the page live.
   Tile button → edit mode → hover text → click → radial menu → mini tool.
   ========================================================================== */

/* Inspect mode: a crosshair over the page (the spec panel names what's under it); the UI keeps a normal cursor */
.tune-on, .tune-on * { cursor: crosshair !important; }
.tune-on .tune-ui, .tune-on .tune-ui * { cursor: default !important; }
.tune-on button.tune-ui, .tune-on button.tune-ui *, .tune-on .tune-ui button, .tune-on .tune-ui button *, .tune-on .tune-ui input, .tune-on .tune-ui select, .tune-on .tune-ui [data-seg] { cursor: pointer !important; }

/* The redlines: a box on what you point at, with handles, its size under it, and hairlines out to its frame with the
   distances on them. They move between things on the page's spring */
.ix { position: fixed; inset: 0; z-index: 125; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); }
.ix.on { opacity: 1; }
.ix .box { position: absolute; border: 1px solid var(--blue-ink); background: rgba(42,91,208,.045); border-radius: 2px;
  transition: left .2s cubic-bezier(.2,.8,.2,1), top .2s cubic-bezier(.2,.8,.2,1), width .2s cubic-bezier(.2,.8,.2,1), height .2s cubic-bezier(.2,.8,.2,1); }   /* (quick and settled, no spring: it keeps up with the pointer) */
.ix .box::before, .ix .box::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--paper); border: 1px solid var(--blue-ink); }
.ix .box::before { left: -4px; top: -4px; } .ix .box::after { right: -4px; bottom: -4px; }
.ix .size { position: absolute; translate: -50% 7px; font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; color: #fff; background: var(--blue-ink); padding: 4px 6px; border-radius: 3px; white-space: nowrap;
  transition: left .2s cubic-bezier(.2,.8,.2,1), top .2s cubic-bezier(.2,.8,.2,1); }
.ix .size.above { translate: -50% calc(-100% - 7px); }
.ix .gap { position: absolute; background: var(--blue-ink); opacity: .75; transition: left .2s cubic-bezier(.2,.8,.2,1), top .2s cubic-bezier(.2,.8,.2,1), width .2s cubic-bezier(.2,.8,.2,1), height .2s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.ix .gap i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; font-style: normal; color: var(--blue-ink); background: var(--paper); padding: 2px 4px; border-radius: 2px; }

/* The spec panel: what you're pointing at, its real values, and a note on why it's like that. Bottom right, out of
   the way of the page's column; on a phone a short sheet along the bottom */
.tune-spec { position: fixed; right: var(--gutter); bottom: 20px; z-index: 133; width: min(300px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow: auto;
  background: #fcfbf9; border: 1px solid var(--rule); border-radius: 10px; corner-shape: var(--corner); box-shadow: 0 20px 50px -24px rgba(20,20,18,.35);
  font: 400 12px/1.6 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink); padding: 12px 14px;
  translate: 0 12px; opacity: 0; pointer-events: none; transition: translate .28s cubic-bezier(.2,.8,.2,1), opacity .22s var(--ease); }
.tune-on .tune-spec { translate: 0 0; opacity: 1; pointer-events: auto; }
.tune-spec h2 { margin: 0 0 6px; font: 500 12px/1.4 "IBM Plex Mono", ui-monospace, monospace; color: var(--blue-ink); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.tune-spec h2 small { font: inherit; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tune-spec dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 14px; }
.tune-spec dt { color: var(--ink-faint); }
.tune-spec dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tune-spec .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(20,20,18,.12); }
.tune-spec .note { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); font: 400 12.5px/1.5 var(--sans); color: var(--ink-soft); }
.tune-spec .note:empty { display: none; }
.tune-spec .acts { display: none; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.tune-spec.changed .acts { display: flex; }
.tune-spec .acts button { flex: 1; font: 500 12px/1 var(--sans); padding: 8px 10px; border-radius: 8px; border: 0; background: rgba(20,20,18,.06); color: var(--ink); cursor: pointer; }
.tune-spec .acts button:first-child { background: var(--ink); color: var(--paper); }
.tune-spec .acts button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
@media (max-width: 700px) {
  .tune-spec { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: 32vh; padding: 10px 12px; }
  .tune-spec .note { display: none; }                                  /* the values only: the note is for a desk */
  .ix .gap { display: none; }                                          /* no room for the distances: the box and its size */
}

/* The selection outline: a thin ring on what you've clicked, with its wheel or panel open */
.tune-sel { position: fixed; z-index: 125; pointer-events: none; border-radius: 6px; opacity: 0;
  box-shadow: 0 0 0 2px var(--blue-ink), 0 0 0 6px rgba(42,91,208,.18);
  transition: opacity .15s, left .12s var(--ease), top .12s var(--ease), width .12s var(--ease), height .12s var(--ease); }
.tune-sel.on { opacity: 1; }

/* Radial menu */
/* Only scale animates on the ring itself: opacity or filter on an ancestor would delay the blur until it finishes,
   so the fade happens on the pieces inside instead */
.tune-ring { position: fixed; z-index: 132; width: 200px; height: 200px; margin: -100px 0 0 -100px; pointer-events: none; scale: .6;
  transition: scale .45s var(--ease); }
.tune-ring.on { pointer-events: auto; scale: 1; }
:is(.tune-ring, .ts-ring) > * { transition: opacity .25s var(--ease); }
.tune-ring:not(.on) > * { opacity: 0; }
/* A hidden wheel's blur is switched off too, rather than left running unseen (the Inspector tile's example while the
   Inspector's on, a closed wheel): it's what made Chrome flicker a stale patch onto the bar as the page behind repainted */
.tune-ring:not(.on) .ring-blur, .tune-stage:is(.closed, .picked) .ring-blur { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.ring-blur { position: absolute; inset: 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
:is(.tune-ring, .ts-ring) svg { position: relative; }
.tune-ring svg { width: 100%; height: 100%; overflow: visible; }
.tune-ring [data-seg] > path { fill: rgba(250,248,244,.8); stroke: rgba(22,21,20,.07); transition: fill .2s; }
.tune-ring [data-seg]:hover > path, .tune-ring [data-seg].hot > path { fill: var(--ink); }
.tune-ring [data-seg] text { font: 500 12px/1 var(--sans); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; transition: fill .2s; }
.tune-ring [data-seg] .ico { color: var(--ink); transition: color .2s; }
.tune-ring [data-seg]:hover .ico, .tune-ring [data-seg].hot .ico { color: var(--paper); }
.tune-ring [data-seg]:hover text, .tune-ring [data-seg].hot text { fill: var(--paper); }
.tune-ring .hub { fill: var(--ink); }
.tune-ring .hub-t { font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; fill: var(--paper); text-anchor: middle; dominant-baseline: middle; }

/* Mini tool panels */
.tune-panel { position: fixed; z-index: 133; width: 290px; display: grid; gap: 14px; padding: 16px 16px 14px; border-radius: 18px; corner-shape: var(--corner);
  background: rgba(250,248,244,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(22,21,20,.08), 0 24px 60px -24px rgba(40,35,30,.4); font: 400 13px/1.4 var(--sans); color: var(--ink);
  opacity: 0; translate: 0 8px; filter: blur(4px); pointer-events: none; transition: opacity .3s var(--ease), translate .4s var(--ease), filter .3s var(--ease); }
.tune-panel.on { opacity: 1; translate: 0 0; filter: none; pointer-events: auto; }
/* In a margin, the panel grows out of the wheel instead (tune.js): no fade or rise of its own. Its skin is the wheel's paper */
.tune-panel.side { transition: none; translate: none; filter: none; }
.tp-skin { position: absolute; inset: 0; z-index: 20; border-radius: inherit; pointer-events: none; opacity: 0; background: rgb(246,244,239); }
.tp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-top b { font: 500 18px/1 var(--serif); letter-spacing: -.02em; }
.tp-top small { font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink-faint); }
.tp-x { all: unset; font-size: 18px; line-height: 1; color: var(--ink-faint); padding: 2px 4px; }
.tp-x:hover { color: var(--ink); }
.tp-row { display: grid; gap: 6px; }
.tp-row > span { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 12px; }
/* The value beside each slider is a field you can type in: plain until you point at it, then a little well */
.tp-val { display: inline-flex; align-items: baseline; gap: 1px; font: 500 11.5px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink); }
.tp-val i { font-style: normal; color: var(--ink-faint); }
.tp-num { width: 7ch; box-sizing: content-box; padding: 3px 4px; margin: -3px -2px -3px 0; text-align: right; font: inherit; color: inherit;
  background: transparent; border: 0; border-radius: 6px; outline: none; cursor: text; transition: background .2s, box-shadow .2s; }
.tp-num:hover { background: rgba(22,21,20,.05); }
.tp-num:focus { background: #fff; box-shadow: 0 0 0 1px var(--blue-ink); }
.tune-panel input[type=range] { width: 100%; accent-color: var(--ink); }
.tune-panel select { font: 500 13px/1 var(--sans); padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(22,21,20,.15); background: #fff; color: var(--ink); }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chips[data-feel] { flex-wrap: wrap; }   /* the four spring feels: one row where the panel's wide enough, two in a margin */
.tp-chips[data-feel] button { flex: 1 1 calc(50% - 6px); }
@media (min-width: 1500px) { .tp-chips[data-feel] button { flex: 1 1 0; } }
.tp-chips[data-feel] button { flex: 1 1 0; text-align: center; padding-inline: 4px; }
.tp-chips button { font: 500 12px/1 var(--sans); padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(22,21,20,.15); background: transparent; color: var(--ink-soft); }
.tp-chips button:hover { color: var(--ink); border-color: rgba(22,21,20,.4); }
.tp-chips button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tp-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tp-swatches button { aspect-ratio: 1; border-radius: 8px; corner-shape: var(--corner); border: 0; box-shadow: inset 0 0 0 1px rgba(22,21,20,.15); }
.tp-swatches button.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
/* Custom colour picker: saturation/brightness field, hue rail, preview and hex */
.tp-picker { display: grid; gap: 10px; --x: 0; --y: 0; --hx: 0; --hue: red; --pick: #000; }
.pk-area { position: relative; height: 120px; border-radius: 12px; corner-shape: var(--corner); cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue)); box-shadow: inset 0 0 0 1px rgba(22,21,20,.1); }
.pk-hue { position: relative; height: 14px; border-radius: 999px; cursor: ew-resize; touch-action: none; box-shadow: inset 0 0 0 1px rgba(22,21,20,.1);
  background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); }
.pk-dot, .pk-knob { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.35); transition: scale .35s cubic-bezier(.3,1.6,.4,1); }
/* The marks travel 12px in from each end (knob plus ring), so they never cross the field's edge */
.pk-dot { left: calc(12px + var(--x) * (100% - 24px)); top: calc(12px + var(--y) * (100% - 24px)); background: var(--pick); }
.pk-knob { left: calc(12px + var(--hx) * (100% - 24px)); top: 50%; background: var(--hue); }
.pk-area.grab .pk-dot, .pk-hue.grab .pk-knob { scale: 1.35; }
.pk-row { display: flex; align-items: center; gap: 8px; }
.pk-prev { width: 28px; height: 28px; border-radius: 50%; background: var(--pick); box-shadow: inset 0 0 0 1px rgba(22,21,20,.15); flex: none; }
.pk-hex { flex: 1; min-width: 0; font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink); text-transform: uppercase;
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(22,21,20,.12); background: rgba(255,255,255,.6); outline: none; transition: border-color .2s; }
.pk-hex:focus { border-color: var(--blue-ink); }
.tp-foot { display: flex; gap: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.tp-foot button { flex: 1; font: 500 12px/1 var(--sans); padding: 9px 10px; border-radius: 10px; border: 0; background: rgba(22,21,20,.06); color: var(--ink); }
.tp-foot button.primary { background: var(--ink); color: var(--paper); }
/* Reset and Copy CSS (in the readout and in the tools): the plain one darkens a step under the pointer, the dark one lifts
   a step; pressed, both darken a step further */
.tp-foot button:disabled { opacity: .3; cursor: default; pointer-events: none; }   /* (Copy CSS before there's anything to copy) */
:is(.tune-spec .acts, .tp-foot) button { cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), opacity .25s var(--ease); }
@media (hover: hover) {
  :is(.tune-spec .acts button:not(:first-child), .tp-foot button:not(.primary)):is(:hover, .hov) { background: rgba(22,21,20,.11); }
  :is(.tune-spec .acts button:first-child, .tp-foot button.primary):is(:hover, .hov) { background: #34322e; }
}
:is(.tune-spec .acts button:not(:first-child), .tp-foot button:not(.primary)):active { background: rgba(22,21,20,.16); }
:is(.tune-spec .acts button:first-child, .tp-foot button.primary):active { background: #000; }
/* Copied: blue, with a tick, for a moment (js/tune.js) */
:is(.tune-spec .acts, .tp-foot) button.done, :is(.tune-spec .acts, .tp-foot) button.done:hover { background: var(--blue-ink); color: #fff; }
:is(.tune-spec .acts, .tp-foot) button .tick { width: 11px; height: 11px; margin: -2px 5px 0 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 12; stroke-dashoffset: 12; animation: tick-draw .35s cubic-bezier(.2,.7,.1,1) .05s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.tp-foot button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.tp-code { font: 11.5px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink-soft); background: rgba(22,21,20,.04); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; max-height: 7.5em; overflow: auto; }

/* An element that's been tuned keeps a faint mark while editing */
.tune-on .tuned { outline: 1px dashed rgba(45,106,168,.45); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tune-ring, .tune-ring > *, .tune-panel { transition: opacity .01ms, scale .01ms; }
}

/* Tile illustration (Tools for the craft): a live, static example. The wheel is open on the name;
   its segments work on the name right here. "Edit this page's parameters" closes it until editing ends. */
.tune-stage { padding: 0; }
.ts-scene { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; }
/* Set exactly as the site's H3 (the work titles) */
.ts-word { position: absolute; left: 9%; top: 15%; font-family: var(--serif); font-size: clamp(32px, 3vw, 44px); line-height: .92; letter-spacing: -.01em; padding: 8px 10px; white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--blue-ink); border-radius: 6px; background: rgba(156,198,236,.12); transition: color .4s var(--ease); }
.ts-word > span { display: inline-block; }
.ts-tag { position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 6px; white-space: nowrap;
  font: 500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0; color: var(--paper); background: var(--blue-ink); padding: 4px 6px; border-radius: 5px; }
.ts-ring { position: absolute; right: 3%; top: 30%; width: 50%; aspect-ratio: 1; transition: scale .5s var(--ease); }
.tune-stage.closed .ts-ring, .tune-stage.picked .ts-ring { scale: .6; pointer-events: none; }
.tune-stage.closed .ts-ring > *, .tune-stage.picked .ts-ring > * { opacity: 0; }
/* Chrome ignores masks inside a parent with smoothed corners and hidden overflow, so this tile lets it show */
.toolbox .b-stage.tune-stage { overflow: visible; }
.tune-stage.closed .ts-word { box-shadow: none; background: transparent; }
.tune-stage.closed .ts-tag { opacity: 0; }
.ts-tag, .ts-word { transition: opacity .3s, box-shadow .3s, background .3s, color .4s var(--ease); }
.ts-ring svg { width: 100%; height: 100%; overflow: visible; }
.ts-ring [data-seg] { cursor: pointer; }
.ts-ring [data-seg] > path { fill: rgba(250,248,244,.8); stroke: rgba(22,21,20,.07); transition: fill .2s; }
.ts-ring [data-seg] text { font: 500 12px/1 var(--sans); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; transition: fill .2s; }
.ts-ring [data-seg] .ico { color: var(--ink); transition: color .2s; }
.ts-ring [data-seg]:hover .ico, .ts-ring [data-seg].hot .ico { color: var(--paper); }
.ts-ring [data-seg]:hover > path, .ts-ring [data-seg].hot > path { fill: var(--ink); }
.ts-ring [data-seg]:hover text, .ts-ring [data-seg].hot text { fill: var(--paper); }
.ts-ring .hub { fill: var(--ink); }
.ts-ring .hub-t { font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; fill: var(--paper); text-anchor: middle; dominant-baseline: middle; }
.ts-try { font: 500 14px/1 var(--sans); background: none; color: var(--ink); border: 0; border-bottom: 1px solid rgba(22,21,20,.25);   /* a quiet grey rule, turning blue on hover */
  padding: 0 0 3px; cursor: pointer; white-space: nowrap;
  position: absolute; left: 20px; bottom: 20px; transition: color .25s, border-color .25s, opacity .3s; }
.ts-try:hover { color: var(--blue-ink); border-color: var(--blue-ink); }   /* grey straight to blue, with the text */
/* The shortcut, as a small key in place of the arrow */
.tune-stage.closed .ts-try { z-index: 1; }   /* while the Inspector is on it reads Done, and takes you out */

/* Panel extras: curve editor, corner preview, spring graph, checkboxes */
.tp-curve { background: rgba(22,21,20,.04); border-radius: 12px; corner-shape: var(--corner); padding: 6px 10px; }
.tp-curve svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: none; }
.tune-panel .g-linear { stroke: rgba(22,21,20,.14); stroke-dasharray: 4 5; }
.tune-panel .g-arm { stroke: var(--blue-ink); stroke-width: 1.4; }
.tune-panel .g-curve { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.tune-panel .g-end { fill: var(--ink); }
.tune-panel .g-handle { fill: var(--paper); stroke: var(--blue-ink); stroke-width: 2.4; cursor: grab !important; }
.tune-panel .g-handle.drag { fill: var(--blue-soft); }
.tp-corner { background: rgba(22,21,20,.04); border-radius: 12px; corner-shape: var(--corner); padding: 10px; display: grid; place-items: center; }
.tp-corner svg { width: 96px; height: 96px; }
.tp-corner path { fill: var(--ink); }
.tp-spring { background: rgba(22,21,20,.04); border-radius: 12px; corner-shape: var(--corner); padding: 10px 12px; }
.tp-spring svg { width: 100%; height: 70px; display: block; overflow: visible; }
.tp-spring line { stroke: rgba(22,21,20,.15); stroke-dasharray: 4 5; }
.tp-spring polyline { fill: none; stroke: var(--ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.tp-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.tp-check input { accent-color: var(--ink); }
.tp-note { font-size: 12px; color: var(--ink-soft); }
.tune-panel { max-height: calc(100vh - 32px); overflow: auto; }

/* Tune mode corners: one radius per group of related shapes (matches GROUPS in tune.js) */
:root[style*="--tune-r-tools"] .toolbox .b-stage { border-radius: var(--tune-r-tools); }
:root[style*="--tune-r-work"] .project .shot { border-radius: var(--tune-r-work); }
:root[style*="--tune-r-prompt"] .prompt { border-radius: var(--tune-r-prompt); }
:root[style*="--tune-r-demo"] .gd .browser { border-radius: var(--tune-r-demo); }
:root[style*="--tune-r-portrait"] .portrait .card { border-radius: var(--tune-r-portrait); }
:root[style*="--tune-r-case"] .tile { border-radius: var(--tune-r-case); }

/* Drag panels by their title bar */
.tune-panel .tp-top { cursor: grab; touch-action: none; user-select: none; margin: -16px -16px 0; padding: 16px 16px 0; }
.tune-on .tune-ui .tp-top { cursor: grab !important; }
.tune-panel.dragging, .tune-panel.dragging * { cursor: grabbing !important; }
.tune-panel.dragging { transition: none; box-shadow: 0 0 0 1px rgba(22,21,20,.1), 0 34px 70px -24px rgba(40,35,30,.5); }

/* Variable axes in the Type panel */
.tp-axes { display: contents; }   /* (the font's own axes sit in the list with the other settings, at the top, not in a box of their own) */
.tp-axes .tp-note { margin: 0; }
.tune-panel select { width: 100%; }

/* "Use this font for every heading": swaps the site's serif and its axes in one go */
:root[style*="--serif-axes"] :is(h1, h2, h3, .display, .triad, .name, .serif, .ts-word):not(.gd-right *) {
  font-weight: var(--serif-wght, 400); font-variation-settings: var(--serif-axes); font-optical-sizing: none; }

/* Wheel centre: click to cycle the selection through the site's text styles */
:is(.tune-ring, .ts-ring) .hubg { pointer-events: none; }   /* a label, not a button */
:is(.tune-ring, .ts-ring) .hubg text { pointer-events: none; }

/* Example: Corners selects the tile itself */
.tune-stage { transition: box-shadow .3s var(--ease); }
.tune-stage.corner-pick .ts-word { box-shadow: none; background: transparent; }
.tune-stage.corner-pick .ts-tag { opacity: 0; }

/* The rest of a text group, while one of its members is selected */
.tune-on .tune-peer { outline: 1.5px dashed var(--blue-ink); outline-offset: 5px; border-radius: 4px; }


/* A soft grey shadow under the wheel so it reads on dark text and light paper alike.
   It sits on its own layer (not as a filter on the wheel), so it never delays the frosted blur */
:is(.tune-ring, .ts-ring)::before { content: ""; position: absolute; inset: 4%; top: 9%; bottom: -1%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(22,21,20,.22), rgba(22,21,20,.1) 70%, transparent);
  filter: blur(14px); z-index: -1; transition: opacity .25s var(--ease); }
.tune-ring:not(.on)::before, .tune-stage.closed .ts-ring::before, .tune-stage.picked .ts-ring::before { opacity: 0; }
:is(.tune-ring, .ts-ring) { isolation: isolate; }

/* Page settings panels */
.tp-light { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tp-light label { display: grid; gap: 4px; justify-items: center; font-size: 11.5px; color: var(--ink-soft); }
.tp-light input[type=color] { width: 100%; height: 34px; border: 0; padding: 0; background: none; border-radius: 8px; cursor: pointer; }
.tp-grain { height: 56px; border-radius: 12px; corner-shape: var(--corner); background: var(--paper); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.tp-grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-img, none); opacity: calc(var(--grain-o, .2) * 2.5); mix-blend-mode: var(--grain-blend, multiply); }


/* The example (prompt and generated site) always stays as designed: page-wide font, easing and corner changes stop here */
.gd-right .mock, .gd-right .prompt { --ease: cubic-bezier(.2, .7, .1, 1); --corner: superellipse(1.4); }   /* the frame around the site can still be reshaped */
/* The switcher's own look (its bar, wheel and panels, and its tile while you tune the page) never takes the page-wide smoothing */
.tune-ui:not(.tune-stage) { --corner: superellipse(1.4); }   /* (the Fine tune tile itself can still be reshaped) */


/* On a phone the tool panels are a sheet pinned to the bottom of the screen: they never get pushed below the fold
   as they grow, and scroll inside themselves if they're taller than there's room for */

/* On a touch screen there's no pointer to follow: the redlines go on what you tap */
@media (hover: none) { .tune-on, .tune-on * { cursor: auto !important; } }


/* ==========================================================================
   One object: the readout, and the tools in the same panel (html[data-ix="dock"] or "sheet")
   ========================================================================== */

/* The panel shows while the Inspector is on, and while a tile's Adjust has its tools open */
.tune-spec.open { translate: 0 0; opacity: 1; pointer-events: auto; }
.sp-head { display: flex; align-items: baseline; gap: 8px; }
.sp-head h2 { flex: 1; min-width: 0; }
.sp-back { all: unset; cursor: pointer; font: 500 13px/1 var(--sans); color: var(--ink-soft); padding: 2px 4px; margin: 0 2px 0 -4px; border-radius: 4px; transition: color .2s; }
.sp-back:hover { color: var(--ink); }
.sp-back[hidden], .tune-tabs[hidden] { display: none; }
.sp-back:focus-visible { outline: 2px solid var(--blue-ink); }
/* Pinned: the values give way to the tabs and the tool (the tool has its own values beside its sliders) */
.tune-spec.pinned dl, .tune-spec.pinned .note { display: none; }
.tune-tabs { display: flex; gap: 2px; margin: 6px -4px 0; border-bottom: 1px solid var(--rule); }
.tune-tabs button { all: unset; cursor: pointer; font: 500 12.5px/1 var(--sans); color: var(--ink-soft); padding: 8px 8px 9px; margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.tune-tabs button:hover { color: var(--ink); }
.tune-tabs button.on { color: var(--ink); border-color: var(--ink); }
.tune-tabs button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: -2px; border-radius: 3px; }
/* The tool, inside the panel: no card of its own */
.tune-spec .tune-panel { position: static; width: auto; max-height: none; overflow: visible; padding: 14px 0 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  opacity: 1; translate: none; filter: none; pointer-events: auto; transition: none; display: none; }
.tune-spec .tune-panel.on { display: grid; }
.tune-spec .tune-panel .tp-top { display: none; }               /* the panel's own title and close: the tabs and the back arrow do that now */
.tune-spec .tune-panel .tp-foot { padding-top: 10px; }
.tune-spec .tune-panel .tp-code { max-height: 5.5em; }
.tune-spec.pinned .acts { display: none; }                       /* (Reset and Copy are in the tool while it's open) */
.tune-spec.pinned { width: min(320px, calc(100vw - 32px)); }
/* dock: the card grows upwards from its corner (bottom anchored), so the page under it stays put */
html[data-ix="dock"] .tune-spec { max-height: calc(100vh - 92px); overflow: auto; overscroll-behavior: contain; }

/* sheet: a column on the right the page makes room for. Everything on the page shifts over on the spring */
html[data-ix="sheet"] { --sheet-w: 340px; }
html[data-ix="sheet"] body { transition: padding-right .7s var(--spring); }
html[data-ix="sheet"] .nav { transition: right .7s var(--spring); }
html[data-ix="sheet"]:is(.tune-on, .spec-open) body { padding-right: var(--sheet-w); }
html[data-ix="sheet"]:is(.tune-on, .spec-open) .nav { right: var(--sheet-w); }
html[data-ix="sheet"] .tune-spec { top: 0; right: 0; bottom: 0; width: var(--sheet-w); max-height: none; border-radius: 0; border: 0; border-left: 1px solid var(--rule); box-shadow: none;
  background: rgba(250,249,246,.98); padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain;
  translate: 100% 0; opacity: 1; transition: translate .7s var(--spring); }
html[data-ix="sheet"] .tune-spec.pinned { width: var(--sheet-w); }
html[data-ix="sheet"] .tune-on .tune-spec, html[data-ix="sheet"] .tune-spec.open, html[data-ix="sheet"].tune-on .tune-spec { translate: 0 0; }
html[data-ix="sheet"] .tune-spec .sp-head h2 { font-size: 13px; }
html[data-ix="sheet"] .tune-spec dl { margin-top: 6px; }
html[data-ix="sheet"] .tune-spec.pinned dl, html[data-ix="sheet"] .tune-spec.pinned .note { display: block; }   /* the readout stays above the tools: there's room */
html[data-ix="sheet"] .tune-spec.pinned dl { display: grid; }
html[data-ix="sheet"] .tune-spec .tune-tabs { margin-top: 14px; }
html[data-ix="sheet"] .ix .gap-r { display: none; }             /* (the frame's right edge is where the sheet starts) */

/* Phones: both routes are a sheet along the bottom; pinned, it can be taller and scrolls inside itself */
@media (max-width: 700px) {
  html[data-ix] .tune-spec, html[data-ix="sheet"] .tune-spec { top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: 32vh; border: 1px solid var(--rule); border-radius: 10px;
    padding: 10px 12px; translate: 0 12px; opacity: 0; transition: translate .5s var(--spring), opacity .3s var(--ease); }
  html[data-ix] .tune-on .tune-spec, html[data-ix].tune-on .tune-spec, html[data-ix] .tune-spec.open { translate: 0 0; opacity: 1; }
  html[data-ix] .tune-spec.pinned { max-height: min(70vh, 600px); }
  html[data-ix="sheet"] body, html[data-ix="sheet"]:is(.tune-on, .spec-open) body { padding-right: 0; }
  html[data-ix="sheet"]:is(.tune-on, .spec-open) .nav { right: 0; }
  html[data-ix="sheet"] .tune-spec.pinned dl, html[data-ix="sheet"] .tune-spec.pinned .note { display: none; }
  html[data-ix="sheet"] .ix .gap-r { display: block; }
}

/* The Inspector tile's example: the panel in small, pinned to the word, with live tabs */
.ts-ring { right: 4%; top: 40%; width: 54%; aspect-ratio: auto; }
.ts-ring::before { display: none; }
.ts-dock { background: rgba(252,251,249,.96); border: 1px solid var(--rule); border-radius: 8px; corner-shape: var(--corner); box-shadow: 0 16px 36px -20px rgba(20,20,18,.35);
  padding: 9px 10px 10px; font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink); }
.ts-dock > b { display: flex; justify-content: space-between; color: var(--blue-ink); font-weight: 500; }
.ts-dock > b small { font: inherit; color: var(--ink-faint); }
.ts-tabs { display: flex; gap: 0; margin: 6px -3px 0; border-bottom: 1px solid var(--rule); }
.ts-tabs button { all: unset; cursor: pointer; font: 500 10px/1 var(--sans); color: var(--ink-soft); padding: 5px 5px 6px; margin-bottom: -1px; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; }
.ts-tabs button:first-child, .ts-tabs button.hot, .ts-tabs button:hover { color: var(--ink); }
.ts-tabs button:first-child:not(:has(~ .hot)), .ts-tabs button.hot { border-color: var(--ink); }
.ts-tabs button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: -2px; }
/* Its controls work right in the tile: real sliders, a weight axis, and colour rails */
.ts-word { transition: color .35s var(--ease); }
.ts-word.ts-ease { transition: color .35s var(--ease), font-weight .6s cubic-bezier(.2,.7,.1,1), font-variation-settings .6s cubic-bezier(.2,.7,.1,1); }
.ts-pane { display: grid; gap: 6px; margin-top: 9px; }
.ts-pane[hidden] { display: none; }
.ts-row { display: grid; gap: 4px; }
.ts-row span, .ts-axis > span { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--sans); color: var(--ink-soft); }
:is(.ts-row, .ts-axis) i { font-style: normal; }
:is(.ts-row, .ts-axis) b { font: 500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink); }
.ts-pane input[type=range] { width: 100%; margin: 0; height: 14px; accent-color: var(--ink); cursor: pointer; }
/* Weight: the axis, with five stops you can jump to, each set in its own weight */
.ts-axis { display: grid; gap: 4px; }
.ts-ticks { display: flex; justify-content: space-between; margin-top: 1px; }
.ts-ticks button { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 2px; font: inherit; font-family: var(--serif); font-size: 13px; line-height: 1; color: var(--ink-faint); transition: color .2s, scale .25s var(--ease); }
.ts-ticks button small { font: 500 8.5px/1 "IBM Plex Mono", ui-monospace, monospace; }
.ts-ticks button:hover { color: var(--ink); scale: 1.08; }
.ts-ticks button.on { color: var(--ink); }
.ts-ticks button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; border-radius: 3px; }
/* Colour: the real panel's picker in small (the same .pk- parts, scaled down) */
.ts-pick { display: grid; gap: 7px; --x: 0; --y: 0; --hx: 0; --hue: red; --pick: #000; }
.ts-pick .pk-area { height: 64px; border-radius: 7px; }
.ts-pick .pk-hue { height: 10px; }
.ts-pick .pk-dot, .ts-pick .pk-knob { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0,0,0,.35); }
.ts-pick .pk-dot { left: calc(9px + var(--x) * (100% - 18px)); top: calc(9px + var(--y) * (100% - 18px)); }
.ts-pick .pk-knob { left: calc(9px + var(--hx) * (100% - 18px)); }
.ts-pick .pk-row { gap: 6px; }
.ts-pick .pk-prev { width: 18px; height: 18px; }
.ts-pick .pk-hex { padding: 5px 7px; font-size: 10.5px; border-radius: 6px; }
.ts-pick :is(.pk-area, .pk-hue):focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.ts-sw { display: flex; justify-content: space-between; padding-top: 1px; }
.ts-sw button { all: unset; cursor: pointer; width: 17px; height: 17px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20,20,18,.14); transition: scale .25s var(--spring, var(--ease)), box-shadow .2s; }
.ts-sw button:hover { scale: 1.15; }
.ts-sw button.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.ts-sw button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }

/* A phone's tap shows the readout first; its Adjust opens the tools in the same panel */
.sp-adjust { all: unset; box-sizing: border-box; display: block; width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 8px; text-align: center; cursor: pointer;
  font: 500 13px/1 var(--sans); background: var(--ink); color: var(--paper); }
.sp-adjust { transition: background-color .2s var(--ease); }   /* (as Copy CSS: lifts under the pointer, darker when pressed) */
@media (hover: hover) { .sp-adjust:hover { background: #34322e; } }
.sp-adjust:active { background: #000; }
.sp-adjust:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.sp-adjust[hidden], .tune-spec.pinned .sp-adjust { display: none; }

/* --- On a phone: the Inspector is one sheet along the bottom ------------------------------------------------------
   The switch hands over to it: switched on, the pill steps aside and the sheet rises out of its corner. It has three
   states: "tap anything" (idle), the readout of what you tapped with Adjust, and the tools (taller). A grip at the top
   drags down a level; Done switches it off. Controls are sized for a thumb */
.sp-grip, .sp-done, .sp-hint { display: none; }
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  html[data-ix] .tune-spec, html[data-ix] .tune-spec.pinned { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto;
    border-radius: 18px; padding: 22px 16px 14px; max-height: min(42vh, 380px); transform-origin: 100% 100%;   /* (the tools scroll inside it, so most of the screen stays visible) */
    box-shadow: 0 -10px 40px -20px rgba(20,20,18,.35), 0 0 0 1px var(--rule); }
  html[data-ix] .tune-spec:not(.dragging) { transition: translate .5s var(--spring), scale .5s var(--spring), opacity .25s var(--ease), max-height .5s var(--spring); }
  html[data-ix] .tune-spec { scale: .9; }
  html[data-ix].tune-on .tune-spec, html[data-ix] .tune-spec.open { scale: 1; }
  .tune-spec.dragging { transition: none; }
  .sp-grip { display: block; position: absolute; left: 50%; top: 8px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: rgba(20,20,18,.18); }
  .tune-spec .sp-head { touch-action: none; }
  .sp-done { display: block; all: unset; font: 500 14px/1 var(--sans); color: var(--blue-ink); padding: 8px 4px 8px 12px; margin: -8px -4px -8px 0; cursor: pointer; }
  .tune-spec h2 { font-size: 14px; }
  /* idle: just the line asking for a tap */
  .tune-spec.idle :is(dl, .note, .sp-adjust, .acts, .sp-back) { display: none !important; }
  .tune-spec.idle .sp-hint { display: block; margin: 6px 0 2px; font: 400 15px/1.45 var(--sans); color: var(--ink-soft); }
  /* the switch steps aside while the sheet's up (the sheet is the switch now) */
  html.tune-on .switch { opacity: 0; scale: .85; pointer-events: none; transition: opacity .2s, scale .3s var(--ease); }
  .switch { transition: opacity .3s .15s, scale .4s var(--spring) .15s; }
  /* thumb-sized */
  .tune-spec dl { font-size: 13px; gap: 4px 16px; }
  .sp-adjust { padding: 13px 14px; font-size: 15px; border-radius: 12px; }
  .tune-tabs { gap: 4px; margin: 10px 0 4px; border: 0; background: rgba(20,20,18,.05); border-radius: 10px; padding: 3px; }
  .tune-tabs button { flex: 1; text-align: center; padding: 10px 6px; font-size: 14px; border: 0; border-radius: 8px; margin: 0; }
  .tune-tabs button.on { background: #fff; box-shadow: 0 1px 3px rgba(20,20,18,.12); }
  .tune-spec input[type=range] { height: 30px; }
  .tune-spec .tp-num { font-size: 13px; padding: 5px 6px; }
  .tune-spec .acts button { padding: 12px 10px; font-size: 14px; border-radius: 10px; }
}

/* Phone sheet, compact: the tools a little tighter so more of them fit in the shorter sheet */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  html[data-ix] .tune-spec { overscroll-behavior: contain; }
  .tune-spec.pinned .note, .tune-spec.pinned .tp-note { display: none; }
  .tune-spec .tp-row { gap: 2px; }
  .tune-spec input[type=range] { height: 26px; }
  .tune-tabs { margin: 8px 0 2px; }
  .tune-tabs button { padding: 8px 6px; }
}
/* A phone: just the rounded selection outline on what you tapped; the blueprint redlines (box, handles, distances) are a desktop hover */
@media (max-width: 700px), (hover: none) and (pointer: coarse) { .ix { display: none !important; } }