/* Taller de fluidos: FAI kit tokens; the tank is the focal point. */
:root{--s-surface-2:#241d14;--s-btn:#2a2218;--s-btn-hi:#342a1e;--s-warn:#3a2a14;--s-warn-ink:#FFD48A;--s-r:10px}
*{box-sizing:border-box}
html{background:var(--fai-bg);color:var(--fai-ink);font:15px/1.5 var(--fai-body);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fai-bg)}
main,.foot{max-width:1500px;margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left))}
h1,h2,p,dl,dd{margin:0}
h1,h2{font-family:var(--fai-display);font-weight:700;line-height:1.05;letter-spacing:.005em}
h1{font-size:clamp(22px,2vw,30px);text-transform:uppercase}h1 em{font-style:normal;color:var(--fai-accent)}
h2{font-size:22px;text-transform:uppercase}
a{color:var(--fai-ink);text-underline-offset:4px;text-decoration-color:var(--fai-accent)}a:hover{color:var(--fai-accent)}
button,input,select{font:inherit;color:inherit}
button,select{min-height:44px;cursor:pointer}
button{border:1px solid var(--fai-line);border-radius:8px;background:var(--s-btn);padding:8px 12px;font-size:13px;font-weight:600;color:var(--fai-ink);transition:background-color .15s,border-color .15s}
button:hover{background:var(--s-btn-hi);border-color:#5a4a36}button:active{background:#3d3122}
button.primary{background:var(--fai-accent);color:var(--fai-accent-ink);border-color:var(--fai-accent)}button.primary:hover{background:#ffa463}
button:disabled{opacity:.42;cursor:not-allowed}
:focus-visible{outline:2px solid var(--fai-focus);outline-offset:3px}[hidden]{display:none!important}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:16px;align-items:start;padding-top:14px}
.instrument{min-width:0;border:1px solid var(--fai-line);border-radius:var(--s-r);overflow:hidden;background:var(--fai-surface)}
.instrument-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 10px}
#run-status{font:600 12px var(--fai-mono);white-space:nowrap;color:var(--fai-ink-2);display:inline-flex;align-items:center;gap:7px}
#run-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fai-accent);box-shadow:0 0 8px var(--fai-accent)}
.transport{display:flex;gap:8px;padding:0 16px}.transport #relaunch{font-size:16px;flex:1;letter-spacing:.01em}.transport #toggle-pause{min-width:110px}
.launch-help{padding:5px 16px 8px;font-size:12px;color:var(--fai-ink-2)}
.notice{min-height:44px;display:flex;align-items:center;font-size:13px;padding:8px 16px;background:#18130d;border-top:1px solid var(--fai-line);color:var(--fai-ink-2)}
.notice.full,.notice.blocked{background:var(--s-warn);color:var(--s-warn-ink);font-weight:600;box-shadow:inset 3px 0 var(--fai-accent)}
.tank{background:#0b1012}
canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none;background:#0b1114}
canvas:focus-visible{outline-offset:-3px}
.tank-help{padding:8px 16px;font-size:12px;color:var(--fai-ink-2);border-top:1px solid var(--fai-line)}
.desk{min-width:0;border:1px solid var(--fai-line);border-radius:var(--s-r);padding:14px;background:var(--fai-surface)}
label{font-size:13px;color:var(--fai-ink-2)}
select,input[type=number]{display:block;width:100%;min-width:0;border:1px solid var(--fai-line);background:#120e09;border-radius:6px;padding:7px 8px;font-size:14px;color:var(--fai-ink)}
select option{background:#1c1710;color:var(--fai-ink)}
.source-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.source-line label{display:block}.source-line button{padding-inline:12px}
#toggle-emitter[aria-pressed=false]{border-color:var(--fai-accent);color:var(--fai-accent)}
.sliders{display:grid;gap:2px;margin-top:12px}
.label-line{display:flex;align-items:center;justify-content:space-between;gap:4px}.label-line output{font:12px var(--fai-mono);white-space:nowrap;color:var(--fai-accent)}
input[type=range]{display:block;width:100%;height:44px;margin:0;accent-color:var(--fai-accent);cursor:pointer;background:transparent}
.build-controls{border-top:1px solid var(--fai-line);margin-top:10px;padding-top:14px}
.build-buttons{display:flex;gap:8px}.build-buttons button{flex:1}
.selection-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 2px}.selection-heading strong{font:600 12px var(--fai-mono);color:var(--fai-ink)}.selection-heading button{font-size:12px}
.rotation{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:8px;align-items:center}.rotation button{padding:5px;font-family:var(--fai-mono)}
.help{font-size:12px;line-height:1.45;color:var(--fai-ink-2);margin-top:4px}
.durability{margin-top:8px}progress{display:block;width:100%;height:6px;accent-color:var(--fai-focus);margin-top:5px}
.advanced{margin-top:16px;border-block:1px solid var(--fai-line)}
summary{cursor:pointer;min-height:44px;padding:12px 4px;font:600 14px var(--fai-mono);display:flex;align-items:center;gap:10px;list-style-position:inside}
summary span{font-weight:400;font-size:12px;color:var(--fai-ink-2)}
summary:hover{color:var(--fai-accent)}
.advanced-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:24px;padding:18px 0}
fieldset{border:0;padding:0;margin:0;min-width:0}legend{font:600 13px var(--fai-mono);margin-bottom:10px;color:var(--fai-ink)}
.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 8px}.wide{width:100%;margin:6px 0 12px}
.check{display:flex;gap:10px;align-items:center;min-height:44px}input[type=checkbox],input[type=radio]{accent-color:var(--fai-accent)}
.tools{margin-top:16px}.tools label{display:inline-flex;align-items:center;gap:5px;min-height:44px;margin-right:8px;cursor:pointer;color:var(--fai-ink)}
.inventory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0;font-size:12px;color:var(--fai-ink-2)}.inventory strong{display:block;font:500 20px var(--fai-mono);color:var(--fai-ink)}
.readings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.readings dt{font-size:11px;color:var(--fai-ink-2)}.readings dd{font:13px var(--fai-mono)}
.row-buttons{display:flex;flex-wrap:wrap;gap:8px}
.scene-note{font-size:12px;color:var(--fai-ink-2);margin:12px 0}
.notes{max-width:920px;padding:16px 0;border-top:1px solid var(--fai-line)}.notes h2{font-size:18px}.notes p{font-size:13px;margin-top:10px;color:var(--fai-ink-2)}
.error{padding:14px;color:#ffb4a3;background:#3a1610}
.skip{position:fixed;left:10px;top:-100px;background:var(--fai-surface);color:var(--fai-ink);padding:12px;z-index:60}.skip:focus{top:60px}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-block:16px 28px;font:12px var(--fai-mono);color:var(--fai-ink-2)}
.foot a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 290px;gap:12px}.advanced-grid{grid-template-columns:1fr 1fr}.advanced-grid>section{grid-column:1/-1}}
@media(max-width:700px){
main,.foot{padding-inline:10px}
.workspace{grid-template-columns:1fr;gap:8px;padding-top:8px}
.instrument-heading{padding:7px 10px 6px}h1{font-size:15px;max-width:230px;line-height:1.1}#run-status{font-size:11px}
.transport{padding:0 10px}.transport #relaunch{font-size:15px}.transport #toggle-pause{min-width:96px}
.launch-help{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notice{font-size:12px;padding:5px 10px;margin-top:6px;line-height:1.3}
.tank-help{font-size:11px;padding:5px 10px}
.desk{padding:8px 10px}.source-line{grid-template-columns:minmax(0,1fr) 125px}.source-line>div{display:flex;gap:8px;align-items:center}.source-line label{font-size:12px}.source-line select{font-size:14px}
.sliders{grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:4px}.label-line{flex-wrap:wrap;gap:0 4px}.label-line label{font-size:12px}.label-line output{font-size:11px}
.build-controls{margin-top:2px;padding-top:6px}.build-buttons button{font-size:13px}.selection-heading{margin-top:2px;margin-bottom:0}
#rotation-help{display:none}
.durability{margin-top:0;display:flex;align-items:center;gap:8px}.durability .help{margin:0;font-size:11px}.durability progress{width:60px;margin:0}.help{font-size:11px}
.advanced{margin-top:8px}summary{font-size:12px;flex-wrap:wrap;gap:2px 8px}.advanced-grid{grid-template-columns:1fr;gap:24px}.advanced-grid>section{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){#run-status::before{background:CanvasText;box-shadow:none}}