/* Goal100 Maker Lab home block (job makerhero, Nov 14, 2026). One section, always dark "lab bay" look.
   Text never moves: only the canvas/drawing animates; text appears with opacity only (200 ms). */
#g100-maker{--mh-ink:#16163A;--mh-indigo:#2B2A8C;--mh-gold:#F2A93B;--mh-teal:#0E7C66;--mh-glow:#5ED3B8;
  position:relative;overflow:hidden;margin:16px 0;border-radius:22px;padding:18px 16px 16px;color:#fff;
  background:radial-gradient(90% 70% at 85% 0%,rgba(94,211,184,.16) 0%,rgba(94,211,184,0) 60%),radial-gradient(120% 90% at 0% 100%,#3A38B8 0%,#2B2A8C 38%,#16163A 100%);
  box-shadow:0 0 0 1px rgba(94,211,184,.28),0 16px 40px rgba(20,19,80,.32);font-family:var(--body,system-ui,sans-serif);isolation:isolate}
#g100-maker::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(94,211,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(94,211,184,.07) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 100%)}
#g100-maker *{box-sizing:border-box}
#g100-maker .mh-k{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:700 .76rem/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:#7FE3CC}
#g100-maker .mh-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#5ED3B8;box-shadow:0 0 0 3px rgba(94,211,184,.22),0 0 12px #5ED3B8}
#g100-maker h2{margin:0;color:#fff;font:800 clamp(1.5rem,6.4vw,2.45rem)/1.06 var(--display,inherit);letter-spacing:-.01em;text-shadow:0 0 24px rgba(127,227,204,.25)}
#g100-maker h2 em{font-style:normal;color:#FFC861}
#g100-maker h2::before,#g100-maker h2::after{display:none!important;content:none!important}
#g100-maker .mh-line{margin:8px 0 14px;font-weight:700;font-size:1.02rem;line-height:1.35;color:#E9E8FF}
/* bay = scene + console */
#g100-maker .mh-bay{display:grid;grid-template-columns:1fr;gap:10px;border-radius:18px;padding:8px;background:rgba(10,10,40,.55);box-shadow:inset 0 0 0 1px rgba(127,227,204,.22)}
#g100-maker .mh-scene{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:radial-gradient(80% 70% at 50% 85%,#1E2A6A 0%,#121238 70%);touch-action:pan-y;min-width:0}
#g100-maker .mh-poster,#g100-maker .mh-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
#g100-maker .mh-cv{opacity:0;transition:opacity .45s ease}
#g100-maker.mh-live .mh-cv{opacity:1}
#g100-maker.mh-live .mh-poster{visibility:hidden;transition:visibility 0s .45s}
#g100-maker .mh-scene::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(127,227,204,.25),inset 0 -30px 60px rgba(14,124,102,.18)}
/* poster states */
#g100-maker .mh-tr{stroke:#2E8F7B}
#g100-maker .mh-led circle{fill:#3A4A5A}
#g100-maker .mh-eye circle{fill:#2A3350}
#g100-maker .mh-ant{fill:#5A4A20}
#g100-maker .mh-arm-up{display:none}
#g100-maker.is-on .mh-tr{stroke:#FFC861;filter:url(#mhGlow)}
#g100-maker.is-on .mh-led circle{fill:#7CF5DA;filter:url(#mhGlow)}
#g100-maker.is-on .mh-eye circle{fill:#7CF5DA;filter:url(#mhGlow)}
#g100-maker.is-on .mh-ant{fill:#FFC861;filter:url(#mhGlow)}
#g100-maker.is-on .mh-arm-up{display:inline}
#g100-maker.is-on .mh-arm-down{display:none}
/* console */
#g100-maker .mh-console{display:flex;flex-direction:column;gap:8px;min-width:0}
#g100-maker .mh-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;list-style:none}
#g100-maker .mh-steps li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:46px;margin:0;padding:4px 2px;border-radius:10px;font-weight:800;font-size:.82rem;line-height:1.1;text-align:center;color:#C9C8F0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .2s,color .2s,box-shadow .2s;min-width:0}
#g100-maker .mh-steps b{display:inline-grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:50%;font:800 .72rem/1 ui-monospace,Menlo,Consolas,monospace;background:rgba(255,255,255,.12);color:#fff}
#g100-maker .mh-steps li.is-now{color:#16163A;background:#7FE3CC;box-shadow:0 0 16px rgba(127,227,204,.55)}
#g100-maker .mh-steps li.is-now b{background:#16163A;color:#7FE3CC}
#g100-maker .mh-steps li.is-done{color:#fff;background:rgba(94,211,184,.18);box-shadow:inset 0 0 0 1px rgba(127,227,204,.55)}
#g100-maker .mh-steps li.is-done b{background:#5ED3B8;color:#16163A}
#g100-maker .mh-term{margin:0;padding:10px 12px;border-radius:12px;background:#0B0B24;box-shadow:inset 0 0 0 1px rgba(127,227,204,.2);font:600 .84rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#B9F5E6;min-height:calc(5 * 1.5em + 20px)}
#g100-maker .mh-term p{margin:0;white-space:normal;overflow-wrap:anywhere;transition:opacity .2s linear}
#g100-maker .mh-term code{font:inherit;color:#FFC861;background:none;padding:0}
#g100-maker .mh-term .mh-boot code{color:#fff}
#g100-maker.mh-anim .mh-term p{opacity:0}
#g100-maker.mh-anim .mh-term p.is-shown{opacity:1}
/* on/off labels share one box, so nothing shifts when they swap */
#g100-maker .mh-swap{display:inline-grid;vertical-align:top}
#g100-maker .mh-swap>span{grid-area:1/1}
#g100-maker .mh-on-t{visibility:hidden}
#g100-maker.is-on .mh-on-t{visibility:visible}
#g100-maker.is-on .mh-off-t{visibility:hidden}
#g100-maker.is-on .mh-boot .mh-on-t{color:#7CF5DA}
#g100-maker .mh-ctrl{display:flex;gap:8px}
#g100-maker .mh-power{position:relative;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:10px 18px;border:0;border-radius:14px;cursor:pointer;font:800 1.12rem/1.1 var(--body,inherit);color:#16163A;background:linear-gradient(180deg,#8FF0D9 0%,#5ED3B8 100%);box-shadow:0 4px 0 #0E7C66,0 0 22px rgba(94,211,184,.35)}
#g100-maker .mh-power::after{content:"";position:absolute;inset:-4px;border-radius:17px;pointer-events:none;box-shadow:0 0 0 2px rgba(127,227,204,.0)}
#g100-maker.mh-ready:not(.is-on) .mh-power::after{animation:mh-pulse 1.6s ease-out infinite}
@keyframes mh-pulse{0%{box-shadow:0 0 0 0 rgba(127,227,204,.75)}100%{box-shadow:0 0 0 12px rgba(127,227,204,0)}}
#g100-maker.is-on .mh-power{color:#fff;background:linear-gradient(180deg,#3B3AB8 0%,#2B2A8C 100%);box-shadow:0 4px 0 #14134A,0 0 0 2px #7FE3CC inset}
#g100-maker .mh-power:active{filter:brightness(.92)}
#g100-maker .mh-replay{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:12px;cursor:pointer;font:800 1.3rem/1 var(--body,inherit);color:#fff;background:rgba(11,11,36,.72);box-shadow:inset 0 0 0 1px rgba(127,227,204,.55)}
#g100-maker .mh-replay[hidden]{display:none}
#g100-maker .mh-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#g100-maker .mh-hint{margin:0;font-size:.84rem;line-height:1.35;color:#C9C8F0}
#g100-maker .mh-hint .mh-live-t{visibility:hidden}
#g100-maker.mh-live .mh-hint .mh-live-t{visibility:visible}
#g100-maker.mh-live .mh-hint .mh-still-t{visibility:hidden}
/* spec strip */
#g100-maker .mh-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0 0;padding:0;list-style:none}
#g100-maker .mh-spec li{margin:0;padding:7px 4px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;text-align:center;font-size:.74rem;line-height:1.15;color:#E9E8FF}
#g100-maker .mh-spec b{font:800 1.45rem/1 var(--display,inherit);color:#FFC861}
/* links */
#g100-maker .mh-cta{margin:14px 0 10px}
#g100-maker .mh-go{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 22px;border-radius:14px;background:#F2A93B;color:#2A1C00;font-weight:800;font-size:1.1rem;text-decoration:none;box-shadow:0 4px 0 #B87A16,0 0 26px rgba(242,169,59,.3)}
#g100-maker .mh-chips{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
#g100-maker .mh-chips li{margin:0;padding:0;list-style:none;min-width:0}
#g100-maker .mh-chips a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;font-weight:800;font-size:.92rem;line-height:1.15;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(127,227,204,.6)}
#g100-maker .mh-chips a:hover{background:rgba(127,227,204,.16)}
#g100-maker .mh-small{margin:12px 0 0;font-size:.86rem;line-height:1.4;color:#D7D6F5}
#g100-maker a:focus-visible,#g100-maker button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:430px){#g100-maker .mh-steps li{font-size:.78rem}#g100-maker .mh-term{font-size:.78rem}}
@media (min-width:560px){#g100-maker .mh-spec li{flex-direction:row;justify-content:center;align-items:baseline;gap:8px;font-size:.88rem;padding:8px 10px}}
@media (max-width:559px){#g100-maker .mh-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}#g100-maker .mh-chips a{display:flex;height:100%;border-radius:16px;padding:6px 10px;font-size:.86rem}#g100-maker .mh-go{display:flex;width:100%}}
@media (min-width:760px){
  #g100-maker{padding:26px 28px 24px}
  #g100-maker .mh-bay{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px;padding:10px}
  #g100-maker .mh-console{justify-content:center;padding:4px 2px}
  #g100-maker .mh-term{font-size:.88rem}
}
@media (min-width:1200px){#g100-maker .mh-bay{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
/* landscape phones: keep the scene short enough to see the button */
@media (max-height:500px) and (orientation:landscape){
  #g100-maker .mh-bay{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  #g100-maker .mh-scene{aspect-ratio:4/3}
}
/* calm: no transitions, no pulse */
@media (prefers-reduced-motion:reduce){#g100-maker *,#g100-maker *::after{animation:none!important;transition:none!important}}
html.calm #g100-maker *,html[data-motion="calm"] #g100-maker *,html[data-motion="off"] #g100-maker *,
html.calm #g100-maker *::after,html[data-motion="calm"] #g100-maker *::after,html[data-motion="off"] #g100-maker *::after{animation:none!important;transition:none!important}
@media print{#g100-maker .mh-cv,#g100-maker .mh-ctrl,#g100-maker .mh-hint{display:none!important}}