/* The owner's own style from his file "Meet Your Assistant", every rule and every value as he wrote it. Two things
   are different, and only these: each selector begins with html.mya (so the site's plain page is left alone until
   the piece is on), and the three font families are files in this folder instead of another host's. The first
   block is the small style his file carries in its head; the second is his own. The port's own lines are at the end. */

/* the fonts (SIL Open Font License; the licence texts lie beside them) */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(caveat-latin-ext-500-normal.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;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(caveat-latin-500-normal.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(instrument-sans-latin-ext-400-normal.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(instrument-sans-latin-400-normal.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(instrument-sans-latin-ext-500-normal.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(instrument-sans-latin-500-normal.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(instrument-sans-latin-ext-600-normal.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(instrument-sans-latin-600-normal.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;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(young-serif-latin-ext-400-normal.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;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(young-serif-latin-400-normal.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;
}

/* ---- the style in his file's head ---- */
html.mya{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html.mya{scroll-padding-top:env(safe-area-inset-top,0px)}html.mya body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}html.mya img{max-width:100%}html.mya [hidden]:not([hidden=until-found i]){display:none!important}

/* ---- his style ---- */
html.mya {
  color-scheme: dark;
  --night: #0a1024;
  --ink: #050814;
  --paper: #f7ecd6;
  --muted: #cfc9bb;
  --gold: #ffc46b;
  --gold-ink: #1d1404;
  --green: #19a06e;
  --peach: #ff9d7a;
  --line: rgba(247, 236, 214, .26);
  --field: rgba(5, 8, 20, .62);
  --serif: "Young Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
}
html.mya, html.mya body { height: 100%; }
html.mya { font-size: 100%; }
html.mya body {
  background: var(--night); color: var(--paper);
  font-family: var(--sans); font-size: 1.125rem; line-height: 1.5;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
html.mya *, html.mya *::before, html.mya *::after { box-sizing: border-box; }

html.mya #stage { position: fixed; inset: 0; background: var(--night); }
html.mya #scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
html.mya #scrim {
  position: absolute; inset: 0; pointer-events: none; transition: opacity .8s ease;
  background:
    linear-gradient(90deg, rgba(5,8,20,.84) 0%, rgba(5,8,20,.55) 24%, rgba(5,8,20,0) 50%),
    linear-gradient(0deg, rgba(5,8,20,.45) 0%, rgba(5,8,20,0) 34%);
}
html.mya #flash { position: absolute; inset: 0; background: #fff3dc; opacity: 0; pointer-events: none; }
html.mya body[data-beat="done"] #scrim {
  background: linear-gradient(0deg, rgba(5,8,20,.88) 0%, rgba(5,8,20,.6) 34%, rgba(5,8,20,0) 66%);
}
html.mya body.sending #scrim { opacity: 0; }

html.mya .top {
  position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 18px var(--gutter);
}
html.mya .brand { font-family: var(--serif); font-size: 1.2rem; letter-spacing: .01em; }
html.mya .top-r { display: flex; align-items: center; gap: 1.1rem; font-size: 1rem; color: var(--muted); }
html.mya #snd {
  font: 500 1rem/1 var(--sans); color: var(--paper); background: rgba(5,8,20,.45);
  border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1rem; cursor: pointer;
}

html.mya #cap {
  position: fixed; z-index: 2; left: var(--gutter); bottom: clamp(24px, 8vh, 84px);
  width: min(39rem, 46vw); max-height: calc(100% - 110px); overflow-y: auto;
  transition: opacity .45s ease;
}
html.mya body.sending #cap { opacity: 0; pointer-events: none; }
html.mya #cap section { display: flex; flex-direction: column; gap: 1.15rem; }
html.mya #cap section.enter > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
html.mya #cap section.enter > *:nth-child(2) { animation-delay: .08s; }
html.mya #cap section.enter > *:nth-child(3) { animation-delay: .16s; }
html.mya #cap section.enter > *:nth-child(4) { animation-delay: .24s; }
html.mya #cap section.enter > *:nth-child(5) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

html.mya h1 {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.7rem); line-height: 1.06; letter-spacing: -.012em;
  text-wrap: balance; text-shadow: 0 2px 24px rgba(5,8,20,.6);
  overflow-wrap: anywhere;
}
html.mya #cap p { margin: 0; max-width: 34rem; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); color: var(--paper); text-shadow: 0 1px 12px rgba(5,8,20,.7); }
html.mya #cap p.soft { color: var(--muted); font-size: 1.05rem; }
html.mya .row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }

html.mya .btn {
  font: 600 1.125rem/1.1 var(--sans); min-height: 3.4rem; padding: .95rem 1.5rem;
  border-radius: .8rem; border: 1px solid transparent; cursor: pointer; text-align: center;
}
html.mya .btn-p { background: var(--gold); color: var(--gold-ink); box-shadow: 0 8px 34px rgba(255,196,107,.28); }
html.mya .btn-p:hover { background: #ffd28c; }
html.mya .btn-s { background: rgba(5,8,20,.5); color: var(--paper); border-color: var(--line); }
html.mya .btn-s:hover { border-color: var(--paper); }
html.mya .btn-t { background: none; border: 0; color: var(--muted); font: 500 1.05rem/1 var(--sans); padding: .9rem .3rem; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; }
html.mya .btn-t:hover { color: var(--paper); }
html.mya :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

html.mya form { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
html.mya label { font-size: 1.05rem; color: var(--muted); }
html.mya .field {
  display: flex; align-items: baseline; gap: .15rem; background: var(--field);
  border: 1px solid var(--line); border-radius: .8rem; padding: 0 1.1rem; max-width: 30rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.mya .field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,196,107,.28); }
html.mya .field input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--paper);
  font: 400 1.65rem/1.2 var(--serif); padding: .95rem 0;
}
html.mya .field input::placeholder { color: rgba(207,201,187,.5); }
html.mya .suffix { font-family: var(--serif); font-size: 1.3rem; color: var(--muted); white-space: nowrap; }
html.mya .chips { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; color: var(--muted); font-size: 1rem; }
html.mya .chip {
  font: 500 1.05rem/1 var(--sans); color: var(--paper); background: rgba(5,8,20,.45);
  border: 1px solid var(--line); border-radius: 999px; padding: .65rem 1.05rem; cursor: pointer;
}
html.mya .chip:hover { border-color: var(--gold); }
html.mya .hint { color: var(--peach); font-size: 1.05rem; margin: 0; }

html.mya .asks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-width: 34rem; }
html.mya .asks li {
  font-family: var(--serif); font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); line-height: 1.3;
  padding: .7rem 1rem; background: var(--field); border-left: 3px solid var(--gold); border-radius: 0 .6rem .6rem 0;
}
html.mya #nightline { font-family: var(--serif); font-size: 1.25rem; color: var(--gold); font-variant-numeric: tabular-nums; min-height: 1.5em; }

html.mya .addr-out {
  font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); color: var(--gold);
  user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; min-width: 0;
}
html.mya body[data-beat="done"] #cap {
  left: 50%; transform: translateX(-50%); width: min(46rem, calc(100% - 32px)); text-align: center;
}
html.mya body[data-beat="done"] #cap section { align-items: center; }
html.mya body[data-beat="done"] #cap .row { justify-content: center; }
html.mya body[data-beat="done"] h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem); }

html.mya body.no-gl #scene { display: none; }
html.mya body.no-gl #stage {
  background:
    radial-gradient(60rem 34rem at 78% 30%, rgba(255,196,107,.2), rgba(255,196,107,0) 70%),
    linear-gradient(180deg, #0a1024 0%, #16224a 62%, #3a2d58 100%);
}
html.mya body.no-gl[data-beat="done"] #stage {
  background: linear-gradient(180deg, #24376e 0%, #b9708a 48%, #ffb37e 76%, #2a1c18 100%);
}

@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  html.mya #scrim { background: linear-gradient(0deg, rgba(5,8,20,.97) 0%, rgba(5,8,20,.9) 40%, rgba(5,8,20,.45) 56%, rgba(5,8,20,0) 70%); }
  html.mya body[data-beat="done"] #scrim { background: linear-gradient(0deg, rgba(5,8,20,.95) 0%, rgba(5,8,20,.8) 44%, rgba(5,8,20,0) 72%); }
  html.mya .top { padding: 12px 16px; }
  html.mya .brand { font-size: 1.05rem; }
  html.mya .top-r { gap: .7rem; font-size: .95rem; }
  html.mya #snd { padding: .5rem .8rem; font-size: .95rem; }
  html.mya #cap {
    left: 0; right: 0; bottom: 0; width: auto; max-height: 62%;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  html.mya body[data-beat="done"] #cap { left: 0; transform: none; width: auto; }
  html.mya #cap section { gap: .85rem; }
  html.mya h1 { font-size: clamp(1.85rem, 1.2rem + 3.6vw, 2.6rem); }
  html.mya body[data-beat="done"] h1 { font-size: clamp(2.5rem, 1.4rem + 6vw, 3.6rem); }
  html.mya #cap p { font-size: 1.08rem; line-height: 1.45; }
  html.mya .field input { font-size: 1.4rem; padding: .8rem 0; }
  html.mya .suffix { font-size: 1.1rem; }
  html.mya .btn { min-height: 3.2rem; padding: .85rem 1.2rem; }
  html.mya .asks li { padding: .55rem .8rem; font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.mya #cap section.enter > * { animation: none; }
  html.mya #scrim, html.mya #cap { transition: none; }
}

/* ==== THE PORT'S OWN LINES: nothing from here down is in his file ==== */
/* the piece's script looks for this before it takes the page over */
html { --agent-story: 1; }
/* while the scripts come down, his night instead of a flash of the plain page; the plain page shows by itself
   after four seconds if the piece never starts, and at once if it stands off */
@media (scripting: enabled) {
  html:not(.mya):not(.mya-off) body { background: #0a1024; }
  html:not(.mya):not(.mya-off) body > main { animation: mya-wait 4s step-end both; }
}
@keyframes mya-wait { from { visibility: hidden; } to { visibility: visible; } }
/* the site's plain page gives way to his */
html.mya body > main:not(#cap) { display: none; }
/* the real form on his last screen: the site's own lines, in his dress */
html.mya #agent-buy { display: flex; flex-direction: column; gap: .7rem; }
html.mya #cap a { color: inherit; text-decoration: underline; text-underline-offset: .22em; }
html.mya #cap a:hover { color: var(--paper); }
/* any other field the page puts in the real form: its heading as his label, its box as his field, a choice as his chips */
html.mya #agent-buy h2 { font: 400 1.05rem/1.5 var(--sans); color: var(--muted); margin: 0; letter-spacing: 0; text-shadow: none; }
html.mya #agent-buy .pick { display: flex; flex-wrap: wrap; gap: .55rem; }
html.mya #agent-buy .pick label {
  display: inline-flex; align-items: center; gap: .5rem; font: 500 1.05rem/1 var(--sans); color: var(--paper);
  background: rgba(5,8,20,.45); border: 1px solid var(--line); border-radius: 999px; padding: .65rem 1.05rem; cursor: pointer;
}
html.mya #agent-buy .pick label:hover { border-color: var(--gold); }
html.mya #agent-buy .pick input { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--gold); }
html.mya #agent-buy .pick { align-items: center; }
html.mya #agent-buy .pick h2 { margin-right: .25rem; }
html.mya #agent-buy .ph { display: flex; flex-direction: column; gap: .55rem; }
html.mya #agent-buy .ph p.soft { font-size: .95rem; line-height: 1.4; }
/* the site's AI line (#agent-ai / p.ai): small and quiet, under the Hire button and at the foot of the done screen */
html.mya #cap p.soft.ai { font-size: .75rem; line-height: 1.4; margin-top: .25rem; }
html.mya #agent-buy .field input { font-size: 1.25rem; padding: .62rem 0; }
/* (Forge-5, Oct 15 2026) the site's free-trial line (#agent-free's words) beside his first Continue: small, on the button's own line */
html.mya #cap .row p.free { flex: 1 1 8.5rem; font-size: .95rem; line-height: 1.35; }
/* (Forge-5, Oct 15 2026) on a phone his first screen is taller than 62% of a small one (an iPhone SE with Safari's bars: 553px), so
   Continue stood below the panel's fold on every small phone: the name screen may rise to just under the top line */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  html.mya body[data-beat="name"] #cap { max-height: calc(100% - 60px - env(safe-area-inset-top, 0px)); }
}
/* (Forge-5, Oct 15 2026) the same for his other three screens (computer, tools, last): the tools screen's list put Continue below the
   62% fold at 375x553, 375x667, 390x664 and 360x640; each may rise to just under the top line (the taller last screen's own
   html.mya-more rule below still wins) */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  html.mya body[data-beat="computer"] #cap, html.mya body[data-beat="tools"] #cap, html.mya body[data-beat="ready"] #cap {
    max-height: calc(100% - 60px - env(safe-area-inset-top, 0px));
  }
}
/* with more fields the last screen is taller than his: closer set, kept clear of the top line, and it scrolls inside
   itself if a screen is too short; on a phone it may rise to the top line and carries its own dark behind it */
html.mya-more #agent-buy, html.mya-more #agent-buy form { gap: .55rem; }
html.mya-more body[data-beat="ready"] #cap { max-height: calc(100% - 92px - clamp(24px, 8vh, 84px)); }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  html.mya-more body[data-beat="ready"] #cap {
    max-height: calc(100% - 56px); padding-top: 2.6rem;
    background: linear-gradient(0deg, rgba(5,8,20,.93) 0%, rgba(5,8,20,.93) calc(100% - 3.4rem), rgba(5,8,20,0) 100%);
  }
}
/* the page after a free sign-up: the page's own sentence carries the visitor's address, which may be long */
html.mya-done body[data-beat="done"] #cap p { overflow-wrap: anywhere; }
/* the real domain is four letters longer than his placeholder: the top line keeps to one line on a phone */
html.mya .top-r { white-space: nowrap; }
@media (max-width: 400px) { html.mya .brand { font-size: .98rem; } html.mya .top { gap: .5rem; } }
/* (Forge-5, Oct 15 2026) the visitor's email on his name screen (the real form's box, moved up): the last screen's closer box */
html.mya #name-form .field.mail input { font: 400 1.25rem/1.2 var(--serif); padding: .62rem 0; }
/* with the email there too, his name screen is ~40px taller than a 553px-high phone (an iPhone SE with Safari's bars): on short
   phones it is set closer (smaller heading, closer gaps, slimmer boxes) so Continue stays on screen, nothing scrolled */
@media (max-width: 760px) and (max-height: 600px), (max-aspect-ratio: 9/10) and (max-height: 600px) {
  html.mya body[data-beat="name"] #cap section { gap: .6rem; }
  html.mya body[data-beat="name"] #cap h1 { font-size: 1.6rem; }
  html.mya #name-form { gap: .5rem; }
  html.mya #name-form .field input { padding: .6rem 0; }
  html.mya #name-form .field.mail input { padding: .5rem 0; }
}