/* Tyne's compact glass workbench. Precise glyphs above a shared moving lens. */
.tyne-demo-dock {
  --dock-ink: #284b40; --dock-muted: #5f766b;
  --dock-rim: rgb(255 255 246 / .65); --dock-bed: rgb(196 213 202 / .46);
  --dock-glass: rgb(236 245 232 / .28); --dock-light: rgb(255 255 242 / .6);
  --dock-shadow: rgb(13 46 40 / .23); --dock-line: rgb(65 107 83 / .14);
  isolation: isolate; color: var(--dock-ink); font-family: var(--sans, sans-serif);
}
html[data-scene-tone="dark"] .tyne-demo-dock {
  --dock-ink: #e1eee3; --dock-muted: #b0c4bc;
  --dock-rim: rgb(210 247 224 / .23); --dock-bed: rgb(12 32 35 / .85);
  --dock-glass: rgb(103 149 136 / .13); --dock-light: rgb(189 232 207 / .22);
  --dock-shadow: rgb(0 9 16 / .46); --dock-line: rgb(179 222 201 / .14);
}
html[data-scene-layout] .hero > .hero-inner > .tyne-demo-dock {
  grid-column: 1; grid-row: 4; align-self: end; justify-self: center;
  position: relative; display: block; width: min(100%, 430px); min-width: 0;
  margin: 24px 0 -5px; padding: 0; border: 0; background: none;
}
.tyne-dock-tray {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px; padding: 6px 9px 7px; border: 1px solid var(--dock-rim); border-radius: 22px;
  isolation: isolate;
  background: linear-gradient(175deg, var(--dock-light), transparent 35%),
    linear-gradient(120deg, var(--dock-glass), transparent 60%), var(--dock-bed);
  box-shadow: 0 12px 20px -13px var(--dock-shadow), 0 2px 3px var(--dock-shadow),
    inset 0 1px 1px var(--dock-rim), inset 0 -2px 3px rgb(0 22 23 / .08);
}

.tyne-dock-tray::after {
  content: ""; position: absolute; inset: auto 23% -6px; height: 12px; pointer-events: none;
  border-radius: 50%; background: var(--dock-shadow); filter: blur(9px); z-index: -2; opacity: .6;
}
.tyne-dock-caustic {
  position: absolute; z-index: -1; left: 0; top: 5px; bottom: 5px; width: 64px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0, var(--dock-light), transparent 75%);
  transform: translateX(var(--dock-light-x, 106px)); opacity: calc(var(--dock-presence, .1) * .35);
  transition: opacity .25s ease;
}
.tyne-demo-dock-item {
  --dock-scale: 1; --dock-lift: 0px; --dock-shift: 0px;
  --dock-tilt: 0deg; --dock-depth: 0; --dock-parallax: 0px;
  position: relative; z-index: 1; display: block; width: 100%; min-width: 0; height: 64px;
  margin: 0; padding: 0; border: 0; border-radius: 16px; overflow: visible;
  background: transparent; color: var(--dock-ink); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  /* The glass surface and click target stay fixed. Only artwork moves inside. */
  animation: tyne-dock-arrive .7s cubic-bezier(.22, 1, .36, 1) backwards;
}
.tyne-demo-dock-item:nth-of-type(2) { animation-delay: .055s; }
.tyne-demo-dock-item:nth-of-type(3) { animation-delay: .11s; }
.tyne-demo-dock-item:nth-of-type(4) { animation-delay: .165s; }
.tyne-dock-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; gap: 4px; padding-top: 6px; box-sizing: border-box; border: 0; border-radius: inherit;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
  pointer-events: auto;
}
.tyne-demo-dock-item.is-active { z-index: 2; }
.tyne-demo-dock-item.is-active .tyne-dock-tile {
  background: radial-gradient(ellipse at 50% 0, var(--dock-light), transparent 80%), var(--dock-glass);
  box-shadow: 0 3px 8px -5px var(--dock-shadow);
}
.tyne-demo-dock-item.is-active .tyne-dock-art { filter: drop-shadow(0 2px 3px var(--dock-shadow)); }
.tyne-demo-dock-item:focus-visible { outline: 2px solid var(--studio-accent, #34785e); outline-offset: 3px; }
.tyne-demo-dock-item:active .tyne-dock-art { scale: .94; }
.tyne-dock-art { display: block; position: relative; width: 28px; height: 28px; pointer-events: none; transition: scale .25s ease, filter .3s ease; transform: translate3d(calc(var(--dock-shift) * .5), calc(var(--dock-lift) * .45), 0) rotate(var(--dock-tilt)) scale(var(--dock-scale)) perspective(120px) rotateY(calc(var(--dock-tilt) * 2)); }
.tyne-dock-art .dock-glyph { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.tyne-dock-art .dock-glyph-mic { width: 25px; height: 25px; margin: 3px auto 0; }
.dock-glyph-back { transform: translateX(calc(var(--dock-parallax) * -.2)); }
.dock-glyph-front { transform: translate(calc(var(--dock-parallax) * .5), calc(var(--dock-depth) * -.8px)); }
.dock-column-one { transform-origin: 9px 24px; transform: scaleY(calc(.85 + var(--dock-depth) * .15)); }
.dock-column-two { transform-origin: 17px 24px; transform: scaleY(calc(.8 + var(--dock-depth) * .2)); }
.dock-column-three { transform-origin: 25px 24px; transform: scaleY(calc(.75 + var(--dock-depth) * .25)); }
.tyne-dock-label { position: relative; pointer-events: none; font: 550 10px/1.3 var(--sans, sans-serif); letter-spacing: .015em; text-align: center; max-width: 100%; min-height: 26px; display: flex; align-items: center; justify-content: center; }
.tyne-dock-status { display: none; }
.tyne-dock-caption {
  display: flex; justify-content: center; align-items: baseline; gap: 6px;
  min-height: 27px; padding-top: 10px; box-sizing: border-box;
  color: var(--studio-copy, var(--dock-ink)); text-align: center; white-space: nowrap;
  font: 500 9px/1.4 var(--sans, sans-serif);
}
.tyne-dock-caption-meta { color: var(--studio-muted, var(--dock-muted)); font-size: 8.5px; }
.tyne-dock-caption-meta::before { content: "·"; margin-right: 6px; opacity: .65; }
.tyne-dock-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero.is-chat-expanded .tyne-demo-dock { display: none !important; }
.tyne-demo-dock.is-paused * { animation-play-state: paused !important; }
@keyframes tyne-dock-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  html[data-scene-layout] .hero > .hero-inner > .tyne-demo-dock { grid-column: auto; grid-row: auto; order: 3; align-self: center; width: min(100%, 430px); margin: 26px auto -4px; }
  .tyne-dock-tray { gap: 2px; padding: 6px 7px 7px; border-radius: 21px; }
  .tyne-demo-dock-item { height: 64px; border-radius: 14px; }
  .tyne-dock-caption { min-height: 39px; padding-top: 9px; gap: 1px; flex-direction: column; align-items: center; white-space: normal; }
  .tyne-dock-caption-meta::before { content: none; }
}
@media (max-width: 360px) { .tyne-dock-tray { gap: 2px; padding-inline: 6px; } }
@media (prefers-reduced-motion: reduce) {
  .tyne-demo-dock *, .tyne-demo-dock *::before { animation: none !important; transition: none !important; }
  .tyne-demo-dock-item, .tyne-dock-tile, .tyne-dock-art, .dock-glyph-back, .dock-glyph-front { transform: none !important; }
  .tyne-demo-dock-item:active .tyne-dock-art { scale: 1; }
}
@media (forced-colors: active) {
  .tyne-dock-tray, .tyne-demo-dock-item { border: 1px solid ButtonText; background: Canvas; color: ButtonText; }
  .tyne-dock-caption, .tyne-dock-caption-meta { color: CanvasText; }
}

/* The header menu keeps demos visible as their own quieter section. */
.tyne-brand-demos{margin:4px 1px 1px;padding:7px 5px 5px;border-radius:9px;background:var(--studio-field)}
.tyne-brand-demos-title{display:block;margin:0 5px 4px;color:var(--studio-muted);font:600 10px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.tyne-brand-demos .tyne-brand-demo-options{margin:0;padding:0;background:none;border-radius:0}
.tyne-brand-demos .tyne-brand-demo-options > :is(button,span){
 display:block;width:100%;min-height:0;box-sizing:border-box;margin:0;padding:6px 7px;
 border:0;border-radius:7px;background:none;color:var(--studio-heading);
 font:500 11.5px/1.25 var(--sans);text-align:left;
}
.tyne-brand-demos .tyne-brand-demo-options > button{cursor:pointer;background:var(--studio-field)}
.tyne-brand-demos .tyne-brand-demo-options > button:hover{background:var(--studio-hover)}
.tyne-brand-demos .tyne-brand-demo-options > span{color:var(--studio-muted)}
.tyne-brand-demos .tyne-brand-demo-options small{display:block;margin-top:2px;color:var(--studio-muted);font:400 9px/1.2 var(--sans)}


/* Preserve usable controls when a short phone cannot fit the whole intro. */
@media (max-width: 760px) {
  html[data-scene-layout] .hero.has-scrollable-home > .hero-inner {
    max-height: var(--home-scroll-limit);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--studio-muted) transparent;
  }
  html[data-scene-layout] .hero.has-scrollable-home > .hero-inner > * {
    flex-shrink: 0;
  }
}

/* A compact editorial heading and one quiet, borderless preview surface. */
.tyne-demo-dock .tyne-dock-heading {
  display: block; margin: 0 0 9px; padding: 0; color: var(--dock-ink);
  font: 500 21px/1.1 var(--serif, Georgia, serif); letter-spacing: -.025em;
  text-align: center; text-wrap: nowrap;
}
.tyne-dock-heading em { font-weight: 500; }
.tyne-demo-dock .tyne-dock-caption {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.tyne-dock-preview {
  --preview-surface: #eff3eb; --preview-ink: #243e35; --preview-muted: #586d60;
  --preview-accent: #386c53; --preview-shadow: rgb(15 37 32 / .22);
  position: fixed; z-index: 90; box-sizing: border-box; width: min(320px, calc(100vw - 24px));
  padding: 7px; border: 0; border-radius: 21px; background: var(--preview-surface);
  color: var(--preview-ink); font-family: var(--sans, sans-serif); text-align: left;
  box-shadow: 0 18px 54px -14px var(--preview-shadow), 0 4px 12px -5px var(--preview-shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(7px) scale(.975); transform-origin: var(--preview-arrow-x, 50%) bottom;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility .18s;
}
html[data-scene-tone="dark"] .tyne-dock-preview {
  --preview-surface: #173430; --preview-ink: #e8efe2; --preview-muted: #b9ccc0;
  --preview-accent: #b5d9ba; --preview-shadow: rgb(0 11 17 / .52);
}
.tyne-dock-preview.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.tyne-dock-preview::after {
  content: ""; position: absolute; left: var(--preview-arrow-x, 50%); bottom: -5px;
  width: 12px; height: 12px; background: var(--preview-surface);
  transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0;
}
.tyne-dock-preview::before {
  content: ""; position: absolute; inset: auto 0 -12px; height: 13px;
}
.tyne-dock-preview[data-side="below"] { transform-origin: var(--preview-arrow-x, 50%) top; }
.tyne-dock-preview[data-side="below"]::after { top: -5px; bottom: auto; border-radius: 3px 0 0 0; }
.tyne-dock-preview[data-side="below"]::before { inset: -12px 0 auto; }
.tyne-preview-image { position: relative; width: 100%; overflow: hidden; border-radius: 15px; background: #203b35; aspect-ratio: 16 / 9; }
.tyne-preview-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tyne-preview-image .tyne-preview-themed{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.tyne-preview-image .tyne-preview-themed[hidden]{display:none}
.tyne-dock-preview[data-tool="about"] .tyne-preview-image img { object-position: center 20%; }

.tyne-preview-image::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent, rgb(8 25 23 / .74)); pointer-events: none; }
.tyne-preview-credit { position: absolute; z-index: 1; left: 10px; right: 8px; bottom: 8px; color: #fff; font: 500 8px/1.3 var(--sans, sans-serif); letter-spacing: .015em; text-shadow: 0 1px 4px #122720; }
.tyne-preview-body { padding: 14px 12px 11px; }
.tyne-preview-eyebrow { display: block; margin: 0 0 8px; color: var(--preview-accent); font: 600 8px/1.2 var(--sans, sans-serif); letter-spacing: .13em; }
.tyne-preview-title { margin: 0 0 7px; color: var(--preview-ink); font: 500 25px/1.05 var(--serif, Georgia, serif); letter-spacing: -.035em; }
.tyne-preview-description { margin: 0; color: var(--preview-muted); font: 400 11px/1.6 var(--sans, sans-serif); }
.tyne-preview-hint { display: block; margin: 12px 0 0; color: var(--preview-accent); font: 550 9px/1.4 var(--sans, sans-serif); }
.tyne-dock-preview.is-compact .tyne-preview-image { max-height: 80px; }
.tyne-dock-preview.is-compact .tyne-preview-body { padding-block: 9px; }
.tyne-dock-preview.is-compact .tyne-preview-eyebrow { margin-bottom: 5px; }
.tyne-dock-preview.is-compact .tyne-preview-hint { margin-top: 7px; }
@media (max-width: 760px) {
  .tyne-demo-dock .tyne-dock-heading { font-size: 20px; margin-bottom: 8px; }
  .tyne-dock-preview { width: min(300px, calc(100vw - 24px)); }
  .tyne-preview-body { padding: 11px 10px 9px; }
  .tyne-preview-title { font-size: 23px; }
  .tyne-preview-image { max-height: 142px; }
}
@media (max-height: 500px) {
  .tyne-preview-image { max-height: 90px; }
  .tyne-preview-body { padding-block: 9px; }
  .tyne-preview-hint { margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .tyne-dock-preview { transition: none; transform: none; }
}
@media (forced-colors: active) {
  .tyne-dock-preview { border: 1px solid CanvasText; background: Canvas; }
  .tyne-preview-title, .tyne-preview-description, .tyne-preview-eyebrow, .tyne-preview-hint { color: CanvasText; }
}