:root{
  --cream:#f7f1e7;
  --paper:#fffdf8;
  --navy:#1b3a63;
  --ink:#10233c;
  --muted:#637285;
  --line:rgba(27,58,99,.16);
  --orange:#ff6b35;
  --orange-text:#c9451a;
  --blue:#3d7fca;
  --blue-soft:#84b7ec;
  --green:#1e7e54;
  --green-bg:#e3f5ec;
  --red:#c0392b;
  --red-bg:#fbe7e4;
  --amber:#b06a00;
  --amber-bg:#fff4e0;
  --flow-red:#e33d32;
  --flow-orange:#f28a16;
  --flow-darkblue:#1769aa;
  --flow-lightblue:#52b9e9;
  --shadow:0 12px 38px rgba(27,58,99,.12);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--cream);color:var(--ink);font:16px/1.48 Calibri,"Segoe UI",system-ui,Arial,sans-serif}
body.font-large{font-size:17.5px}
button,a{font:inherit}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid rgba(255,107,53,.5);outline-offset:3px}
[hidden]{display:none!important}
.eyebrow{margin:0 0 5px;color:var(--orange-text);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3,h4{font-family:"Trebuchet MS",Calibri,Arial,sans-serif;color:var(--navy)}

.topbar{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:62px;
  padding:7px 14px;
  border-bottom:4px solid var(--orange);
  background:var(--paper);
  box-shadow:0 3px 12px rgba(27,58,99,.08);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--navy);color:#fff;font:900 23px/1 "Trebuchet MS",sans-serif}
.brand strong,.brand small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand strong{color:var(--navy);font-family:"Trebuchet MS",sans-serif;font-size:17px}
.brand small{color:var(--muted);font-size:11px}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.tool-button,.rate-control button{
  min-height:36px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--navy);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.tool-button{padding:6px 10px}
.tool-button:disabled{opacity:.45;cursor:not-allowed}
.exit-button{border-color:var(--orange);color:var(--orange-text)}
.rate-control{display:flex;align-items:center;gap:4px;padding:3px 5px;border:1px solid var(--line);border-radius:10px;background:var(--cream)}
.rate-control button{width:28px;min-height:28px;padding:0;background:var(--paper)}
.rate-control output{min-width:43px;color:var(--navy);font-size:11px;font-weight:900;text-align:center}

.app-shell{height:calc(100dvh - 62px);min-height:0}
.home-view,.dossier-view{width:min(1260px,calc(100% - 24px));height:100%;margin:auto}

.home-view{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:9px;padding:12px 0 8px}
.home-intro{display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;gap:18px}
.home-intro h1{max-width:940px;margin:0;font-size:clamp(27px,4vw,49px);line-height:1.02;letter-spacing:-.025em}
.home-intro h1 span{color:var(--orange-text)}
.home-intro>div>p:last-child{max-width:820px;margin:9px 0 0;color:var(--muted);font-size:15px}
.progress-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:17px;background:var(--paper);box-shadow:0 5px 18px rgba(27,58,99,.08)}
.progress-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.3}
.progress-ring{display:grid;place-items:center;align-content:center;flex:0 0 66px;width:66px;height:66px;border:5px solid var(--blue-soft);border-top-color:var(--orange);border-radius:50%;color:var(--navy)}
.progress-ring strong{font:900 23px/1 "Trebuchet MS",sans-serif}.progress-ring span{font-size:8px;font-weight:900}

.flow-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.flow{display:flex;align-items:center;gap:5px;min-width:0;color:var(--muted);font-size:10px;white-space:nowrap}
.flow b{color:var(--ink)}
.flow i{display:block;flex:0 0 22px;height:5px;border-radius:999px}
.flow-red i{background:var(--flow-red)}.flow-orange i{background:var(--flow-orange)}.flow-darkblue i{background:var(--flow-darkblue)}.flow-lightblue i{background:var(--flow-lightblue)}

.family-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.family-tab{min-height:38px;padding:6px 9px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--navy);font-size:11px;font-weight:900;cursor:pointer}
.family-tab[aria-selected="true"]{border:2px solid var(--navy);background:#edf4fb}
.family-tab small{display:block;color:var(--muted);font-size:9px;font-weight:700}

.dossier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;min-height:0}
.dossier-card{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:0;padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--paper);box-shadow:0 5px 15px rgba(27,58,99,.06);color:inherit;text-align:left;cursor:pointer}
.dossier-card:hover{border-color:var(--blue);transform:translateY(-1px)}
.dossier-card.acquired{border:4px double var(--green)}
.dossier-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:13px;background:#eff5fb}
.dossier-icon img{width:44px;height:44px;object-fit:contain}
.dossier-card h2{margin:0;font-size:15px;line-height:1.12}
.dossier-card p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.25}
.card-state{align-self:start;padding:3px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:8px;font-weight:900;white-space:nowrap}
.acquired .card-state{border:3px double var(--green);color:var(--green);background:var(--green-bg)}
.home-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-size:10px}
.home-footer p{margin:0}.home-footer a{color:var(--navy);font-weight:900}

.dossier-view{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;padding:9px 0}
.dossier-rail,.screen-card{min-height:0;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow)}
.dossier-rail{display:flex;flex-direction:column;padding:15px;border-radius:18px}
.dossier-rail h2{margin:0 0 12px;font-size:19px;line-height:1.13}
.rail-progress{display:grid;gap:5px}
.rail-step{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:7px;min-height:34px;padding:4px 5px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:10px;font-weight:800;text-align:left;cursor:pointer}
.rail-step b{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--line);border-radius:7px;background:var(--cream);color:var(--navy)}
.rail-step.active{background:#edf4fb;color:var(--navy)}
.rail-step.active b{border-color:var(--navy);background:var(--navy);color:#fff}
.rail-context{margin-top:auto;padding:9px;border-left:4px solid var(--orange);border-radius:8px;background:#fff5ef;color:var(--muted);font-size:9px;line-height:1.35}
.rail-context b{display:block;color:var(--orange-text)}
.rail-home{margin-top:8px;min-height:36px;border:1px solid var(--line);border-radius:9px;background:var(--cream);color:var(--navy);font-size:10px;font-weight:900;cursor:pointer}

.screen-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:20px;padding:12px 14px 9px;overflow:hidden}
.screen-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:55px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.screen-heading h2{margin:0;font-size:clamp(22px,2.8vw,34px);line-height:1}
.screen-state{max-width:270px;color:var(--muted);font-size:10px;text-align:right}
.revision-chip{display:inline-block;padding:5px 8px;border:2px dotted var(--amber);border-radius:999px;color:#855100;background:var(--amber-bg);font-weight:900}
.screen-content{min-height:0;overflow:hidden;padding:10px 0}
.screen-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-height:44px;padding-top:7px;border-top:1px solid var(--line)}
.screen-nav button{min-height:38px;padding:7px 12px;border-radius:10px;font-weight:900;cursor:pointer}
.secondary-button{justify-self:start;border:1px solid var(--line);background:var(--cream);color:var(--navy)}
.primary-button{justify-self:end;border:1px solid var(--navy);background:var(--navy);color:#fff}
.screen-nav button:disabled{opacity:.42;cursor:not-allowed}
.screen-nav span{color:var(--muted);font-size:10px;font-weight:900}
.speech-warning{margin:0;color:var(--red);font-size:10px}

.recognition-layout,.function-layout,.connection-layout,.mechanism-layout,.location-layout{display:grid;height:100%;min-height:0;gap:10px}
.recognition-layout{grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr)}
.visual-gallery{display:grid;grid-template-columns:repeat(var(--visual-count,1),minmax(0,1fr));gap:8px;min-height:0}
.real-figure{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;margin:0;border:1px solid var(--line);border-radius:16px;background:#fbfaf6;overflow:hidden}
.real-figure img{width:100%;height:100%;min-height:0;object-fit:contain;padding:7px}
.real-figure figcaption{padding:5px 8px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;text-align:center}
.symbol-panel{display:flex;flex-direction:column;min-height:0;padding:12px;border:1px solid var(--line);border-radius:16px;background:#f6f9fc}
.symbol-panel h3{margin:0 0 5px;font-size:16px}.symbol-panel>p{margin:0 0 8px;color:var(--muted);font-size:10px}
.symbol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-height:0;overflow:auto}
.symbol-card{display:grid;place-items:center;align-content:center;gap:4px;min-height:72px;padding:6px;border:1px solid var(--line);border-radius:11px;background:var(--paper);text-align:center}
.symbol-card img{width:64px;height:45px;object-fit:contain}.symbol-card b{color:var(--navy);font-size:9px}
.symbol-pending{border:3px dotted var(--amber);background:var(--amber-bg);color:#704500;font-size:9px;font-weight:900}
.source-note{margin-top:auto;padding-top:7px;color:var(--muted);font-size:8px;line-height:1.25}

.function-layout{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}
.professional-card,.key-card,.ports-card,.text-card,.mount-card,.question-card{border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.professional-card{display:grid;align-content:center;padding:18px;border-left:7px solid var(--navy)}
.professional-card span{color:var(--orange-text);font-size:10px;font-weight:900;letter-spacing:.09em}.professional-card h3{margin:6px 0 10px;font-size:22px}.professional-card p{margin:0;font-size:15px;line-height:1.5}
.key-card{display:grid;align-content:center;padding:15px;border:5px double var(--green);background:var(--green-bg)}
.key-card h3{margin:0 0 7px;color:var(--green);font-size:17px}.key-card ul{margin:0;padding-left:18px}.key-card li{margin:5px 0;font-size:12px}

.connection-layout{grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr)}
.ports-card{display:grid;align-content:center;gap:12px;padding:17px}
.port-flow{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);align-items:center;gap:9px}
.port-box{min-height:92px;padding:12px;border:3px solid var(--flow-color);border-radius:14px;background:#fff;text-align:left}
.port-box b{display:block;margin-bottom:5px;color:var(--ink);font-size:13px}.port-box span{color:var(--muted);font-size:11px;line-height:1.35}
.flow-arrow{display:grid;place-items:center;color:var(--flow-color);font-size:30px;font-weight:900}
.connection-extra{padding:10px;border:2px dotted var(--blue);border-radius:11px;background:#eff7ff;color:#244f7b;font-size:10px}
.text-card{padding:16px;background:#f7fafc}.text-card h3{margin:0 0 8px;font-size:18px}.text-card ul{margin:0;padding-left:18px}.text-card li{margin:7px 0;font-size:12px}
.no-through{display:grid;place-items:center;min-height:150px;padding:16px;border:3px dashed var(--blue);border-radius:16px;background:#eef7ff;text-align:center}.no-through b{color:var(--navy);font-size:20px}.no-through p{max-width:530px;margin:7px 0 0;color:var(--muted);font-size:12px}

.mechanism-layout{grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr)}
.mechanism-stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#f8fbfe,var(--paper))}
.mechanism-copy{display:grid;align-content:center;padding:14px;border-left:6px solid var(--orange);border-radius:14px;background:#fff5ef}
.mechanism-copy h3{margin:0 0 7px;font-size:18px}.mechanism-copy ol{margin:0;padding-left:19px}.mechanism-copy li{margin:7px 0;font-size:11px}.mechanism-copy p{margin:8px 0 0;color:var(--muted);font-size:9px}
.machine{position:relative;width:min(440px,90%);height:min(245px,82%);min-height:180px}
.compressor-deck{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:min(500px,92%);height:min(260px,88%)}
.mini-machine{position:relative;overflow:hidden;border:3px solid var(--navy);border-radius:14px;background:var(--paper)}
.mini-machine b{position:absolute;z-index:3;top:5px;left:7px;color:var(--navy);font-size:10px}
.mini-machine i{position:absolute;display:block}
.mini-piston{left:31%;bottom:12%;width:38%;height:37%;border:4px solid var(--navy);border-radius:7px;background:var(--blue-soft);animation:piston 2.4s ease-in-out infinite}
.mini-scroll{inset:24%;border:7px solid var(--orange);border-left-color:transparent;border-radius:50%;animation:orbit 2.2s linear infinite}.mini-scroll:after{content:"";position:absolute;inset:18%;border:6px solid var(--blue);border-right-color:transparent;border-radius:50%}
.mini-screw{right:14%;bottom:21%;left:14%;height:34%;border:4px solid var(--navy);border-radius:999px;background:repeating-linear-gradient(65deg,#9eb1c3 0 10px,#dbe5ed 10px 20px);background-size:45px 45px;animation:screw 1.7s linear infinite}
.mini-rotary{inset:25%;border:6px solid var(--navy);border-radius:50%}.mini-rotary:after{content:"";position:absolute;left:12%;top:20%;width:42%;height:42%;border-radius:50%;background:var(--orange);transform-origin:90% 70%;animation:orbit 2s linear infinite}
.machine .pipe{position:absolute;top:50%;width:24%;height:12px;border:3px solid var(--navy);background:var(--pipe-color,var(--flow-orange));transform:translateY(-50%)}
.machine .pipe.inlet{left:0;border-radius:999px 0 0 999px}.machine .pipe.outlet{right:0;border-radius:0 999px 999px 0}.machine .body{position:absolute;inset:15% 23%;overflow:hidden;border:5px solid var(--navy);border-radius:30px;background:var(--paper)}
.flow-dot{position:absolute;top:calc(50% - 5px);left:5%;width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px #fff;animation:flow-dot 3s linear infinite}
.flow-dot:nth-child(2){animation-delay:1s}.flow-dot:nth-child(3){animation-delay:2s}
@keyframes flow-dot{from{left:7%}to{left:90%}}
.piston-piece{position:absolute;left:31%;bottom:14%;width:38%;height:30%;border:4px solid var(--navy);border-radius:8px;background:var(--blue-soft);animation:piston 2.4s ease-in-out infinite}
@keyframes piston{0%,100%{transform:translateY(0)}50%{transform:translateY(-70%)}}
.scroll-piece{position:absolute;inset:23%;border:8px solid var(--orange);border-left-color:transparent;border-radius:50%;animation:orbit 2.2s linear infinite}.scroll-piece:after{content:"";position:absolute;inset:18%;border:7px solid var(--blue);border-right-color:transparent;border-radius:50%}
@keyframes orbit{to{transform:rotate(360deg)}}
.screw-piece{position:absolute;inset:31% 14%;border:4px solid var(--navy);border-radius:999px;background:repeating-linear-gradient(65deg,#9eb1c3 0 12px,#dbe5ed 12px 24px);background-size:55px 55px;animation:screw 1.7s linear infinite}
.screw-piece.second{transform:translateY(45%);animation-direction:reverse}
@keyframes screw{to{background-position:55px 0}}
.rotary-piece{position:absolute;inset:20%;border:7px solid var(--navy);border-radius:50%}.rotary-piece:after{content:"";position:absolute;left:12%;top:22%;width:42%;height:42%;border-radius:50%;background:var(--orange);transform-origin:90% 70%;animation:orbit 2s linear infinite}
.coil-piece{position:absolute;inset:20%;border:18px double var(--blue);border-radius:25px;background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(27,58,99,.15) 20px 23px)}
.air-arrow,.water-arrow{position:absolute;font-weight:900;animation:pulse 1.7s ease-in-out infinite}.air-arrow{top:10%;left:43%;color:var(--orange-text)}.water-arrow{bottom:9%;left:40%;color:var(--blue)}
@keyframes pulse{50%{transform:scale(1.16)}}
.needle{position:absolute;left:47%;top:20%;width:8%;height:50%;border-radius:8px;background:var(--navy);animation:needle 2.3s ease-in-out infinite}.seat{position:absolute;left:35%;bottom:20%;width:30%;height:12%;border:5px solid var(--orange);border-top:0}.spring{position:absolute;left:35%;top:10%;width:30%;height:18%;border:5px double var(--blue)}
@keyframes needle{0%,100%{transform:translateY(12%)}50%{transform:translateY(-12%)}}
.vessel{position:absolute;inset:8% 31%;overflow:hidden;border:6px solid var(--navy);border-radius:45% 45% 25% 25%;background:var(--paper)}
.liquid-level{position:absolute;right:0;bottom:0;left:0;height:48%;background:rgba(61,127,202,.36);animation:level 4s ease-in-out infinite}.vapor-cloud{position:absolute;top:18%;left:25%;width:50%;height:18%;border-radius:50%;background:rgba(82,185,233,.35)}
@keyframes level{50%{height:58%}}
.media-bed{position:absolute;inset:18%;border:5px solid var(--navy);border-radius:20px;background:repeating-linear-gradient(45deg,#d7e6f4 0 9px,#fff 9px 18px)}
.particle{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--red);animation:particle 3s linear infinite}.particle.p1{top:38%;left:8%}.particle.p2{top:56%;left:14%;animation-delay:1s}.particle.p3{top:28%;left:20%;animation-delay:2s}
@keyframes particle{to{left:48%;opacity:.25}}
.glass-window{position:absolute;inset:18% 27%;overflow:hidden;border:8px solid var(--navy);border-radius:50%;background:#dff4ff}.bubble{position:absolute;bottom:10%;width:18px;height:18px;border:3px solid var(--blue);border-radius:50%;animation:bubble 2.5s linear infinite}.bubble.b1{left:24%}.bubble.b2{left:54%;animation-delay:1s}
@keyframes bubble{to{bottom:85%;opacity:.2}}
.coil-box{position:absolute;top:8%;left:36%;width:28%;height:30%;border:6px solid var(--navy);border-radius:12px;background:var(--blue-soft);animation:pulse 1.8s ease-in-out infinite}
.plunger{position:absolute;left:46%;top:30%;width:8%;height:38%;background:var(--navy);animation:needle 1.8s ease-in-out infinite}
.check-disc{position:absolute;left:45%;top:24%;width:10%;height:52%;border-radius:10px;background:var(--orange);transform-origin:bottom;animation:check-open 2.4s ease-in-out infinite}@keyframes check-open{50%{transform:rotate(-38deg)}}
.u-tube{position:absolute;left:43%;top:24%;width:28%;height:56%;border:10px solid var(--navy);border-top:0;border-radius:0 0 35px 35px}.drop{position:absolute;top:15%;left:31%;width:14px;height:20px;border-radius:50% 50% 55% 55%;background:var(--flow-darkblue);animation:drop 2.4s linear infinite}@keyframes drop{to{top:66%;opacity:.25}}
.swirl{position:absolute;inset:20%;border:8px dashed var(--flow-red);border-radius:50%;animation:orbit 2.8s linear infinite}.oil-drop{position:absolute;left:48%;top:38%;width:13px;height:20px;border-radius:50%;background:var(--flow-orange);animation:drop 2.6s linear infinite}
.diaphragm{position:absolute;left:26%;top:43%;width:48%;height:8%;border-radius:999px;background:var(--blue);animation:needle 2s ease-in-out infinite}.contact{position:absolute;left:35%;top:19%;width:30%;height:7px;background:var(--navy);transform-origin:left;animation:contact 2s step-end infinite}@keyframes contact{50%{transform:rotate(-18deg)}}
.sensor-pulse{position:absolute;inset:18%;border:7px solid var(--blue);border-radius:50%;animation:sensor 2s ease-out infinite}@keyframes sensor{to{transform:scale(1.8);opacity:0}}
.regulator-spring{position:absolute;left:39%;top:12%;width:22%;height:34%;border:8px double var(--navy)}

.location-layout{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr)}
.cross-card{position:relative;display:grid;place-items:center;min-height:0;border:1px solid var(--line);border-radius:16px;background:#f8fbfe}
.cross-map{position:relative;width:min(460px,90%);aspect-ratio:1.45}
.cross-line{position:absolute;background:var(--line-color,var(--muted));border-radius:999px}.cross-line.top{top:16%;left:22%;width:56%;height:8px}.cross-line.right{top:17%;right:20%;width:8px;height:65%}.cross-line.bottom{bottom:16%;left:22%;width:56%;height:8px}.cross-line.left{top:17%;left:20%;width:8px;height:65%}
.cross-node{position:absolute;display:grid;place-items:center;width:105px;min-height:52px;padding:5px;border:3px solid var(--navy);border-radius:12px;background:var(--paper);color:var(--navy);font-size:10px;font-weight:900;text-align:center}.cross-node.top{top:2%;left:50%;transform:translateX(-50%)}.cross-node.right{right:1%;top:50%;transform:translateY(-50%)}.cross-node.bottom{bottom:2%;left:50%;transform:translateX(-50%)}.cross-node.left{left:1%;top:50%;transform:translateY(-50%)}
.cross-marker{position:absolute;z-index:2;padding:5px 8px;border:3px dashed var(--orange-text);border-radius:999px;background:#fff3ec;color:#8e3215;font-size:9px;font-weight:900;box-shadow:0 2px 8px rgba(27,58,99,.1)}
.mount-card{display:grid;align-content:center;padding:16px}.mount-card h3{margin:0 0 8px;font-size:18px}.mount-card ul{margin:0;padding-left:18px}.mount-card li{margin:6px 0;font-size:11px}.trap{margin:9px 0 0;padding:9px;border:3px dashed var(--orange-text);border-radius:10px;background:#fff5ef;color:#743a26;font-size:10px}.trap b{color:var(--orange-text)}

.question-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);align-items:stretch;height:100%;gap:10px}
.memory-summary{display:grid;align-content:center;padding:18px;border:5px double var(--green);border-radius:16px;background:var(--green-bg)}.memory-summary span{color:var(--green);font-size:10px;font-weight:900}.memory-summary h3{margin:7px 0;font-size:21px}.memory-summary p{margin:0;font-size:12px}
.question-card{display:grid;align-content:center;padding:17px}.question-card h3{margin:0 0 10px;font-size:20px}.answer-list{display:grid;gap:7px}.answer-button{min-height:42px;padding:9px 11px;border:2px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);font-weight:800;text-align:left;cursor:pointer}.answer-button.correct{border:5px double var(--green);background:var(--green-bg)}.answer-button.incorrect{border:3px dashed var(--red);background:var(--red-bg)}.answer-button:disabled{color:var(--ink);cursor:default}.feedback{margin:9px 0 0;padding:9px;border-radius:10px;font-size:11px}.feedback.success{border:5px double var(--green);background:var(--green-bg);color:#155f42}.feedback.error{border:3px dashed var(--red);background:var(--red-bg);color:#7b2820}.feedback button{margin-left:7px;border:0;background:transparent;color:inherit;font-weight:900;text-decoration:underline;cursor:pointer}

@media (max-width:900px){
  .home-view,.dossier-view{width:calc(100% - 12px)}
  .home-intro{grid-template-columns:1fr 145px}.home-intro h1{font-size:30px}
  .flow-legend{grid-template-columns:repeat(2,1fr)}
  .dossier-view{grid-template-columns:145px minmax(0,1fr)}
  .recognition-layout,.function-layout,.connection-layout,.mechanism-layout,.location-layout{grid-template-columns:1fr 1fr}
  .professional-card p{font-size:13px}
}

@media (max-width:650px){
  .topbar{height:52px;padding:5px 7px}.brand-mark{width:34px;height:34px;font-size:19px}.brand strong{font-size:14px}.brand small{display:none}.top-actions{gap:3px}.tool-button{min-height:32px;padding:4px 6px;font-size:10px}.tool-button span{display:none}.rate-control{display:none}
  .app-shell{height:calc(100dvh - 52px)}
  .home-view{grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:5px;padding:6px 0 4px}
  .home-intro{grid-template-columns:minmax(0,1fr) 74px;gap:6px}.home-intro .eyebrow{font-size:8px}.home-intro h1{font-size:clamp(20px,7vw,27px)}.home-intro>div>p:last-child{margin-top:4px;font-size:10px;line-height:1.2}.progress-card{display:block;padding:4px}.progress-card p{display:none}.progress-ring{width:60px;height:60px;border-width:4px}.progress-ring strong{font-size:19px}
  .flow-legend{grid-template-columns:repeat(2,1fr);gap:2px;padding:4px}.flow{font-size:7px}.flow i{width:13px}.flow b{display:none}
  .family-tabs{grid-template-columns:repeat(2,1fr);gap:3px}.family-tab{min-height:29px;padding:3px;font-size:9px}.family-tab small{display:none}
  .dossier-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px}.dossier-card{grid-template-columns:35px minmax(0,1fr);gap:5px;padding:5px;border-radius:10px}.dossier-icon{width:34px;height:34px;border-radius:8px}.dossier-icon img{width:29px;height:29px}.dossier-card h2{font-size:10px}.dossier-card p{font-size:7px;line-height:1.15}.card-state{display:none}.home-footer{font-size:7px}.home-footer p{max-width:72%}
  .dossier-view{display:block;width:calc(100% - 8px);padding:4px 0}.dossier-rail{display:none}.screen-card{height:100%;padding:6px 7px 4px;border-radius:13px}.screen-heading{min-height:42px;padding-bottom:4px}.screen-heading h2{font-size:19px}.screen-heading .eyebrow{font-size:8px}.screen-state{max-width:120px;font-size:7px}.revision-chip{padding:3px 5px}
  .screen-content{padding:5px 0}.screen-nav{min-height:36px;padding-top:3px}.screen-nav button{min-height:32px;padding:4px 7px;font-size:9px}.screen-nav span{font-size:8px}
  .recognition-layout,.function-layout,.connection-layout,.mechanism-layout,.location-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1.18fr) minmax(0,.82fr);gap:5px}.recognition-layout{grid-template-rows:minmax(0,1.25fr) minmax(0,.75fr)}
  .real-figure figcaption{font-size:7px;padding:2px}.real-figure img{padding:2px}.symbol-panel{padding:5px}.symbol-panel h3{display:none}.symbol-panel>p{margin:0 0 3px;font-size:7px}.symbol-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.symbol-card{min-height:43px;padding:2px}.symbol-card img{width:37px;height:27px}.symbol-card b{font-size:6px}.source-note{display:none}
  .professional-card{padding:9px;border-left-width:5px}.professional-card span{font-size:7px}.professional-card h3{margin:3px 0 5px;font-size:15px}.professional-card p{font-size:10px;line-height:1.3}.key-card{padding:7px;border-width:3px}.key-card h3{font-size:11px}.key-card li{margin:2px 0;font-size:8px}
  .ports-card{padding:7px;gap:5px}.port-flow{grid-template-columns:1fr 25px 1fr;gap:3px}.port-box{min-height:60px;padding:5px;border-width:2px}.port-box b{font-size:9px}.port-box span{font-size:7px}.flow-arrow{font-size:18px}.connection-extra{padding:5px;font-size:7px}.text-card{padding:7px}.text-card h3{font-size:12px}.text-card li{margin:2px 0;font-size:8px}.no-through{min-height:80px;padding:7px}.no-through b{font-size:13px}.no-through p{font-size:8px}
  .mechanism-stage{min-height:0}.machine{height:95%;min-height:115px}.mechanism-copy{padding:7px;border-left-width:4px}.mechanism-copy h3{font-size:12px}.mechanism-copy li{margin:2px 0;font-size:8px}.mechanism-copy p{font-size:7px}.mechanism-layout{grid-template-rows:minmax(0,1.25fr) minmax(0,.75fr)}
  .compressor-deck{gap:4px;width:94%;height:94%}.mini-machine{border-width:2px;border-radius:8px}.mini-machine b{font-size:7px}
  .location-layout{grid-template-rows:minmax(0,1.05fr) minmax(0,.95fr)}.cross-node{width:70px;min-height:34px;font-size:7px}.cross-marker{padding:3px 5px;font-size:6px}.mount-card{padding:7px}.mount-card h3{font-size:12px}.mount-card li{margin:2px 0;font-size:8px}.trap{margin-top:4px;padding:5px;font-size:7px}
  .question-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:5px}.memory-summary{padding:7px;border-width:3px}.memory-summary h3{margin:3px 0;font-size:14px}.memory-summary p{font-size:8px}.question-card{padding:8px}.question-card h3{margin-bottom:5px;font-size:13px}.answer-list{gap:4px}.answer-button{min-height:31px;padding:5px 7px;font-size:8px}.feedback{margin-top:4px;padding:5px;font-size:8px}
}

@media (max-width:370px) and (max-height:680px){
  .home-intro>div>p:last-child{display:none}.flow-legend{display:none}.home-view{grid-template-rows:auto auto minmax(0,1fr) auto}.dossier-card p{display:none}
  .screen-heading{min-height:36px}.screen-heading h2{font-size:17px}.screen-content{padding:3px 0}.screen-nav{min-height:32px}
}



/* =====================================================================
   FONCTIONNEMENT INTERNE — planches réelles et identité de l'organe
   ---------------------------------------------------------------------
   Retour F. Henninot (03-04/08) : une animation abstraite sans nom ni
   légende ne dit pas ce qu'on regarde. Six organes affichent désormais la
   PLANCHE VALIDÉE du pack (res/svg/) ; les autres gardent leur animation
   mais avec le symbole normalisé, le nom et l'entrée/sortie écrits.
   ===================================================================== */
.mecanisme-scene { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 8px; }

.mecanisme-planche { display: flex; flex-direction: column; margin: 0; min-height: 0; flex: 1; }
.mecanisme-planche img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.mecanisme-planche figcaption {
  flex: 0 0 auto; padding: 7px 10px; border-left: 4px solid var(--navy, #1b3a63);
  background: #eef4f8; border-radius: 0 8px 8px 0;
  font-size: 13px; font-weight: 700; color: #1b3a63; line-height: 1.3;
}

.mechanism-layout.avec-planche { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }

.mecanisme-identite {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--line, rgba(27,58,99,.16));
  border-left: 4px solid var(--navy, #1b3a63); border-radius: 0 8px 8px 0; background: #fffdf8;
}
.mecanisme-identite img { width: 40px; height: 36px; flex: 0 0 auto; }
.mecanisme-identite b { font-size: 14px; color: #1b3a63; white-space: nowrap; }
.mecanisme-identite span { font-size: 11px; color: #637285; line-height: 1.25; }

@media (max-width: 900px) {
  .mechanism-layout.avec-planche { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, .7fr); }
  .mecanisme-planche figcaption { font-size: 10px; padding: 4px 7px; }
  .mecanisme-identite { gap: 6px; padding: 4px 7px; }
  .mecanisme-identite b { font-size: 10px; }
  .mecanisme-identite span { font-size: 8px; }
  .mecanisme-identite img { width: 28px; height: 26px; }
}

/* =====================================================================
   ÉCRAN « OÙ ÇA FUIT » — les risques de fuite propres à chaque organe
   ---------------------------------------------------------------------
   Ajouté le 3 août 2026 : les codes 6.01, 7.01, 8.01, 9.01 et 1.05 du
   référentiel demandent le principe de fonctionnement ET les risques de
   fuite. Le module tenait le premier, pas le second — mesuré (le mot
   « fuite » n'apparaissait nulle part), pas supposé.
   ===================================================================== */
.leak-layout {
  display: grid;
  gap: clamp(10px, 1.6vw, 20px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  min-height: 0;
}

.leak-card,
.leak-method {
  padding: clamp(12px, 1.7vw, 20px);
  border: 1px solid var(--line, rgba(27, 58, 99, .16));
  border-radius: 14px;
  background: var(--paper, #fffdf8);
}

.leak-card {
  border-left: 5px solid var(--danger, #c0392b);
}

.leak-method {
  border-left: 5px double var(--ok, #1e7e54);
}

.leak-card h3,
.leak-method h3 {
  margin: 4px 0 10px;
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
  line-height: 1.12;
}

.leak-list,
.leak-method ol {
  margin: 0;
  padding-left: 18px;
  line-height: 1.4;
}

.leak-list li,
.leak-method li {
  margin-bottom: 7px;
}

.leak-warning {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px dashed var(--danger, #c0392b);
  border-radius: 10px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .leak-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Petits écrans : le module tient ses 6 autres écrans sans defilement grace a
   une echelle typographique reduite (jusqu'a 7-8 px). L'ecran « Ou ca fuit »
   porte plus de texte que les autres — mesure a 360x640, il debordait de
   567 px, coupes en silence par `overflow:hidden`. Meme echelle appliquee, et
   filet de securite : si ca ne suffit pas, la carte DEFILE. Mieux vaut un
   defilement visible qu'un paragraphe perdu sans que personne le sache. */
@media (max-width: 900px) {
  .leak-layout {
    grid-template-rows: auto auto;
    gap: 6px;
    overflow-y: auto;
  }

  .leak-card,
  .leak-method {
    padding: 8px;
    border-left-width: 4px;
  }

  .leak-card h3,
  .leak-method h3 {
    margin: 2px 0 5px;
    font-size: 12px;
  }

  .leak-list,
  .leak-method ol {
    padding-left: 14px;
  }

  .leak-list li,
  .leak-method li {
    margin-bottom: 3px;
    font-size: 8px;
    line-height: 1.3;
  }

  .leak-warning {
    margin-top: 6px;
    padding: 5px 6px;
    font-size: 7px;
  }
}