/* Core: a dark studio and an instrument you can actually use. Homepage only. */
.core-home {
  --bg:#060b0c; --bg2:#151d1f; --plate:#0d1416; --cream:#e3ebe8;
  --dim:#899995; --green:#05ed98;
  background:#060b0c; color:var(--cream); overflow-x:clip;
}
.core-home::before,.core-home::after { display:none; }
.core-home .wrap { max-width:1600px; padding:0 44px; }
.core-home .site-header { height:98px; padding:0; border-bottom:1px solid #a2c6b50e; }
.core-home .brand { gap:11px; }
.core-home .brand img { width:30px; height:30px; object-fit:contain; image-rendering:pixelated; }
.core-home .brand .t { font-size:23px; letter-spacing:-1px; }
.core-header-note { color:#82928c; font:10px var(--mono); letter-spacing:.12em; display:flex; gap:25px; align-items:center; }
.core-header-note a { color:#c3d1cc; text-decoration:none; padding:15px 0; }
.core-header-note a:hover { color:var(--green); }
.core-home button,.core-home a { -webkit-tap-highlight-color:transparent; }
.core-home button { font:inherit; }
.core-home :focus-visible { outline:2px solid var(--green); outline-offset:5px; }
.skip-link { position:fixed; left:24px; top:-80px; z-index:200; padding:14px 20px; background:var(--green); color:#041710; border-radius:6px; }
.skip-link:focus { top:15px; }
.core-experience { position:relative; }
.core-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:26px; min-height:620px; }
.core-stage { height:clamp(590px,calc(100svh - 245px),850px); min-width:0; position:relative; isolation:isolate; }
#core-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; pointer-events:none; z-index:1; }
#core-canvas { mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 91%,transparent); mask-composite:intersect; }
.core-home.scene-ready #core-canvas { opacity:1; }
.core-atmosphere { position:absolute; inset:3% -5% 0; pointer-events:none; z-index:-2; background:radial-gradient(ellipse 36% 35% at 46% 61%,#06cf8410,transparent 95%),radial-gradient(ellipse 38% 12% at 50% 82%,#0b7c5426,transparent); }
.core-poster { position:absolute; width:100%; height:100%; object-fit:contain; mix-blend-mode:lighten; pointer-events:none; opacity:0; z-index:0; }
.core-poster img { width:100%; height:100%; object-fit:contain; }
@media(min-width:601px) { .core-poster img { object-fit:cover; } }
.scene-ready .core-poster { opacity:0; }
.core-shadow { position:absolute; left:50%; bottom:11%; width:350px; max-width:60%; height:25px; border-radius:50%; background:#000c; box-shadow:0 0 30px 15px #0008; filter:blur(14px); transform:translateX(-50%); pointer-events:none; z-index:-1; }
.mouth-toggle { position:absolute; left:0; top:0; width:520px; height:110px; display:flex; align-items:center; justify-content:center; gap:15px; border:0; background:transparent; color:#b6c5bf; transform-origin:0 0; cursor:pointer; opacity:0; z-index:4; letter-spacing:.20em!important; font:15px var(--mono)!important; transition:color .2s,opacity .3s; }
.mouth-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; }
.mouth-toggle:hover { color:#e4fff2; }
.mouth-toggle:hover .hatch-light { box-shadow:0 0 14px #05ed98b0; }
.hatch-light { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 7px #05ed9855; }
.scene-ready:not(.board-open) .mouth-toggle { opacity:var(--reveal-controls,1); }
.scene-ready:not(.scene-entered) .mouth-toggle { pointer-events:none; }
.board-open .mouth-toggle { visibility:hidden; }
.core-switchboard { --key-accent:#53e7b7; position:absolute; top:0; left:0; width:560px; padding:14px 17px 11px; transform-origin:0 0; z-index:5; border-radius:13px; background:radial-gradient(ellipse at 0 0,#35ffc217,transparent 42%),linear-gradient(142deg,#34454e 0%,#17292f 19%,#0c171c 65%,#25383f 100%); border:1px solid #79959e; box-shadow:inset 0 1px 0 #d6f4ff80,inset 1px 0 0 #6cffe84a,inset 0 0 0 4px #081419,0 5px 0 #040a0d,0 6px 0 #3d5963,0 28px 36px -12px #000c; will-change:transform,opacity; }
.core-switchboard[hidden] { display:none; }
.board-topline,.board-baseline { display:flex; align-items:center; justify-content:space-between; gap:8px; font:9px var(--mono); letter-spacing:.09em; color:#9cafb7; }
.board-topline { padding:0 1px 10px; }
.board-topline>span { display:flex; gap:8px; align-items:center; }
.board-topline b { font-weight:400; color:#59737d; }
.board-topline i,.output-topline i { display:inline-block; height:4px; width:4px; border-radius:50%; background:var(--green); box-shadow:0 0 7px #05ed9860; }
.board-topline button,.output-topline button { display:flex; align-items:center; justify-content:center; border:0; background:none; color:#9fafaa; cursor:pointer; width:52px; height:48px; font-size:21px; line-height:1; margin:-12px -12px -12px 0; }
.board-topline button:hover,.output-topline button:hover { color:white; }
.core-keys { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px 11px; padding:6px 4px 12px; background:#040b0f; border-radius:7px; box-shadow:inset 0 2px 5px #000,0 1px 0 #bddce119; }
.core-key { height:68px; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; border-radius:5px; border:1px solid #819eae48; color:#c6d8df; text-decoration:none; background:linear-gradient(150deg,#344954,#20333d 48%,#15262e); box-shadow:0 5px 0 #080f15,0 6px 0 #3c5662,0 8px 4px #000,inset 0 1px 0 #d2efff40; transition:transform .12s,box-shadow .12s,color .15s,background .15s; touch-action:manipulation; }
.core-key::before { content:''; position:absolute; left:13px; right:13px; bottom:-6px; height:1px; background:var(--key-accent); opacity:.18; box-shadow:0 0 8px var(--key-accent); transition:opacity .2s; }
.core-key:hover,.core-key:focus-visible { background:linear-gradient(150deg,#425e69,#29454e 50%,#1c343e); transform:translateY(-2px); color:#edfff8; }
.core-key:hover::before,.core-key[aria-current]::before { opacity:.9; }
.core-key:active,.core-key.pressed { transform:translateY(4px); box-shadow:0 1px 0 #080f15,0 2px 0 #3c5662,0 3px 2px #000,inset 0 1px 0 #d2efff25; }
.core-key[aria-current] { border-color:#4aedb98c; color:#a6ffdb; background:linear-gradient(150deg,#2d514f,#183937 55%,#132c2f); }
.key-label { font:10px var(--mono); letter-spacing:-.02em; white-space:nowrap; }
.key-number { font:7px var(--mono); color:#9ab2bc; position:absolute; right:5px; top:5px; opacity:.7; }
.key-glyph { display:block; width:21px; height:21px; color:var(--key-accent); filter:drop-shadow(0 0 4px #05ed981c); }
.key-glyph svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.board-baseline { padding:12px 2px 0; font-size:8px; letter-spacing:.08em; }
.board-shortcuts { color:#bacdd4; }
.board-shortcuts span { color:#69838d; margin-left:4px; }
.core-stage-caption { position:absolute; bottom:20px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:18px; font-size:11px; color:#7d9287; z-index:2; pointer-events:none; }
.caption-line { width:24px; height:1px; background:#708e782e; }
.core-toolbar { position:relative; z-index:6; border-top:1px solid #a2c6b514; border-bottom:1px solid #a2c6b514; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:15px; min-height:72px; }
.core-status { display:flex; align-items:center; gap:9px; font:9px var(--mono); letter-spacing:.1em; color:#93a59b; }
.core-status i { width:5px; height:5px; background:#05ed98; border-radius:50%; box-shadow:0 0 9px #05ed9850; }
.switchboard-toggle { display:flex; align-items:center; gap:11px; background:transparent; border:0; color:#e0eee5; padding:14px; font-size:12px!important; cursor:pointer; }
.toggle-icon { display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; border:1px solid #587061; color:var(--green); transition:transform .4s; font-size:18px; font-weight:400; }
.board-open .toggle-icon { transform:rotate(45deg); }
.sound-toggle { justify-self:end; display:flex; gap:9px; align-items:center; background:none; border:0; color:#81948a; font:9px var(--mono)!important; letter-spacing:.07em; cursor:pointer; padding:15px 0 15px 15px; }
.sound-toggle svg { height:17px; width:17px; stroke:currentColor; stroke-width:1.1; fill:none; }
.sound-waves { display:none; }
.sound-toggle[aria-pressed=true] { color:#a7cdb6; }
.sound-toggle[aria-pressed=true] .sound-waves { display:block; }
.sound-toggle[aria-pressed=true] .sound-off { display:none; }
.core-senses { justify-self:end; display:flex; align-items:center; gap:18px; }
.tilt-toggle { display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 0; border:0; background:none; color:#92aaa5; font:9px var(--mono)!important; letter-spacing:.04em; cursor:pointer; }
.tilt-toggle[hidden] { display:none; }
.tilt-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.1; }
.tilt-toggle[aria-pressed=true] { color:#64dfb4; }
.tilt-toggle:disabled { cursor:default; color:#72858c; }
.core-home .site-footer { padding:25px 0; font-size:9px; color:#587165; letter-spacing:.1em; }
.core-home .site-footer .robo { display:none; }
.core-home>.wrap>.panels { display:none; }
.core-output { margin:125px 0 54px; align-self:start; min-width:0; border:1px solid #4e6d5c55; border-radius:10px; background:linear-gradient(140deg,#1d302551,#0b1410ed 50%); box-shadow:0 20px 70px #0003; overflow:hidden; animation:outputIn .5s both; }
.core-output[hidden] { display:none; }
.output-topline { display:flex; justify-content:space-between; align-items:center; min-height:47px; padding:0 20px; border-bottom:1px solid #6d927627; color:#a6bcad; font:9px var(--mono); letter-spacing:.12em; }
.output-topline>span { display:flex; align-items:center; gap:9px; }
.output-topline button { width:44px; height:44px; }
#core-panel-mount { max-height:480px; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:#46684e #0c1911; scrollbar-width:thin; }
.core-output .panel { display:none; padding:0; margin:0; }
.core-output .panel.active { display:block; animation:none; }
.core-output .panel-card { background:none; border-radius:0; box-shadow:none; padding:27px 25px 30px; }
.core-output .panel-card h2 { font-size:27px; font-weight:500; letter-spacing:-1px; }
.core-output .panel-card p { font-size:13px; color:#9aafa0; }
.core-output .app-showcase { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.core-output .app-card { background:#16251ba8; border-color:#4f6b583b; border-radius:7px; }
.core-output .app-card-shot { max-height:155px; border-color:#4f6b583b; }
.core-output .app-card-body { padding:17px; }
.core-output .app-card-title b { font-size:16px; }
.core-output .app-card p { font-size:12px; }
.core-output .app-chip { font-size:8px; padding:3px 6px; }
.core-output .app-card-meta .go { font-size:10px; letter-spacing:0; }
.core-output .lab-grid { grid-template-columns:1fr; gap:10px; margin-top:20px; }
.core-output .lab-card { background:#17251c; border:1px solid #54755d33; border-radius:6px; padding:17px; }
.core-output .lab-card b { font-size:15px; }
.core-output .lab-card:hover { border-color:#05ed9866; }
.core-output .notify-row { flex-direction:column; }
.core-output .notify-row input { flex:auto; }
.core-output .plate-section { padding:24px 12px 12px; }
.core-output .plate-label { font-size:9px; padding:0 12px; letter-spacing:.08em; margin-bottom:15px; }
.core-output .plate { padding:0; box-shadow:none; background:none; }
.core-output .screw,.core-output .stem-ind { display:none; }
.core-output .switch-row { display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:18px 12px; border-color:#2f493536; border-radius:5px; }
.core-output .switch-row .date { font-size:9px; }
.core-output .switch-row .title { font-size:15px; line-height:1.4; }
.core-output .switch-row .excerpt { font-size:12px; line-height:1.55; }
.sr-only { position:absolute; height:1px; width:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.no-script-links { text-align:center; line-height:2; padding:20px; }
.no-script-links a { color:var(--green); margin:0 12px; }
.scene-fallback .mouth-toggle { display:none; }
.scene-fallback .core-switchboard { left:50%; top:57%; transform:translate(-50%,-15%); }
.scene-loading .core-switchboard { left:50%; top:55%; transform:translate(-50%,-15%); }
@keyframes outputIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1050px) {
  .has-selection .core-layout { grid-template-columns:minmax(0,1fr) 390px; }
}
@media(min-width:1400px) { .has-selection .core-layout { grid-template-columns:minmax(0,1fr) 420px; } }
@media(max-width:1049px) {
  .core-output { margin:0 auto 32px; width:min(640px,100%); }
  #core-panel-mount { max-height:none; }
  .core-output .app-showcase { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); }
}
@media(max-width:600px) {
  .core-home .wrap { padding:0 18px; }
  .core-home .site-header { height:77px; }
  .core-home .brand .t { font-size:21px; }
  .core-home .brand img { width:25px; height:25px; }
  .core-header-note { font-size:9px; }.core-header-note>span { display:none; }
  .core-stage { height:clamp(560px,calc(100svh - 184px),690px); }
  .core-layout { min-height:0; gap:0; }
  .core-switchboard { width:calc(100vw - 48px); padding:12px 12px 10px; border-radius:10px; }
  .core-keys { gap:12px 8px; padding:5px 3px 11px; }
  .core-key { height:64px; }
  .key-label { font-size:9px; }.key-number { font-size:6px; }
  .key-glyph { width:19px; height:19px; }
  .board-topline { font-size:7px; letter-spacing:.035em; padding-bottom:12px; }
  .board-topline button { width:56px; height:54px; }
  .board-baseline { font-size:7px; }
  .board-shortcuts { display:none; }
  .core-stage-caption { bottom:17px; font-size:10px; gap:12px; }
  .core-toolbar { grid-template-columns:1fr auto; min-height:63px; gap:6px; }
  .core-status { display:none; }
  .switchboard-toggle { justify-self:start; padding:13px 0; font-size:12px!important; gap:9px; }
  .sound-toggle { font-size:8px!important; }
  .core-senses { gap:7px; }
  .tilt-toggle { font-size:8px!important; gap:5px; }
  .core-senses:has(.tilt-toggle:not([hidden])) .sound-toggle { padding:10px; min-height:44px; min-width:44px; }
  .core-senses:has(.tilt-toggle:not([hidden])) #sound-label { display:none; }
  .core-home .site-footer { padding:24px 0; font-size:7px; letter-spacing:.07em; }
  .core-output { margin-top:10px; }
  .core-output .panel-card { padding:22px 18px 25px; }
  .core-output .app-showcase { display:flex; }
}
@media(prefers-reduced-motion:reduce) {
  .core-home *, .core-home *::before { animation:none!important; scroll-behavior:auto!important; transition:none!important; }
}