/* TuningFork public site: Studio template in the Ember Tide palette (claude-07, founder pick,
   PR287 6e04f4f). Ported from apps/site/experiments/brand-directions/claude-07: pal-ember.css,
   base.css and studio.css, in that order, plus the release additions at the end. */
/* claude-07 palette: Ember Tide. Generated from palettes.mjs. */
:root{--ground:#0f2a31;--ground-hi:#163842;--tray:#0a2026;--groove:#071a1f;--piece:#091d23;--pc-edge:#2c5a62;--edge:#04131a;--ink:#efe2c9;--soft:#c2d4cf;--meta:#a5c4bf;--label:#95c7c0;--accent:#6fd1c9;--h1b:#f59a6c;--act:#ef6149;--act-ink:#0f2a31;--art0:#f59a52;--art1:#ef6149;--art2:#5b2a26;--art2b:#efe2c9;--lane-v:#efe2c9;--lane-a:#ef6149;--lane-m:#6fd1c9;--divider:#6e8a86;--plate:#efe2c9;--plate-ink:#0f2a31;--plate-h:#8c2a1c;--plate-body:#3a4d4a;--plate-meta:#414f4c;--plate-link:#9e2f1c;--plate-edge:#efe2c9;--plate-focus:#8c2a1c;--btn-bg:#0f2a31;--btn-ink:#efe2c9;--chip-tray:#0a2026;--chip-ink:#c2d4cf;--chip-on-bg:#ef6149;--chip-on-ink:#0a2026;--field-bg:#0f2a31;--field-ink:#efe2c9;--field-edge:#04131a;--logo-dot:#ef6149;color-scheme:dark}
/* claude-07 shared foundation and Tidepool components. Holds no colour: every colour is a palette
   token (pal-*.css). Templates set structure, type scale and the shape tokens below. */
:root{--display:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;--text:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;--mono:Consolas,"Cascadia Mono","SF Mono",Menlo,monospace;
 --r-tray:12px;--r-pc:8px;--r-plate:10px;--r-ctl:8px;--pc-h:180px;--pc-gap:8px;--fs-body:16px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 14% 0,var(--ground-hi),transparent 58%),var(--ground);color:var(--ink);font:var(--fs-body)/1.55 var(--text)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled,input:disabled,select:disabled{cursor:not-allowed}
a{color:inherit}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,fieldset{margin:0}
ol,ul{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:var(--r-ctl);text-decoration:none;font:600 15px/1.2 var(--text)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px}
main:focus{outline:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
h1 .b,h2 .b{color:var(--h1b)}
/* Level bars (graphic only). */
.bars{display:flex;align-items:flex-end;gap:2px;height:100%}
.bars i{flex:1;min-width:1px;height:calc(var(--lv,0) * 10%);background:var(--lane-m);border-radius:1px}
.bars i.h0{--lv:.4}.bars i.h1{--lv:1}.bars i.h2{--lv:2}.bars i.h3{--lv:3}.bars i.h4{--lv:4}.bars i.h5{--lv:5}.bars i.h6{--lv:6}.bars i.h7{--lv:7}.bars i.h8{--lv:8}.bars i.h9{--lv:9}
.l-voice .bars i{background:var(--lane-v)}.l-accent .bars i{background:var(--lane-a)}.l-music .bars i{background:var(--lane-m)}
/* Logo, action, links */
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font:650 21px/1 var(--display);letter-spacing:-.015em;color:var(--ink)}
.logo i{width:11px;height:11px;border-radius:50%;background:var(--logo-dot)}
.cta{display:inline-flex;gap:10px;align-items:center;min-height:46px;padding:13px 20px;background:var(--act);color:var(--act-ink);border-radius:var(--r-ctl);text-decoration:none;font:600 16px/1 var(--text)}
.cta:hover{background:var(--ink);color:var(--ground)}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font:600 16px/1 var(--text);text-underline-offset:4px}
.eye{font:12.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
/* The tray (illustrative artwork, not audio data) */
.tray{position:relative;margin:0;padding:16px;background:var(--tray);border:1px solid var(--edge);border-radius:var(--r-tray)}
.tc{position:relative;display:grid;grid-template-columns:5fr 6fr 4fr;gap:var(--pc-gap);padding:0 4px 9px;margin-bottom:10px;font:12px/1 var(--mono);color:var(--accent);background:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px calc(100% / 15)) 0 100%/100% 4px no-repeat}
.tc span:last-child{position:absolute;right:4px;top:0}
.pieces{display:grid;grid-template-columns:5fr 6fr 4fr;gap:var(--pc-gap)}
.pc{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:var(--pc-h);padding:12px 14px 14px;background:var(--piece);color:var(--ink);border:1px solid var(--pc-edge);border-radius:var(--r-pc);container-type:inline-size}
.pc small{position:relative;z-index:1;font:12px/1 var(--mono);color:var(--label)}
.pc strong{position:relative;z-index:1;font:650 clamp(24px,23cqi,60px)/.95 var(--display);letter-spacing:-.035em;white-space:nowrap;padding-bottom:2px}
.art{position:absolute}
.p0 .art{right:-22%;bottom:-40%;width:62%;aspect-ratio:1;border-radius:50%;background:var(--art0)}
.p1 .art{right:12%;top:20%;width:36%;aspect-ratio:1;border-radius:50%;border:clamp(9px,1.2vw,16px) solid var(--art1)}
.p2 .art{left:0;right:0;top:30%;height:9%;background:var(--art2);box-shadow:0 24px 0 var(--art2b)}
.groove{margin-top:10px;padding:6px 10px;background:var(--groove);border-radius:var(--r-pc)}
.lane{display:grid;grid-template-columns:58px 1fr;align-items:end;height:40px}
.lane>span{align-self:center;font:11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.lane .bars{padding:5px 0}
.tray figcaption{margin-top:10px;font:11.5px/1.3 var(--mono);letter-spacing:.04em;color:var(--meta)}
/* Object surfaces (plates) and their contents */
.plate{background:var(--plate);color:var(--plate-ink);border:1px solid var(--plate-edge);border-radius:var(--r-plate);--focus:var(--plate-focus)}
.plate .k,.plate legend,.plate label,.plate dt{font:12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--plate-meta)}
.plate h3{color:var(--plate-h)}
.plate p,.plate dd{color:var(--plate-body)}
.plate a{color:var(--plate-link);text-underline-offset:4px}
.mark{display:block;width:22px;height:22px;border-radius:50%;background:var(--art0)}
.q1 .mark{background:transparent;border:6px solid var(--art1)}
.q2 .mark{height:8px;margin:7px 0;border-radius:2px;background:var(--art2b);box-shadow:0 -8px 0 var(--art2)}
.plate.q2 .mark,.plate .q2 .mark{background:var(--plate-h);box-shadow:0 -8px 0 var(--art1)}
.tag,.marker{display:inline-block;justify-self:start;padding:3px 9px;border-radius:calc(var(--r-ctl) / 2);background:var(--btn-bg);color:var(--btn-ink);font:11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.marker-outline{background:transparent;color:var(--plate-h);border:1px solid var(--plate-h)}
/* Sample brief (markup hooks shared with site.js) */
.b-fixed{display:grid;gap:14px;align-content:start}
.b-fixed h3{font:650 24px/1.1 var(--display)}
.b-fixed dl{display:grid;gap:12px}
.b-fixed dl div{display:grid;gap:3px;padding-top:12px;border-top:1px solid var(--plate-meta)}
.b-fixed dd{color:var(--plate-ink)}
.b-disclose{font-size:14px}
.b-controls{display:grid;gap:18px;align-content:start}
.b-choices legend{margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--r-ctl);background:var(--chip-tray);--focus:var(--accent)}
.chips button{min-height:44px;padding:8px 14px;border:0;border-radius:calc(var(--r-ctl) - 2px);background:transparent;font:600 15px/1 var(--text);color:var(--chip-ink)}
.chips button[aria-pressed="true"]{background:var(--chip-on-bg);color:var(--chip-on-ink)}
.chips button:disabled{opacity:.75}
.b-caption{display:grid;gap:4px}
.b-caption h3{font:650 24px/1.1 var(--display);color:var(--plate-ink)}
.mini{padding:8px 12px;background:var(--groove);border-radius:var(--r-ctl)}
.mini p{margin-bottom:6px;font:11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.mini .bars{height:36px}
.b-cues{display:grid;gap:8px}
.b-cues li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:9px 12px;border:1px solid var(--plate-meta);border-radius:var(--r-ctl)}
.b-cues .t{grid-row:span 2;font:14px/1.4 var(--mono);color:var(--plate-h)}
.b-cues h4{font:600 16px/1.25 var(--text);color:var(--plate-ink)}
.b-cues p{font-size:15px}
.b-focus{display:grid;gap:8px}
.b-focus select{min-height:44px;padding:8px 12px;border:1px solid var(--field-edge);border-radius:var(--r-ctl);background:var(--field-bg);color:var(--field-ink);font:15.5px var(--text)}
.b-focus select:disabled{opacity:.75}
.b-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding-top:14px;border-top:1px solid var(--plate-meta)}
.b-status{flex:1 1 240px;font-size:14.5px}
.b-download{min-height:44px;padding:11px 16px;border:1px solid var(--btn-bg);border-radius:var(--r-ctl);background:var(--btn-bg);color:var(--btn-ink);font:600 15px/1 var(--text)}
.b-download:disabled{opacity:.75}
.no-script{font-size:14px}
.availability{display:inline-flex;gap:10px;align-items:center;justify-self:start;padding:8px 12px;border:1px solid var(--plate-meta);border-radius:var(--r-ctl);font:600 15px/1.2 var(--text);color:var(--plate-ink)}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--plate-meta)}
/* Footer */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;font-size:14px;color:var(--meta);border-top:1px solid var(--divider)}
.foot .foot-brand{color:var(--ink)}
.foot a{color:var(--accent);text-underline-offset:4px}
@media (max-width:600px){
 .tray{padding:10px}
 .pieces{grid-template-columns:1fr;grid-template-rows:5fr 6fr 4fr;height:360px;gap:6px}
 .pc{min-height:0;padding:10px 12px 12px}.pc strong{font-size:36px}
 .p0 .art{width:30%;right:-4%;bottom:-56%}.p1 .art{width:20%;border-width:10px;top:14%}.p2 .art{left:auto;right:0;width:40%;box-shadow:0 14px 0 var(--art2b)}
 .lane{grid-template-columns:50px 1fr;height:36px}.lane>span{font-size:9.5px}.bars{gap:1px}
}
/* Template A — Studio: the live layout, de-toyed. No colours here; see pal-*.css. */
.t-studio{--r-tray:14px;--r-pc:9px;--r-plate:10px;--r-ctl:8px;--pc-h:190px}
.st-top{display:flex;align-items:center;gap:20px;max-width:1280px;margin:0 auto;padding:18px clamp(16px,4vw,48px)}
.st-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:10px;background:var(--tray);border:1px solid var(--edge)}
.st-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;border-radius:7px;text-decoration:none;font:500 14.5px/1 var(--text);color:var(--ink)}
.st-nav a:hover{background:var(--ground-hi)}
.st-main{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 40px}
.st-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:36px 0 44px}
.st-copy .eye{margin-bottom:14px}
.st-copy h1{font:650 clamp(40px,4.5vw,64px)/1.02 var(--display);letter-spacing:-.03em;margin-bottom:18px}
.st-lede{font-size:18px;color:var(--soft);max-width:44ch;margin-bottom:24px}
.st-note{margin-top:16px;font:13px/1.4 var(--mono);color:var(--meta)}
.st-plates{display:grid;grid-template-columns:5fr 6fr 4fr;gap:14px}
.st-plate{position:relative;padding:18px 18px 18px 56px}
.st-plate .mark{position:absolute;left:18px;top:20px}
.st-plate h3{font:650 19px/1.2 var(--display);margin:5px 0}
.st-after{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-top:40px}
.st-after h2{font:650 clamp(26px,2.8vw,38px)/1.08 var(--display);letter-spacing:-.02em}
.st-section{padding-top:72px;scroll-margin-top:12px}
.st-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 44px;align-items:end;margin-bottom:24px}
.st-head .eye{margin-bottom:10px}
.st-head h2{font:650 clamp(28px,3.2vw,44px)/1.05 var(--display);letter-spacing:-.025em}
.st-head>p{color:var(--soft);max-width:52ch}
.st-panel{display:grid;gap:16px;align-content:start;padding:20px}
.st-panel h3{font:650 21px/1.15 var(--display)}
.st-panel>a{display:inline-flex;align-items:center;justify-self:start;min-height:44px;font-weight:600}
.st-bench{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
.st-workflow{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.st-review{grid-column:1/-1;color:var(--soft);max-width:72ch}
.st-foot{max-width:1280px;margin:36px auto 0;padding:20px clamp(16px,4vw,48px) 28px}
@media (max-width:1000px){.st-hero,.st-bench,.st-head,.st-status{grid-template-columns:1fr}.st-workflow{grid-template-columns:1fr}}
@media (max-width:760px){.st-top{flex-wrap:wrap;row-gap:10px}.st-nav{width:100%;margin-left:0;justify-content:space-between}}
@media (max-width:600px){.st-nav a{padding:8px 7px;font-size:13.5px}.st-plates{grid-template-columns:1fr}.st-section{padding-top:52px}.st-panel{padding:16px}.st-hero{padding-top:20px}}
/* Release additions (STUDIO-EMBER-RELEASE-01): the 404 page's classes and the page-level
   no-JavaScript note, styled only with Ember Tide tokens. */
.nojs{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 24px;font:13px/1.4 var(--mono);color:var(--meta)}
.not-found{max-width:640px;margin:0 auto;padding:clamp(48px,12vh,120px) clamp(16px,4vw,48px);display:grid;gap:18px;justify-items:start}
.wordmark{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:650 21px/1 var(--display);letter-spacing:-.015em;color:var(--ink)}
.not-found .eyebrow{font:12.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.not-found h1{font:650 clamp(32px,4vw,48px)/1.05 var(--display);letter-spacing:-.025em}
.not-found p{color:var(--soft)}
.button{display:inline-flex;gap:10px;align-items:center;min-height:46px;padding:13px 20px;border-radius:var(--r-ctl);text-decoration:none;font:600 16px/1 var(--text)}
.button-dark{background:var(--act);color:var(--act-ink)}
.button-dark:hover{background:var(--ink);color:var(--ground)}