/* Think, Model, Act — interactive 3D graphic (AI4Enterprise)
   Standalone page styles plus an `embed` mode used by the website's hero.
   In embed mode the page is transparent and lays out to fill the iframe
   height it is given: captions and controls take their natural height and
   the 3D scene takes the rest. */
:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,Arial,sans-serif;background:#0b284a;color:#f4f8ff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 48% 35%,#194970 0%,#0b284a 66%);min-height:100svh}
main{max-width:1440px;margin:auto;padding:32px 5vw 40px}
header{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:20px;font-weight:700;letter-spacing:-.5px;color:inherit;text-decoration:none}
.brand span{color:#93c5fd}
.back{font-size:14px;color:#bad1e9;text-decoration:none}
.back:hover{color:white;text-decoration:underline}
.experience{margin:24px auto 0;max-width:1200px}
.scene{height:clamp(260px,40vw,500px);position:relative;isolation:isolate}
.scene canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;outline-offset:6px;border-radius:12px}
.scene canvas.dragging{cursor:grabbing}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.scene.ready img{display:none}
#status{position:absolute;bottom:0;left:0;right:0;margin:0;text-align:center;color:#c7dbee;font-size:14px}
.scene.ready #status{display:none}
/* The fallback image already carries the three captions, so hide the text
   captions whenever the image is what the visitor sees. */
.scene:not(.ready)+.labels{visibility:hidden}
.labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;gap:18px;margin:4px auto 0;max-width:1100px}
.labels h1,.labels h2{font-size:clamp(26px,3vw,42px);font-weight:650;letter-spacing:-1px;margin:10px 0 12px}
.labels p{font-size:clamp(14px,1.5vw,18px);color:#bfd1e3;line-height:1.5;margin:0}
.index{font-size:12px;letter-spacing:2px;font-weight:600}
.think{color:#ff8f81}.model{color:#ffd675}.act{color:#63eab1}
.controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:52px 0 0;padding-top:22px;border-top:1px solid #ffffff18}
.controls[hidden]{display:none}
.controls p{font-size:14px;color:#b7cde1;margin:0}
.controls p span{margin:0 8px}
.buttons{display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;font-size:14px;min-height:42px;padding:10px 16px;border:1px solid #ffffff28;border-radius:7px;background:#ffffff08;color:#edf6ff;cursor:pointer}
button:hover{background:#ffffff16;border-color:#ffffff60}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #94c7ff;outline-offset:4px}
button#out,button#in{font-size:22px;min-width:44px;padding:5px 12px}

/* ---- Embed mode (index.html?embed) ------------------------------------ */
.embed,.embed body{background:transparent;height:100%;min-height:0;overflow:hidden}
.embed body{display:flex;flex-direction:column}
.embed main{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;max-width:none;padding:0 0 4px}
.embed header{display:none}
.embed .experience{flex:1;display:flex;flex-direction:column;min-height:0;margin:0;max-width:none}
.embed .scene{flex:1;height:auto;min-height:180px}
.embed .scene canvas{outline-offset:-4px}
.embed .labels{gap:12px;margin-top:0}
.embed .labels h1,.embed .labels h2{font-size:clamp(20px,2.6vw,30px);margin:4px 0 6px}
.embed .labels p{font-size:clamp(13px,1.4vw,16px)}
.embed .index{font-size:11px}
/* The homepage embed shows no control bar; drag, arrow keys and Space (pause) still work on the focused canvas. */
.embed .controls{display:none}
.embed .controls p{font-size:12px;color:#a9c0d6}
.embed button{min-height:36px;font-size:13px;padding:6px 12px}
.embed button#out,.embed button#in{font-size:18px;min-width:40px;padding:4px 10px}

@media(max-width:600px){
  main{padding:22px 18px 28px}
  header{align-items:flex-start}
  .brand{font-size:18px}
  .scene{height:280px}
  .experience{margin-top:14px}
  .labels{gap:10px}
  .labels h1,.labels h2{font-size:26px}
  .labels p{font-size:14px}
  .controls{margin-top:32px;flex-direction:column;align-items:center;gap:16px}
  .controls p{font-size:12px}
  .buttons{justify-content:center}
  .buttons button{min-height:44px;padding:9px 12px}
  .index{font-size:12px}
  .embed .labels{gap:8px}
  .embed .labels h1,.embed .labels h2{font-size:20px;margin:2px 0 4px}
  .embed .labels p{font-size:13px}
  .embed .controls{margin-top:12px;gap:10px}
  .embed .controls p{display:none}
  .embed .buttons button{min-height:40px;padding:6px 12px}
}