/* Alchemy TUI landing — design system + scene. Extracted from the page; asset URLs are absolute. */

/* cyrillic-ext */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/5b25f559-e516-4d8b-a031-adc1fb35c4b9.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/21cf68fe-19fd-4a64-9073-2e347c55571b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/2a03ce43-f93a-42ec-b447-0943388e9290.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/df164c61-4aa8-492b-b017-3911e4ddf611.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/83d78779-2758-45e3-8527-74646efcad71.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/428fec7b-a65b-4ec8-bf40-5b9c9a439f9b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/c03562a2-bb96-4444-beb4-8aa43a05c043.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/2f51b8d4-1207-4a62-ac84-09d7ed9fb726.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/b8562d2c-9b3c-49c3-b567-d70cfd9917ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/63aa2005-0831-434c-a990-fa523e7ac1e2.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/24d53bf3-3675-4b7c-8911-e74218f6d554.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/a7e18cc9-e917-4344-9226-3a8f00794f7a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
    /* cool machine/void world */
    --void:#0c0e16; --void-2:#0a0b12; --panel:#161924; --panel-2:#10131c;
    --shadow:#08090f;
    /* warm parchment/human world */
    --paper:#d2c9a5; --paper-2:#c9bd92; --paper-3:#bdb086;
    --paper-ink:#42353b; --paper-ink-2:#5d4a44; --paper-edge:#8a7a52;
    /* metal + accent ink (Lost Century) */
    --bronze:#ba9158; --bronze-deep:#5c4226; --bronze-lo:#3a2c18;
    --gold:#b3a555; --gold-bright:#d6c97a;
    --copper:#c77b58; --ember:#ae5d40;
    --brick:#79444a; --teal-deep:#4b726e; --olive:#77743b;
    --sage:#8caba1; --muted:#9a8d88;

    --font-pixel:'Silkscreen', monospace;
    --font-micro:'Press Start 2P', monospace;
    --font-term:'VT323', monospace;
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;width:100%;overflow:hidden;}
  body{
    background:var(--void);
    color:var(--paper);
    font-family:var(--font-term);
    position:relative;
  }
  img{image-rendering:pixelated;}
  /* visible keyboard focus for interactive controls (WCAG 2.4.7) */
  a:focus-visible,button:focus-visible,.cmd:focus-visible,[data-active-terminal]:focus-within{
    outline:2px solid var(--gold-bright);outline-offset:3px;}

  /* ===== Scene: the workshop fills the viewport ===== */
  .scene{position:fixed;inset:0;z-index:0;
    background:#07080d url("/assets/gen/workshop-backdrop.png") center/cover no-repeat;}
  /* legibility veil + one warm pool of candlelight from the left */
  .scene-veil{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(120% 90% at 22% 60%, rgba(199,123,88,.10), transparent 42%),
      linear-gradient(90deg, rgba(8,9,14,.82) 0%, rgba(8,9,14,.34) 34%, rgba(8,9,14,.12) 60%, rgba(8,9,14,.40) 100%),
      linear-gradient(180deg, rgba(8,9,14,.55) 0%, transparent 22%, transparent 72%, rgba(8,9,14,.78) 100%);}
  .vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
    box-shadow:inset 0 0 min(26vmin,260px) min(8vmin,90px) rgba(5,6,11,.92);}

  /* ===== Shell (no-scroll viewport) ===== */
  .shell{position:relative;z-index:6;height:100dvh;width:100%;
    display:flex;flex-direction:column;
    padding:clamp(12px,2.2vmin,26px) clamp(16px,3vw,52px);
    gap:clamp(8px,1.4vmin,18px);}

  /* ===== Top bar ===== */
  header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .brand{display:flex;align-items:center;gap:clamp(8px,1vw,14px);}
  .brand .mark{width:clamp(28px,3.4vmin,38px);height:clamp(28px,3.4vmin,38px);
    display:grid;place-items:center;
    background:linear-gradient(180deg,#241c12,#15110b);
    border:2px solid var(--bronze-deep);
    box-shadow:inset 0 0 0 2px #0c0a07, 0 0 14px rgba(186,145,88,.25);}
  .brand .mark img{width:78%;height:78%;}
  .brand b{font-family:var(--font-micro);font-size:11px;
    color:var(--paper);letter-spacing:.04em;line-height:1.4;
    text-shadow:0 2px 0 var(--shadow);}
  .brand b span{color:var(--bronze);}
  .ghlink{font-family:var(--font-micro);font-size:9px;
    color:var(--paper);text-decoration:none;letter-spacing:.04em;
    display:flex;align-items:center;gap:8px;padding:9px 13px;
    border:2px solid var(--bronze-deep);background:rgba(12,14,22,.72);
    box-shadow:0 2px 0 var(--shadow);transition:.16s;}
  .ghlink:hover{color:var(--gold-bright);border-color:var(--bronze);
    box-shadow:0 2px 0 var(--shadow),0 0 14px rgba(186,145,88,.28);}
  .ghlink svg{width:14px;height:14px;fill:currentColor;}

  /* ===== Main: parchment page (left) + computer rig (right) ===== */
  main{flex:1 1 auto;min-height:0;display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr);
    align-items:center;gap:clamp(18px,3vw,52px);}

  /* ---------- Parchment page ---------- */
  .page{position:relative;min-width:0;align-self:center;
    padding:clamp(18px,2.6vmin,30px) clamp(20px,2.4vw,36px) clamp(16px,2.2vmin,26px);
    color:var(--paper-ink);
    background:#c7bd92 url("/assets/gen/parchment-sheet.png") center/cover;
    border:2px solid var(--bronze);
    box-shadow:
      0 0 0 2px var(--bronze-lo),
      6px 7px 0 rgba(6,7,12,.55),
      inset 0 0 0 2px rgba(120,90,50,.18),
      inset 0 0 46px rgba(92,66,38,.22);
    display:flex;flex-direction:column;gap:clamp(10px,1.7vmin,18px);}
  /* hard pixel corner notches */
  .page::before,.page::after{content:"";position:absolute;width:7px;height:7px;
    background:var(--bronze);z-index:2;}
  .page::before{top:-2px;left:-2px;box-shadow:calc(100% + 4px) 0 0 var(--bronze);}
  .page::after{bottom:-2px;left:-2px;box-shadow:calc(100% + 4px) 0 0 var(--bronze);}

  /* stable real recipe preview — no blink/cross-fade and no framed square */
  .formula{align-self:flex-start;min-width:210px;
    min-height:clamp(38px,5vw,52px);display:flex;align-items:center;}
  .formula .recipe{display:flex;align-items:center;gap:clamp(5px,.7vw,10px);}
  .formula .rune{width:clamp(26px,3vw,36px);height:clamp(26px,3vw,36px);
    image-rendering:pixelated;}
  .formula .rune.r{filter:drop-shadow(0 0 7px rgba(214,201,122,.55));}
  .formula .op,.formula .arrow{font-family:var(--font-term);
    font-size:clamp(17px,2vw,24px);color:var(--bronze-deep);line-height:1;}
  .formula .arrow{color:var(--copper);}
  .formula .rname{font-family:var(--font-micro);font-size:8px;
    color:var(--paper-ink-2);letter-spacing:.06em;margin-left:2px;
    align-self:center;text-transform:lowercase;}


  h1{font-family:var(--font-pixel);font-weight:700;
    font-size:clamp(40px,7.4vmin,84px);line-height:.9;letter-spacing:.005em;
    color:#2a2118;
    text-shadow:2px 2px 0 var(--paper-3), 3px 3px 0 rgba(60,44,24,.28);}
  h1 .b{display:block;color:var(--brick);
    text-shadow:2px 2px 0 var(--paper-3), 3px 3px 0 rgba(60,44,24,.22);}

  .tagline{font-size:clamp(17px,2.3vmin,25px);line-height:1.22;
    color:var(--paper-ink);max-width:30ch;text-wrap:balance;}
  .tagline em{color:var(--brick);font-style:normal;}
  .tagline b{color:#2a2118;font-weight:400;}

  /* install command (the one warm CTA = the copy button) */
  .install{display:flex;flex-direction:column;gap:8px;}
  .install .lbl{font-family:var(--font-micro);font-size:8px;
    color:var(--paper-ink-2);letter-spacing:.1em;}
  .install .lbl b{color:var(--brick);}
  .cmd{display:flex;align-items:stretch;
    background:var(--void-2);border:2px solid var(--bronze-deep);
    box-shadow:0 3px 0 rgba(6,7,12,.5), inset 0 0 22px rgba(0,0,0,.5);
    position:relative;overflow:hidden;cursor:pointer;}
  .cmd .code{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.5ch;
    padding:clamp(9px,1.4vmin,14px) clamp(11px,1.5vmin,16px);
    font-family:var(--font-term);font-size:clamp(15px,1.9vmin,22px);
    color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cmd .code .pr{color:var(--copper);}
  .cmd .code .url{color:var(--gold-bright);}
  .cmd .code .pipe{color:var(--muted);}
  .cmd button{flex:0 0 auto;border:none;border-left:2px solid var(--bronze-deep);
    background:linear-gradient(180deg,var(--copper),var(--ember));color:#1a1009;
    font-family:var(--font-micro);font-size:9px;letter-spacing:.06em;
    padding:0 clamp(13px,1.5vw,20px);cursor:pointer;
    display:flex;align-items:center;gap:7px;transition:transform .08s, filter .16s;white-space:nowrap;}
  .cmd button:hover{filter:brightness(1.08);}
  .cmd button.stamp{transform:translateY(2px);background:linear-gradient(180deg,var(--brick),#5e333a);color:var(--paper);}
  .cmd button svg{width:12px;height:12px;fill:currentColor;}
  .subline{font-size:clamp(13px,1.6vmin,19px);color:var(--paper-ink-2);line-height:1.3;}
  .subline b{color:#2a2118;font-weight:400;}

  /* wax seal + version footer of the card */
  .page-foot{display:flex;align-items:center;gap:12px;margin-top:2px;}
  .page-foot .seal{width:clamp(38px,4.6vmin,52px);height:auto;
    filter:drop-shadow(0 2px 2px rgba(6,7,12,.5));}
  .page-foot .meta{font-family:var(--font-micro);font-size:8px;
    color:var(--paper-ink-2);letter-spacing:.08em;line-height:1.7;}
  .page-foot .meta b{color:var(--brick);}

  /* ---------- The computer rig ---------- */
  .rig{position:relative;justify-self:center;align-self:center;
    width:100%;max-width:min(52vw,820px);aspect-ratio:1 / 1;}
  .rig-machine{display:block;width:100%;height:auto;
    filter:drop-shadow(0 22px 30px rgba(0,0,0,.6));}
  /* live screen overlay — calibrated to the CRT glass of the machine art */
  #terminalShell{position:absolute;left:25.8%;top:13.7%;width:45.2%;height:38%;}
  /* keyboard "alive" flash — lights the C64 keys when you type in the demo */
  .rig-kbd{position:absolute;left:10%;top:58%;width:80%;height:31%;z-index:1;
    pointer-events:none;opacity:0;border-radius:12px;mix-blend-mode:screen;
    background:radial-gradient(85% 120% at 42% 52%, rgba(255,232,150,.85),
      rgba(214,201,122,.42) 48%, transparent 74%);}
  .rig-kbd.lit{animation:kbdpress .22s ease-out;}
  @keyframes kbdpress{0%{opacity:0;}28%{opacity:.85;}100%{opacity:0;}}
  /* minimal "live vm" badge + sound toggle, on the desk under the machine */
  .rig-caption{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:2;
    display:flex;align-items:center;gap:8px;}
  .vm-badge{font-family:var(--font-micro);font-size:9px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--gold-bright);padding:5px 11px;
    background:rgba(10,11,18,.66);border:2px solid var(--bronze-deep);
    box-shadow:0 2px 0 var(--shadow);}
  .snd{width:27px;height:27px;display:grid;place-items:center;cursor:pointer;
    font-family:var(--font-term);font-size:15px;line-height:1;color:var(--sage);
    background:rgba(10,11,18,.66);border:2px solid var(--bronze-deep);
    box-shadow:0 2px 0 var(--shadow);transition:color .15s,border-color .15s;}
  .snd:hover{color:var(--gold-bright);border-color:var(--bronze);}
  .snd.off{color:var(--muted);text-decoration:line-through;}
  @media (prefers-reduced-motion:reduce){.rig-kbd.lit{animation:none;}}

  /* ===== Footer ===== */
  footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
    gap:14px;font-family:var(--font-micro);font-size:8px;
    color:var(--muted);letter-spacing:.05em;
    border-top:1px solid rgba(186,145,88,.22);padding-top:clamp(7px,1vmin,12px);}
  footer .l{display:flex;align-items:center;gap:clamp(9px,1.3vw,18px);flex-wrap:wrap;}
  footer .dot{color:var(--bronze-deep);}
  footer a{color:var(--muted);text-decoration:none;transition:.16s;}
  footer a:hover{color:var(--gold-bright);}
  footer .ver{color:var(--bronze);}

  /* ===== Responsive ===== */
  @media (max-width:940px){
    /* stacked layout can't always fit one screen — allow scroll instead of clipping */
    html,body{overflow:auto;}
    .shell{height:auto;min-height:100dvh;}
    main{grid-template-columns:1fr;grid-template-rows:auto auto;
      gap:clamp(12px,2.4vmin,22px);align-content:center;justify-items:center;}
    .page{order:1;width:100%;max-width:560px;}
    .rig{order:2;max-width:min(86vw,560px);}
    .tagline{max-width:46ch;}
  }
  /* very short wide screens (e.g. phone landscape) also need an escape from clipping */
  @media (max-height:520px){
    html,body{overflow:auto;}
    .shell{height:auto;min-height:100dvh;}
  }
  @media (max-width:560px){
    .shell{padding:12px 14px;gap:8px;}
    h1{font-size:clamp(36px,12vw,52px);}
    .brand b{font-size:9px;}
    .ghlink span{display:none;}
    .rig-caption{font-size:11px;}
    footer .ver{display:none;}
  }
  /* short landscape: shrink the page so the rig always stays visible */
  @media (max-height:560px) and (min-width:941px){
    .formula,.page-foot .meta{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .rig-kbd.lit{animation:none;}
  }