@charset "UTF-8";
/* TuningFork public site: claude-05 Desk, Tidepool personality (TIDEPOOL-STATIC-RELEASE-01).
   Adapted from apps/site/experiments/brand-directions/claude-05/{base,desk}.css at e3fee14 (P3
   fix 814759f included). Tidepool is the only palette: its tokens are fixed on :root and no
   palette switching ships. Desk layout, type and components are kept; study-only views are not. */
:root{
 /* Tidepool (Petrol & Sand, pushed): inverted two-tone. Teal surfaces carry sand type and sand
    surfaces carry teal type; aqua marks labels, lanes and second lines; orange only on the action
    and the reveal. */
 --ground:#12313a;--ground-hi:#19414c;--tray:#0c242b;--groove:#091d23;--ink:#eadfc8;--soft:#bcd4d1;
 --piece:#0b2229;--piece-ink:#eadfc8;--piece-soft:#8fc9c3;--edge:#05161b;--lift:rgba(0,0,0,.45);
 --a:#6fd1c9;--b:#eadfc8;--c:#245562;--lane:#6fd1c9;--lane2:#f08a4b;--act:#f08a4b;--act-ink:#12313a;--act-t:#6fd1c9;
 --plate:#eadfc8;--focus:#6fd1c9;--hover:rgba(230,255,250,.08);
 --tex:linear-gradient(rgba(230,255,250,.025) 1px,transparent 1px) 0 0/100% 6px,linear-gradient(90deg,rgba(230,255,250,.02) 1px,transparent 1px) 0 0/6px 100%;
 --h1:#eadfc8;--h1b:#6fd1c9;--h2:#eadfc8;--h2b:#6fd1c9;--eye:#6fd1c9;--tc:#6fd1c9;--body:#bcd4d1;--meta:#9cc5c1;--lane-label:#8fc9c3;
 --art1:#f08a4b;--art2b:#eadfc8;--pc-edge:#2a6470;--lane-v:#eadfc8;--lane-a:#f08a4b;--lane-m:#6fd1c9;
 --plate-ink:#12313a;--plate-body:#33504d;--plate-meta:#3b5856;--plate-h:#0d4a52;--plate-link:#9a3f12;--plate-edge:#05161b;--divider:#6b8c88;
 --sel-bg:#12313a;--sel-ink:#eadfc8;--btn-bg:#12313a;--btn-ink:#eadfc8;--btn-edge:#12313a;
 --chip-tray:#0c242b;--chip-ink:#bcd4d1;--chip-on-bg:#6fd1c9;--chip-on-ink:#0b2229;
 --nav-bg:#0c242b;--nav-ink:#eadfc8;--field-bg:#eadfc8;--field-ink:#12313a;--field-edge:#05161b;
 --cta-bg:#f08a4b;--cta-ink:#12313a;--link:#6fd1c9;--foot:#9cc5c1;--foot-mark:#eadfc8;--logo-dot:#f08a4b;
 --display:"Arial Rounded MT Bold","Segoe UI Black","Trebuchet MS",sans-serif;--mono:Consolas,"Cascadia Mono",monospace;--text:"Segoe UI",system-ui,sans-serif;
 color-scheme:dark}
/* Foundation (claude-05 base.css, without the study review strip and theme cards). */
*,*::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:var(--tex),radial-gradient(circle at 15% 0,var(--ground-hi),transparent 60%),var(--ground);color:var(--ink);font:17px/1.5 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,dl,dd,figure,fieldset{margin:0}
fieldset{border:0;padding:0;min-width:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--ground);padding:14px 16px;border-radius:8px;text-decoration:none;font:600 15px/1.2 var(--text)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
/* The artwork is static. Reduced-motion preference still removes smooth scrolling and transitions. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.h0{height:2px}.h1{height:10%}.h2{height:20%}.h3{height:30%}.h4{height:40%}.h5{height:52%}.h6{height:63%}.h7{height:74%}.h8{height:86%}.h9{height:100%}
/* Header */
.dk-top{display:flex;align-items:center;gap:20px;max-width:1360px;margin:0 auto;padding:20px clamp(16px,4vw,48px)}
.dk-logo{display:flex;align-items:center;gap:9px;font:28px/1 var(--display);text-decoration:none;letter-spacing:-.01em;min-height:44px}
.dk-logo i{width:15px;height:15px;border-radius:50%;background:var(--logo-dot);box-shadow:0 2px 0 var(--lift)}
.dk-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:16px;background:var(--nav-bg)}
.dk-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:12px;text-decoration:none;font:15.5px/1 var(--display);color:var(--nav-ink)}
.dk-nav a:hover{background:var(--hover)}
main{max-width:1360px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 48px}
.dk-eye{font:14px/1.3 var(--mono);letter-spacing:.06em;color:var(--eye);margin-bottom:12px}
/* Display type second lines (role hooks). */
.h1b{color:var(--h1b)}.h2b{color:var(--h2b)}
/* Tray (illustrative artwork, not audio data) */
.dk-tray{position:relative;padding:18px;border-radius:26px;background:var(--tray);box-shadow:inset 0 3px 10px var(--lift)}
.dk-tc{position:relative;display:grid;grid-template-columns:5fr 6fr 4fr;gap:10px;padding:0 6px 10px;font:12.5px/1 var(--mono);color:var(--tc);background:repeating-linear-gradient(90deg,var(--tc) 0 1px,transparent 1px calc(100%/15)) 0 100%/100% 5px no-repeat;margin-bottom:10px}
.dk-tc span:last-child{position:absolute;right:6px;top:0}
.dk-pieces{display:grid;grid-template-columns:5fr 6fr 4fr;gap:10px}
.dk-pc{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:190px;padding:14px 16px 20px;background:var(--piece);color:var(--piece-ink);border:2px solid var(--pc-edge);border-radius:18px;box-shadow:0 5px 0 var(--lift),0 14px 24px -16px var(--lift);container-type:inline-size}
.dk-pc small{position:relative;z-index:1;font:12.5px/1 var(--mono);color:var(--piece-soft)}
.dk-pc strong{position:relative;z-index:1;font:clamp(26px,27cqi,68px)/.95 var(--display);letter-spacing:-.03em;white-space:nowrap;padding-bottom:4px}
.dk-art{position:absolute}
.p0 .dk-art{right:-18%;bottom:-38%;width:70%;aspect-ratio:1;border-radius:50%;background:var(--a);opacity:.9}
.p1 .dk-art{right:12%;top:16%;width:40%;aspect-ratio:1;border-radius:50%;border:clamp(14px,1.8vw,26px) solid var(--art1)}
.p2 .dk-art{left:0;right:0;top:30%;height:12%;background:var(--c);box-shadow:0 calc(20px + 16px * var(--strength,.5)) 0 var(--art2b)}
.dk-groove{margin-top:14px;border-radius:16px;background:var(--groove);box-shadow:inset 0 2px 6px var(--lift);padding:6px 10px}
.dk-lane{display:grid;grid-template-columns:62px 1fr;align-items:end;height:46px}
.dk-lane>span{align-self:center;font:11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lane-label)}
.dk-bars{display:grid;grid-template-columns:repeat(60,1fr);gap:2px;align-items:end;height:100%;padding:5px 0;transform-origin:bottom;transform:scaleY(calc(.55 + .9 * var(--strength,.5)))}
.dk-bars i{display:block;background:var(--lane);border-radius:2px}
.l-voice .dk-bars i{background:var(--lane-v)}.l-accent .dk-bars i{background:var(--lane-a)}.l-music .dk-bars i{background:var(--lane-m)}
/* Landing */
.dk-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center;padding:28px 0 40px}
.dk-copy h1{font:clamp(44px,5.4vw,80px)/.98 var(--display);letter-spacing:-.03em;margin-bottom:20px;color:var(--h1)}
.dk-lede{font-size:19px;color:var(--body);max-width:44ch;margin-bottom:26px}
.dk-cta{display:inline-flex;gap:10px;align-items:center;min-height:48px;padding:15px 24px;background:var(--cta-bg);color:var(--cta-ink);border-radius:16px;text-decoration:none;font:19px/1 var(--display);box-shadow:0 4px 0 var(--lift)}
.dk-cta:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--lift)}
.dk-note{margin-top:16px;font:14px/1.4 var(--mono);color:var(--meta)}
.dk-plates{display:grid;grid-template-columns:5fr 6fr 4fr;gap:18px}
.dk-plate{position:relative;padding:20px 20px 20px 62px;background:var(--plate);color:var(--plate-ink);border:2px solid var(--plate-edge);border-radius:20px;box-shadow:0 4px 0 var(--lift)}
.dk-dot{position:absolute;left:20px;top:24px;width:26px;height:26px;border-radius:50%;background:var(--a)}
.q1 .dk-dot{background:transparent;border:7px solid var(--art1)}.q2 .dk-dot{border-radius:6px;height:10px;top:32px;background:var(--art2b);box-shadow:0 -10px 0 var(--c)}
.dk-k{font:13px/1.3 var(--mono);color:var(--plate-meta)}
.dk-plate h3{font:22px/1.15 var(--display);margin:6px 0;color:var(--plate-h)}
.dk-plate p:last-child{color:var(--plate-body)}
.dk-after{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;margin-top:42px}
.dk-after h2{font:clamp(30px,3.6vw,50px)/1.05 var(--display);letter-spacing:-.02em;color:var(--h2)}
.dk-after a,.dk-link{display:inline-flex;align-items:center;min-height:44px;color:var(--link);font:17px/1 var(--display);text-underline-offset:4px}
/* Sections and sand plates */
.dk-section{padding-top:72px;scroll-margin-top:12px}
.dk-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 44px;align-items:end;margin-bottom:26px}
.dk-section-head h2{font:clamp(32px,4vw,56px)/1.02 var(--display);letter-spacing:-.025em;color:var(--h2)}
.dk-section-head>p{color:var(--body);max-width:52ch}
.dk-panel{display:grid;gap:18px;align-content:start;padding:22px;background:var(--plate);color:var(--plate-ink);border:2px solid var(--plate-edge);border-radius:22px;box-shadow:0 5px 0 var(--lift)}
.dk-panel h3{font:24px/1.1 var(--display);color:var(--plate-h)}
.dk-panel p{color:var(--plate-body)}
/* Tidepool's sand plates take a deep-teal focus ring; the aqua ring stays on teal surfaces. */
:is(.dk-panel,.dk-plate){--focus:#0d4a52}
.dk-panel :focus-visible{outline-color:var(--focus)}
.dk-panel a{color:var(--plate-link);text-underline-offset:4px}
.dk-panel>a{display:inline-flex;align-items:center;justify-self:start;min-height:44px;font:17px/1 var(--display)}
/* Sample brief (the real on-page example; markup hooks are shared with main.js) */
.dk-bench{display:grid;grid-template-columns:330px minmax(0,1fr);gap:26px;align-items:start}
.dk-tag{justify-self:start;padding:4px 10px;border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);font:12px/1.4 var(--mono);letter-spacing:.06em}
.dk-rule{display:grid;gap:4px;padding-top:14px;border-top:2px dashed var(--divider)}
.dk-rule span{font:13px/1.3 var(--mono);color:var(--plate-meta);text-transform:uppercase;letter-spacing:.06em}
.dk-rule p{color:var(--plate-ink)}
.dk-disclosure{font-size:15px}
.dk-field-label,.direction-controls legend{font:13px/1.3 var(--mono);color:var(--plate-meta);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.kinds{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:var(--chip-tray)}
.kinds button{min-height:44px;padding:9px 14px;border:0;border-radius:10px;background:transparent;font:15px/1 var(--display);color:var(--chip-ink)}
.kinds button[aria-pressed="true"]{background:var(--chip-on-bg);color:var(--chip-on-ink);box-shadow:0 2px 0 var(--lift)}
.kinds button:disabled{opacity:.75}
.kinds :focus-visible{outline-color:#6fd1c9}
.direction-caption{display:grid;gap:4px}
.direction-caption h3{font:28px/1.05 var(--display)}
.dk-mini{border-radius:14px;background:var(--groove);box-shadow:inset 0 2px 6px var(--lift);padding:8px 12px}
.dk-mini p{font:11.5px/1 var(--mono);letter-spacing:.08em;color:var(--lane-label);margin-bottom:6px}
.dk-mini .dk-bars{height:40px;grid-template-columns:repeat(30,1fr)}
.cue-list{display:grid;gap:8px;padding:0;list-style:none}
.cue-list li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:10px 14px;border:2px solid var(--plate-edge);border-radius:14px}
.cue-list li>span{grid-row:span 2;font:15px/1.4 var(--mono);color:var(--plate-h)}
.cue-list h4{font:17px/1.2 var(--display);color:var(--plate-ink)}
.cue-list p{font-size:15.5px}
.test-focus{display:grid;gap:8px}
.test-focus label{font:13px/1.3 var(--mono);color:var(--plate-meta);text-transform:uppercase;letter-spacing:.06em}
.test-focus select{min-height:44px;padding:9px 12px;border:2px solid var(--field-edge);border-radius:12px;background:var(--ground);color:var(--ink);font:16px var(--text)}
/* Ground-ink correction (DESK-254-P3): a field painted with the ground takes ground ink, also when disabled. */
.test-focus select:disabled{opacity:.75}
.example-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding-top:16px;border-top:2px dashed var(--divider)}
.example-status{color:var(--plate-body);font-size:15px;flex:1 1 260px}
.download-button{min-height:44px;padding:12px 18px;border-radius:12px;font:16px/1 var(--display);background:var(--btn-bg);color:var(--btn-ink);border:2px solid var(--btn-bg)}
.download-button:disabled{opacity:.75}
.no-script{font-size:15px}
/* Workflow, status and availability */
.dk-workflow{grid-template-columns:repeat(3,minmax(0,1fr))}
.dk-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.dk-marker{justify-self:start;padding:4px 10px;border-radius:999px;font:12px/1.4 var(--mono);letter-spacing:.06em;background:var(--btn-bg);color:var(--btn-ink)}
.dk-marker-outline{background:transparent;color:var(--plate-h);border:2px solid var(--plate-h)}
.dk-review-note{grid-column:1/-1;color:var(--body);max-width:72ch}
.availability{display:flex;gap:10px;align-items:center;justify-self:start;padding:10px 14px;border:2px dashed var(--plate-meta);border-radius:14px;font:16px/1.2 var(--display);color:var(--plate-ink)}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--plate-meta)}
/* Footer */
.dk-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;max-width:1360px;margin:24px auto 0;padding:22px clamp(16px,4vw,48px) 30px;font-size:14px;color:var(--foot);border-top:2px dashed var(--divider)}
.dk-foot p:first-child{color:var(--foot-mark)}
.dk-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);text-underline-offset:4px}
.nojs{margin:0;padding:10px 16px;background:var(--tray);color:var(--ink);font:14px/1.4 var(--text)}
/* 404 page (public/404.html shares this stylesheet). */
.not-found{display:grid;gap:18px;justify-items:start;max-width:720px;padding:clamp(48px,10vw,120px) clamp(16px,4vw,48px)}
.wordmark{font:28px/1 var(--display);text-decoration:none}
.eyebrow{font:14px/1.3 var(--mono);letter-spacing:.06em;color:var(--eye)}
.not-found h1{font:clamp(40px,6vw,72px)/1 var(--display);letter-spacing:-.03em}
.not-found p{color:var(--body)}
.button{display:inline-flex;gap:10px;align-items:center;min-height:48px;padding:15px 24px;border-radius:16px;text-decoration:none;font:19px/1 var(--display);box-shadow:0 4px 0 var(--lift)}
.button-dark{background:var(--cta-bg);color:var(--cta-ink)}
@media (max-width:1100px){.dk-top{flex-wrap:wrap;row-gap:12px}.dk-nav{order:3;width:100%;margin-left:0;justify-content:space-between}}
@media (max-width:1000px){.dk-hero,.dk-bench,.dk-section-head,.dk-status{grid-template-columns:1fr}.dk-workflow{grid-template-columns:1fr}}
@media (max-width:600px){
 .dk-nav a{padding:8px 9px;font-size:14px}
 .dk-tray{padding:10px;border-radius:18px}
 .dk-pieces{grid-template-columns:1fr;grid-template-rows:5fr 6fr 4fr;height:400px;gap:8px}.dk-pc{min-height:0;padding:10px 14px 14px;border-radius:14px}.dk-pc strong{font-size:38px}
 .p0 .dk-art{width:34%;right:-4%;bottom:-60%}.p1 .dk-art{width:22%;border-width:12px;top:12%}.p2 .dk-art{left:auto;right:0;width:40%;box-shadow:0 calc(12px + 8px * var(--strength,.5)) 0 var(--art2b)}
 .dk-lane{grid-template-columns:50px 1fr;height:40px}.dk-lane>span{font-size:9.5px}.dk-bars{gap:1px}
 .dk-plates{grid-template-columns:1fr}
 .dk-section{padding-top:52px}
 .dk-panel{padding:18px}
}