@import url('tyne-demos.css?v=20261024-base-2');
@font-face{font-family:TynePlate;src:url('fonts/BarlowCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
/* The same editorial split, type and spacing as the traffic workspace. */
.sheet.is-demo .sheet-body{padding:48px clamp(24px,3vw,52px) 32px;display:block}
.demo-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,3vw,48px);height:100%;min-height:0;align-items:stretch}
.demo-copy{display:flex;flex-direction:column;min-width:0;min-height:0}
.demo-copy h2{font-family:var(--serif);font-size:clamp(42px,3.8vw,64px);font-weight:500;line-height:1.05;letter-spacing:-.025em;margin:4px 0 20px;color:var(--map-ink)}
.demo-copy h2 em{font-style:normal;font-weight:500;color:var(--map-accent)}
.demo-intro{font:clamp(14px,1.15vw,19px)/1.55 var(--sans);color:var(--map-muted);margin:0 0 27px;max-width:48ch}
.demo-control-stack{display:flex;flex-direction:column;flex:1;min-height:0}
.demo-field{margin:0 0 12px}.demo-field>span{font:12px var(--sans);color:var(--map-muted);margin-bottom:8px}
.demo-workspace :is(input[type=text],textarea,select){font:400 clamp(14px,1.15vw,18px)/1.6 var(--sans);padding:12px 16px;border-radius:12px;background:var(--map-field);color:var(--map-ink)}
.demo-workspace textarea{min-height:104px;height:104px;max-height:200px}
.demo-workspace select{color-scheme:light;cursor:pointer}.demo-workspace select option{background:#f0f5ee;color:#1e3b36}
html[data-scene-tone=dark] .demo-workspace select{color-scheme:dark}html[data-scene-tone=dark] .demo-workspace select option{background:#10272a;color:#f3f1e7}
.demo-inline-fields{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.demo-inline-fields select{font-size:12px;padding:12px 9px}
.demo-upload{padding:0;margin:0 0 14px;border-radius:12px}
.demo-file-picker{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;padding:16px;position:relative;cursor:pointer;color:var(--map-muted)}
.demo-file-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.demo-file-picker svg{grid-row:1/3;width:22px;height:25px;fill:none;stroke:currentColor;stroke-width:1.4;align-self:center}
.demo-file-picker span{font-size:12px;overflow-wrap:anywhere}.demo-file-picker small{font-size:10px;opacity:.75;margin-top:3px}
.demo-file-picker:focus-within{outline:2px solid var(--map-accent);outline-offset:3px;border-radius:12px}
.demo-submit{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.demo-workspace .demo-submit>.demo-primary{width:100%;justify-content:space-between;min-height:55px;padding:15px 20px;font:500 17px var(--sans);background:var(--studio-button,#216d60);color:#f7f7ee;border-radius:11px}
.demo-submit>.demo-primary>span:last-child{font-size:24px;font-weight:400}
.demo-status{font-size:12px;line-height:1.5;margin:0 0 10px;min-height:0}
.demo-feature{min-width:0;min-height:0;height:100%;border-radius:14px}
.demo-results{display:flex;flex-direction:column;gap:12px;margin:0}
.demo-result-tools{display:flex;gap:10px;align-items:center;justify-content:space-between;flex:none}
.demo-result-filter{min-width:0}.demo-result-filter select{font-size:11px;padding:10px 12px}.demo-result-tools button{font-size:11px;white-space:nowrap}
.demo-empty{height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:var(--map-field)}
.demo-fleet-art{width:150px;height:100px;margin:0 0 30px;fill:none;stroke:var(--map-accent);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.demo-empty h3{font:500 32px/1.1 var(--serif);margin-bottom:14px}.demo-empty p{font:12px/1.6 var(--sans)}
.demo-table-wrap{flex:1;max-height:none;min-height:0;overflow:auto;background:var(--map-field)}
.demo-table{font-size:11px}.demo-table th{font-size:10px;background:var(--map-paper);z-index:1;padding:15px 12px}.demo-table td{padding:16px 12px}.demo-badge{font-size:10px}
.demo-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;font-size:11px;color:var(--map-muted)}
.demo-frame,.demo-dashboard .demo-frame{width:100%;height:100%;min-height:0;flex:none;border:0;background:var(--map-paper)}
/* Speech moves only while preparing or playing; the waveform follows the audio. */
.demo-voice-player{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:30px;gap:25px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--map-accent) 12%,transparent),transparent 62%),var(--map-field);min-height:0;--energy:0}
.voice-orbit{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none;opacity:.8}
.voice-orbit-ring{position:absolute;width:min(72%,340px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--map-accent) 19%,transparent);border-radius:50%;transform:rotate(-25deg) scaleY(.85)}
.ring-two{width:min(86%,410px);transform:rotate(25deg) scaleY(.85);opacity:.65}.ring-three{width:min(96%,460px);opacity:.35;transform:rotate(65deg) scaleY(.85)}
.voice-core{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--map-accent) 23%,transparent),transparent 72%);filter:blur(8px);transform:scale(calc(1 + var(--energy) * .35));transition:transform .15s}
.voice-feature-content{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:1}
.demo-wave{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:90px;margin:0 auto 8px}
.demo-wave i{flex:0 1 4px;max-width:4px;min-width:2px;border-radius:4px;height:var(--bar,14px);background:var(--map-accent);opacity:.65;transition:height .09s linear;box-shadow:0 0 12px color-mix(in srgb,var(--map-accent) 15%,transparent)}
.demo-voice-player .voice-play{display:grid;place-items:center;width:62px;height:62px;min-height:62px;padding:0;border-radius:50%;background:color-mix(in srgb,var(--map-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--map-accent) 22%,transparent);color:var(--map-accent);box-shadow:0 8px 25px #001d1b0d;transition:background .2s,transform .2s}
.demo-voice-player .voice-play:disabled{opacity:.35}.demo-voice-player .voice-play:not(:disabled):hover{background:color-mix(in srgb,var(--map-accent) 24%,transparent);transform:scale(1.06)}
.voice-play svg{width:23px;height:23px;fill:currentColor;stroke:none;margin-left:1px}
.demo-voice-player h3{font:500 36px/1.1 var(--serif);letter-spacing:-.025em;margin:0}.demo-voice-player p{font:12px/1.6 var(--sans);margin:0;max-width:30ch}
.voice-transport{z-index:1;width:100%;margin:0 auto;max-width:380px}
.demo-workspace .voice-transport input{height:16px;min-height:0;padding:0;margin:0;accent-color:var(--map-accent);cursor:pointer;background:transparent}
.voice-time{display:flex;justify-content:space-between;margin:4px 0 18px;font:10px var(--sans);font-variant-numeric:tabular-nums;color:var(--map-muted)}
.demo-voice-player .voice-download{background:var(--map-hover);border-radius:10px;font:500 12px var(--sans);padding:12px 22px}
.demo-voice-player audio{display:none}
.demo-voice-player.is-working .voice-orbit-ring{animation:voice-orbit-turn 9s linear infinite}.demo-voice-player.is-working .ring-two{animation-direction:reverse;animation-duration:12s}
.demo-voice-player.is-working .demo-wave i{animation:voice-wait-wave 1.1s ease-in-out infinite alternate;animation-delay:var(--delay)}
.demo-voice-player.is-playing .voice-orbit-ring{animation:voice-orbit-turn 18s linear infinite}.demo-voice-player.is-playing .ring-two{animation-direction:reverse;animation-duration:24s}
@keyframes voice-orbit-turn{to{transform:rotate(335deg) scaleY(.85)}}
@keyframes voice-wait-wave{to{height:8px;opacity:.25}}
/* The original dock travels with the active workspace. */
.dock-workspace-actions{display:none}
html.has-popup-dock .sheet:is(.is-map,.is-about,.is-demo){height:min(810px,calc(100dvh - 132px));top:calc((100dvh - 96px)/2)}
.tyne-demo-dock.is-workspace-dock{position:fixed;left:50%;transform:translateX(-50%);z-index:160;display:flex;align-items:stretch;width:min(610px,calc(100vw - 20px));padding:4px;border:1px solid var(--dock-rim);border-radius:21px;background:linear-gradient(175deg,var(--dock-light),transparent 35%),var(--dock-bed);box-shadow:0 8px 28px -12px var(--dock-shadow);backdrop-filter:blur(18px);margin:0}
.is-workspace-dock .tyne-dock-heading{display:none}.is-workspace-dock .tyne-dock-tray{flex:1;min-width:0;grid-template-columns:repeat(5,minmax(0,1fr));padding:0 4px;border:0;background:none;box-shadow:none;gap:2px}.is-workspace-dock .tyne-dock-tray::after{display:none}
.is-workspace-dock .tyne-demo-dock-item{height:62px}.is-workspace-dock .tyne-demo-dock-item[aria-current=page] .tyne-dock-tile{background:var(--dock-glass);box-shadow:inset 0 0 0 1px var(--dock-line)}
.is-workspace-dock .dock-workspace-actions{display:flex;gap:2px;border-left:1px solid var(--dock-line);padding-left:5px}
.tyne-workspace-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:62px;min-height:62px;padding:7px 5px 4px;border:0;border-radius:14px;background:transparent;color:var(--dock-ink);font:550 10px/1.3 var(--sans);cursor:pointer}
.tyne-workspace-action:hover{background:var(--dock-glass)}.tyne-workspace-action svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.tyne-workspace-action:focus-visible{outline:2px solid var(--map-accent,#70ab96);outline-offset:1px}
@media(max-width:900px){
 html.has-popup-dock .sheet:is(.is-map,.is-about,.is-demo){top:10px;height:calc(100dvh - 112px - env(safe-area-inset-bottom))}
 .sheet.is-demo .sheet-body{padding:42px 14px 14px}
 .demo-workspace{display:flex;flex-direction:column;height:auto;min-height:100%;gap:24px;flex:none}
 .demo-copy h2{font:500 32px/1.05 var(--serif);letter-spacing:-.025em;margin:0 0 18px}
 .demo-intro{font-size:14px;line-height:1.55;margin:0 0 22px;max-width:none}
 .demo-control-stack{flex:none}.demo-submit{margin-top:0}
 .demo-workspace .demo-submit>.demo-primary{min-height:48px;padding:12px 16px;font-size:16px}
 .demo-field>span{font-size:11px}.demo-workspace :is(input[type=text],textarea){font-size:16px}
 .demo-inline-fields select{font-size:12px}
 .demo-feature{height:auto;min-height:0;margin:0;flex:none}
 .demo-results{min-height:300px}.demo-empty{min-height:300px}.demo-table-wrap{max-height:450px;flex:none}
 .demo-dashboard .demo-frame{height:580px;min-height:580px;flex:none}
 .demo-voice-player{height:440px;min-height:440px;padding:28px 20px;gap:22px}
 .is-workspace-dock .tyne-demo-dock-item{height:60px}.is-workspace-dock .tyne-dock-art{width:24px;height:24px}.is-workspace-dock .tyne-dock-art .dock-glyph-mic{width:22px;height:22px;margin-top:2px}
 .is-workspace-dock .tyne-dock-label{font-size:8.5px;min-height:24px}
 .tyne-workspace-action{min-width:43px;min-height:60px;font-size:9px;gap:9px;padding-inline:3px}.tyne-workspace-action svg{width:22px;height:22px}
 .is-workspace-dock .dock-workspace-actions{padding-left:2px}.is-workspace-dock .tyne-dock-tray{padding-inline:0;gap:0}
}
@media(prefers-reduced-motion:reduce){.demo-voice-player *{animation:none!important;transition:none!important}}
@media(max-width:900px) and (max-height:680px){.sheet.is-demo .sheet-body{padding-top:38px;padding-bottom:10px}.demo-copy h2{font-size:27px}}
@media(min-width:500px) and (max-width:900px) and (max-height:500px){.sheet.is-demo .sheet-body{padding-top:34px}.demo-copy h2{font-size:22px;line-height:1}}
/* Details sit beneath the shared introduction without changing its typography. */
.demo-detail{font:400 clamp(12px,.95vw,15px)/1.65 var(--sans);color:var(--map-muted);margin:0 0 20px;max-width:51ch}
.demo-vehicles .demo-intro,.demo-voice .demo-intro{margin-bottom:16px}
.demo-workspace input[data-fleet-input]{background:linear-gradient(#ffe665,#f3c937);color:#171b19;border:2px solid #2c3028;border-radius:8px;box-shadow:inset 0 0 0 2px #ffe580,0 3px 0 #00000014;font:600 34px/1.15 TynePlate,'Arial Narrow',sans-serif;letter-spacing:.075em;text-transform:uppercase;padding:11px 17px;height:66px}
.demo-workspace input[data-fleet-input]::placeholder{color:#171b1966;opacity:1}
.demo-workspace input[data-fleet-input]:focus-visible{border-color:#171b19;box-shadow:0 0 0 3px color-mix(in srgb,var(--map-accent) 40%,transparent),inset 0 0 0 2px #ffe580}
.demo-results{border:1px solid color-mix(in srgb,var(--map-muted) 16%,transparent);background:var(--map-field);border-radius:14px;overflow:hidden;gap:0}

.demo-results .demo-empty{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--map-accent) 8%,transparent),transparent 72%);border-radius:0;flex:1}
.demo-result-tools{padding:12px 15px;border-bottom:1px solid color-mix(in srgb,var(--map-muted) 12%,transparent)}
.demo-results .demo-table-wrap{background:transparent;border-radius:0}
.demo-results .demo-table{white-space:normal;table-layout:fixed;font-size:11px;min-width:430px}
.demo-results .demo-table th{background:var(--map-paper);font-size:9px;letter-spacing:.04em;padding:13px 12px}
.demo-results .demo-table th:first-child{width:24%}.demo-results .demo-table th:nth-child(2){width:28%}
.demo-results .demo-table td{padding:18px 12px;vertical-align:top;line-height:1.5;overflow-wrap:anywhere}
.demo-results .demo-table tbody tr:hover{background:color-mix(in srgb,var(--map-accent) 5%,transparent)}
.demo-registration{display:inline-block;background:#f4d052;color:#191d19;font:600 17px/1.2 TynePlate,'Arial Narrow',sans-serif;letter-spacing:.04em;padding:4px 7px;border:1px solid #322f1b;border-radius:4px;white-space:nowrap}
.demo-results .demo-table small{font-size:9px;line-height:1.5;margin-top:6px;color:var(--map-muted)}
.demo-results .demo-badge{font-size:9px;padding:4px 7px;white-space:nowrap}
.demo-results .demo-pagination{padding:12px 15px;border-top:1px solid color-mix(in srgb,var(--map-muted) 14%,transparent)}
.demo-dashboard-feature{display:flex;flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb,var(--map-muted) 16%,transparent);background:var(--map-paper)}
.demo-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--map-muted) 16%,transparent);flex:none;color:var(--map-muted);font:10px var(--sans)}
.demo-preview-toolbar button{min-height:32px;padding:7px 10px;font-size:10px}.demo-preview-toolbar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.demo-dashboard .demo-frame{flex:1;min-height:0;height:0;border-radius:0}
.demo-dashboard.is-expanded{grid-template-columns:minmax(0,1fr)}.demo-dashboard.is-expanded>.demo-copy{display:none}
.sheet.is-demo .sheet-body,.demo-table-wrap{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--map-accent) 38%,transparent) transparent}
.sheet.is-demo .sheet-body::-webkit-scrollbar,.demo-table-wrap::-webkit-scrollbar{width:6px;height:6px}.sheet.is-demo .sheet-body::-webkit-scrollbar-thumb,.demo-table-wrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--map-accent) 38%,transparent);border-radius:9px}
@media(max-width:900px){.demo-detail{font-size:12px;max-width:none;margin-bottom:18px}.demo-dashboard-feature{height:620px;min-height:620px}.demo-dashboard .demo-frame{height:0;min-height:0;flex:1}.demo-dashboard.is-expanded{min-height:0}.demo-dashboard.is-expanded .demo-dashboard-feature{height:calc(100dvh - 175px);min-height:420px}.demo-results .demo-table td{padding:14px 10px}}
@media(max-width:500px){.demo-results .demo-table{min-width:0;font-size:9px}.demo-results .demo-table th{font-size:8px;padding:12px 6px}.demo-results .demo-table td{padding:14px 6px}.demo-results .demo-table th:first-child{width:25%}.demo-results .demo-table th:nth-child(2){width:27%}.demo-registration{font-size:15px;padding:4px}.demo-results .demo-badge{font-size:8px;padding:4px 5px}.demo-results .demo-table small{font-size:8px}}

/* The blank state is a single centred group; bulk input accepts unstructured text. */
.demo-workspace input[data-fleet-input]::placeholder{font:500 18px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:#292b20a6}
.demo-results .demo-empty{justify-content:center;align-items:center;gap:18px;padding:36px 28px;text-align:center}
.demo-results .demo-fleet-art{width:68px;height:68px;flex:none;margin:0 0 5px;stroke:var(--map-accent);stroke-width:1.3;opacity:.85}
.demo-results .demo-empty h3{margin:0;font-size:30px;max-width:20ch}
.demo-results .demo-empty p{margin:0;max-width:32ch;font-size:12px;line-height:1.7;text-align:center}
.demo-results .demo-result-tools{padding:10px 12px;border:0;gap:8px}
.demo-results .demo-result-filter{flex:0 1 124px;width:124px;margin:0}
.demo-results .demo-result-filter select{width:100%;height:30px;min-height:30px;padding:4px 8px;font-size:10px;line-height:1.3;border-radius:7px}
.demo-results .demo-result-tools button{min-height:30px;padding:6px 9px;font-size:10px}
@media(max-width:500px){.demo-workspace input[data-fleet-input]::placeholder{font-size:12px}.demo-results .demo-empty{padding:28px 22px;gap:16px}.demo-results .demo-empty h3{font-size:27px}.demo-results .demo-fleet-art{width:60px;height:60px}}

/* About is separate from the four interactive demos. */
.tyne-demo-dock:not(.is-workspace-dock) [data-sheet=about]::after{content:"";position:absolute;right:-3px;top:12px;bottom:10px;width:1px;background:var(--dock-line)}
.tyne-demo-dock:not(.is-workspace-dock) .tyne-dock-tray{grid-template-columns:1.15fr repeat(4,minmax(0,1fr));column-gap:6px}
.is-workspace-dock .tyne-dock-tray{grid-template-columns:repeat(4,minmax(0,1fr))}
.is-workspace-dock .dock-workspace-actions{align-items:stretch;gap:2px}
.is-workspace-dock .dock-workspace-actions>.tyne-demo-dock-item{width:62px;flex:none}
.demo-dashboard .demo-detail{font:clamp(14px,1.15vw,19px)/1.55 var(--sans);max-width:48ch;margin-bottom:22px}
.demo-dashboard>.demo-copy{overflow:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:var(--map-hover) transparent}
.dashboard-feature-note{border-left:2px solid var(--map-accent);padding:10px 0 10px 17px;margin:4px 0 24px;color:var(--map-muted)}
.dashboard-feature-note>span{display:block;font:10px var(--sans);letter-spacing:.06em;margin-bottom:9px;text-transform:uppercase}.dashboard-feature-note strong{display:block;font:500 26px/1.15 var(--serif);color:var(--map-ink)}.dashboard-feature-note p{font:12px/1.6 var(--sans);margin:10px 0 0}
.demo-dashboard .dashboard-launch{display:flex;justify-content:space-between;flex:none;width:100%;min-height:52px;padding:14px 18px;font-size:15px;margin-top:auto}
.founder-links button.founder-link{background:transparent;cursor:pointer;font-family:inherit}
html.has-popup-dock .sheet.is-dashboard-full{inset:0 0 auto!important;transform:none!important;width:100vw!important;max-width:none!important;height:calc(100dvh - 88px)!important;max-height:none!important;border-radius:0!important}
.sheet.is-dashboard-full .sheet-body{height:100%;padding:44px 12px 10px!important;overflow:hidden;box-sizing:border-box}
.sheet.is-dashboard-full .demo-dashboard{height:100%;min-height:0;display:flex}.sheet.is-dashboard-full .demo-dashboard-feature{width:100%;height:100%!important;min-height:0!important;flex:1}.sheet.is-dashboard-full .demo-frame{min-height:0!important;height:0!important;flex:1}
.sheet.is-dashboard-full .demo-preview-toolbar{padding:6px 12px}.sheet.is-dashboard-full .demo-preview-toolbar>span{font-size:11px}
@media(max-width:900px){.demo-dashboard>.demo-copy{overflow:visible;padding:0}.demo-dashboard .demo-detail{font-size:14px}.is-workspace-dock .dock-workspace-actions>.tyne-demo-dock-item{width:43px}.sheet.is-dashboard-full .demo-dashboard{gap:0}.dashboard-feature-note strong{font-size:25px}.dashboard-launch{margin-bottom:2px}}

.client-more{display:flex;align-items:center;justify-content:center;white-space:nowrap;font:500 11px var(--sans);color:var(--studio-muted);opacity:.85}
html[data-scene-layout] .hero>.bridge-client-logos{grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px}
.client-logos .client-more{grid-column:1/-1;font-size:10px;margin-top:4px}
.demo-dashboard .demo-intro,.demo-dashboard .demo-detail{margin-bottom:18px}
.demo-dashboard .dashboard-feature-note{padding-block:8px;margin:0 0 18px}.demo-dashboard .dashboard-feature-note>span{margin-bottom:6px}.demo-dashboard .dashboard-feature-note strong{font-size:24px}
@media(max-width:760px){html[data-scene-layout] .hero>.bridge-client-logos{gap:7px}.bridge-client-logos .client-more{font-size:9px}}

.tyne-demo-dock:not(.is-workspace-dock) .tyne-dock-heading{padding-left:0;padding-right:0;text-align:center}
