/* Tryll Engine — additions on top of the Claude Design page styles.
   Only things the design export doesn't cover: real form controls,
   long-form article content and small runtime states. */

/* Form controls: the design draws inputs as .in boxes; make real ones match. */
input.in, textarea.in {
    width: 100%; box-sizing: border-box; border: 0; outline: 0; margin: 0;
    color: #181716; -webkit-appearance: none; appearance: none;
}
textarea.in.ta { display: block; padding: 16px; resize: vertical; line-height: 1.5; font-family: inherit; }
input.in::placeholder, textarea.in::placeholder, .sub .ef input::placeholder { color: rgba(24, 23, 22, .45); opacity: 1; }
input.in:focus, textarea.in:focus { box-shadow: inset 0 0 0 1.5px #232E41; }
.sub .ef input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0;
    font: 400 18px/1 'Space Grotesk', sans-serif; color: #181716;
}
.sub .ef:focus-within { box-shadow: inset 0 0 0 1.5px #232E41; }
@media (max-width: 640px) {
    .pg .sub .ef input { flex: 0 0 auto; height: 48px; padding: 0 14px; border-radius: 8px; background: #FFFFFF;
        box-shadow: inset 0 0 0 1px rgba(24, 23, 22, .18); font-size: 16px; }
    .pg .sub .ef input:focus { box-shadow: inset 0 0 0 1.5px #232E41; }
    .pg .sub .ef:focus-within { box-shadow: none; }
}
.ok:focus-visible, .cta:focus-visible { outline: 2px solid #232E41; outline-offset: 3px; }
.ok u a { color: inherit; }
.cta:disabled { opacity: .6; cursor: progress; }
input.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.fmsg { margin: 0; min-height: 1.4em; font: 400 16px/1.4 'Space Grotesk', sans-serif; color: rgba(24, 23, 22, .72); }
.fmsg:empty { display: none; }
.fmsg.err { color: #B42318; }
.fmsg.ok { color: #1E6B3A; }
.sub .fmsg { margin-top: -8px; }
/* "Coming soon" buttons land on /blog#subscribe: keep the card clear of the fixed nav. */
#subscribe { scroll-margin-top: 104px; }

/* Homepage dice: the design sizes the stage by width alone, so on wide or short
   screens it outgrew the window. Cap it so the heading and the die fit on one
   screen under the 72px fixed nav (heading: two lines of clamp(40px,5vw,68px)). */
@media (min-width: 901px) {
    .pg .gzs {
        width: min(100%, max(640px, (100vh - 96px - clamp(82px, 10.2vw, 139px)) * 1440 / 620));
        width: min(100%, max(640px, (100svh - 96px - clamp(82px, 10.2vw, 139px)) * 1440 / 620));
        margin-inline: auto;
    }
}

/* Trailer clips (build.py + assets/js/clips.js): the video sits under the design's
   gradients and chips, and replaces the still picture. */
.clip { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.pg .hero.va .hv-vid.has-clip { background-image: none; }
.ugc .ugv.pair i.has-clip { overflow: hidden; }
.ugc .ugv.pair i.has-clip .clip { object-position: 50% 50%; }
.ugc .ugv.pair .bdg { z-index: 1; }
.snd {
    position: absolute; z-index: 1; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; color: #FFFFFF; cursor: pointer;
    background: rgba(22, 29, 41, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.snd:hover { background: rgba(22, 29, 41, .9); }
.snd:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.snd .on, .snd[aria-pressed="true"] .off { display: none; }
.snd[aria-pressed="true"] .on { display: inline; }

/* Media logos: scrolled by a CSS animation instead of the design's 25 fps logic tick,
   so it stays smooth (same speed: 5 logos per 17.857 s). marquee.js moves the highlight. */
@keyframes tryll-logos {
    from { transform: translateX(calc(-1 * (5 * (var(--tw) + 16px) + var(--tw) / 2))); }
    to { transform: translateX(calc(-1 * (10 * (var(--tw) + 16px) + var(--tw) / 2))); }
}
.pg .mtrack { animation: tryll-logos 17.857s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pg .mtrack { animation: none; } }
/* The logos link to their articles (build.py): the row holds still under the pointer,
   and the logo you point at lights up like the highlighted one. */
.mtrack a.logo { text-decoration: none; }
.marq:hover .mtrack { animation-play-state: paused; }
.pg .mtrack a.logo:hover, .pg .mtrack a.logo:focus-visible { box-shadow: inset 0 0 0 1.5px #232E41; outline: none; }
.pg .mtrack a.logo:hover img, .pg .mtrack a.logo:focus-visible img { filter: none; opacity: 1; }
.pg .mtrack a.logo:hover b, .pg .mtrack a.logo:focus-visible b { color: #181716; opacity: 1; }

/* Header: the seven links stop fitting next to the buttons around 1100px (they wrapped onto two
   lines below 1000px). Use the menu button there; build.py repeats the design's phone menu
   rules for 641-1100px, and on those widths the menu opens as a panel on the right. */
@media (max-width: 1100px) {
    .pg .nav { grid-template-columns: 1fr auto; }
    .pg .nav .lk { display: none; }
}
@media (min-width: 641px) and (max-width: 1100px) {
    .pg .nav .mnav .mnc { left: auto; width: min(420px, calc(100% - 24px)); }
}

/* Contact die: in the one-column layout (641-1100px) the design left it under the form card,
   where only a sliver showed above the footer. Put it beside the heading instead, the way
   the phone layout does. */
@media (min-width: 641px) and (max-width: 1100px) {
    .pg .ct > .pd20 { left: auto; right: -40px; top: 40px; bottom: auto; width: 260px; height: 260px; }
}

/* "How to get started": the screenshot sits in the middle of the card's height, not at the top. */
.pg .gs .gim { align-self: center; }

/* Use-case cards: when the text column was taller, the design stretched the 16:10 picture to
   the row height, which made it wider than its column and pushed it over the text. Keep it
   16:10 at the column's width, centred next to the text. */
.pg .ugr.st .ugc .ugv { align-self: center; width: 100%; }

/* "How to get started": the design fixes the screenshot column at 538px, so on narrower
   screens the text shrank to a few words per line. Split the row in proportion instead
   (the screenshot is still about 538px at the default width). */
@media (min-width: 901px) {
    .pg .gs .gin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) !important; }
}

/* "How to get started" ends with a button (added by build.py). */
.gsw .gcta { display: flex; justify-content: center; margin-top: 48px; }
@media (max-width: 640px) { .gsw .gcta { margin-top: 32px; } }

/* /features number rows ("Starts at 1.6 GB", "Faster than speech"): the design gave each
   number 46% of the row, which left the labels far off. The numbers share one column
   instead, as wide as the widest of them. */
.pg .tv.vs .vr b { flex: 0 0 auto; min-width: 2.2em; }
@supports (grid-template-columns: subgrid) {
    .pg .tv.vs { display: grid; grid-template-columns: max-content 1fr; align-content: center; }
    .pg .tv.vs .vr { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 20px; }
    .pg .tv.vs .vr b { min-width: 0; }
    .pg .tv.vs > small { grid-column: 1 / -1; }
}
/* /demo "About this game" (build.py demo_page): the design's game-section layout, split like
   the system requirements below it: heading on the left, the text in the wider column. */
.pg .ab.gabt { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.pg .gab { max-width: 760px; }
.pg .gab h3 { margin: 48px 0 14px; font: 500 26px/1.2 'Space Grotesk', sans-serif; letter-spacing: -0.02em; color: #181716; }
.pg .gab h3:first-child { margin-top: 0; }
.pg .gab p, .pg .gab li { font: 400 18px/1.55 'Space Grotesk', sans-serif; color: rgba(24, 23, 22, .72); }
.pg .gab p { margin: 0 0 16px; }
.pg .gab ul { margin: 0 0 16px; padding-left: 1.2em; }
.pg .gab li { margin: 0 0 10px; padding-left: .2em; }
.pg .gab li::marker { color: rgba(24, 23, 22, .4); }
.pg .gab strong { font-weight: 500; color: #181716; }
.pg .gab a { color: #181716; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
    .pg .ab.gabt { display: block; }
    .pg .ab.gabt .gsh { position: static; padding-right: 0; margin-bottom: var(--sh); }
}
@media (max-width: 640px) {
    .pg .gab h3 { margin-top: 36px; font-size: 22px; }
    .pg .gab p, .pg .gab li { font-size: 16px; }
}

/* Wide screens: content stops at 1600px and centres, while backgrounds still run edge to edge.
   The design only set the side margin (--gx), so on an ultrawide screen everything,
   pictures included, stretched across the whole window. */
.pg { --gx0: clamp(16px, 3.06vw, 44px); --gx: max(var(--gx0), calc((100vw - 1600px) / 2)); }
/* Blocks with their own max-width keep the design's margin: inside one, the wider margin
   would only squeeze the content ("How to get started", /download requirements, the
   privacy and post headers, a post's lead picture). */
.pg .gsw, .pg .rq, .pg .phc, .pg .pimg { --gx: var(--gx0); }
/* ...and the homepage hero keeps its 1440 layout inside that width: its video ended at the
   window's edge, drifting away from the text; it now ends with the content and fades out. */
@media (min-width: 1689px) {
    .pg .hero.va.ue .hv-vid { right: calc((100vw - 1600px) / 2 - 44px); left: calc(100% - 1156px - ((100vw - 1600px) / 2 - 44px)); }
    .pg .hero.va.ue .hv-vid::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(270deg, #161D29 0%, rgba(22, 29, 41, 0) 16%); }
}

/* The hero's badges and the footer's "Epic MegaGrants recipient" are links (build.py badge_links). */
.pg .hv-bd a, .pg .fr a.cp { color: inherit; text-decoration: none; }
.pg .hv-bd a:not(.hbl):hover, .pg .fr a.cp:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg .hv-bd .hbl { display: flex; }

/* Phones (the Smart NPCs clips are about 145px wide there): the "Before" / "With Tryll" label
   and the sound button shrink so they no longer cover the top of the clips. */
@media (max-width: 640px) {
    .ugc .ugv.pair .bdg { left: 6px; top: 6px; height: 22px; padding: 0 7px; border-radius: 5px; font-size: 12px; line-height: 22px; }
    .ugc .ugv.pair .snd { top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 6px; }
    .ugc .ugv.pair .snd svg { width: 14px; height: 14px; }
}

/* "Media about us" on phones: "Latest news" goes under the heading instead of squeezing both
   onto two lines side by side. */
@media (max-width: 640px) {
    .pg .media .mh { flex-wrap: wrap; gap: 8px 24px; }
    .pg .media .mh a { white-space: nowrap; }
}

/* Pricing card on narrow phones: "Coming soon · Get notified" is longer than the design's label
   and ran past the card; a little less padding and a smaller label keep it inside. */
@media (max-width: 400px) {
    .pg .prw .pf { padding-left: 20px; padding-right: 20px; }
    .pg .prw .pf .cta { max-width: 100%; gap: 12px; padding-left: 18px; font-size: 16px; }
}

/* /demo gallery: a fixed 16:9 view, like a store page. The design sized it by the window's
   height, so on shorter screens it was wider than the screenshots and cropped them. */
.pg .gmain { aspect-ratio: 16 / 9 !important; height: auto !important; }
.pg .gmain .gim { object-fit: contain; }
.pg .gth .gtb { height: auto !important; aspect-ratio: 16 / 9 !important; }
/* The design hid the sidebar's logo picture and tags on short screens to fit its height-capped
   gallery; at 16:9 the sidebar is as tall as the gallery, so they stay. */
@media (min-width: 901px) and (max-height: 820px) {
    .pg .gsd .gcap { display: block; }
    .pg .gsd .gtags { display: flex; }
}

/* Client quotes (config.CLIENT_QUOTES): with two cards, two share the row on wide screens
   too (the design shows three); studio and person names link out. */
@media (min-width: 1101px) { .pg .cls:not(:has(.track > .card:nth-child(3))) { --v: 2; } }
/* A card's own picture ('picture', 16:9) is shown whole, not as the design's cropped strip. */
.pg .cls .track > .card:nth-child(n) .shot.pic { height: auto !important; aspect-ratio: 16 / 9; overflow: hidden; background: #232E41 !important; }
.pg .cls .track > .card:nth-child(n) .shot.pic::before { content: none; }
.pg .cls .shot.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg .cls .card h3 a, .pg .cls .card .m a { color: inherit; text-decoration: none; }
.pg .cls .card h3 a:hover, .pg .cls .card .m a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Without the client quotes (config.CLIENT_QUOTES), "Media about us" opens its section: drop
   the design's double gap that kept it apart from the quote carousel. */
.pg .cls > .media:first-child { margin-top: 0 !important; }

/* The row to compare with (build.py speech_row) is muted: it isn't a model. */
.pg .tv.vs .vr.ref b, .pg .tv.vs .vr.ref span { color: rgba(24, 23, 22, .45); }

/* Blog listing: the covers are 4:3 (a few are square). The design's 16:10 box filled with
   them cut off their top and bottom, often the headline; the box takes their shape and
   shows each cover whole, on the design's navy where a cover has another shape. */
.pg .pc .cv.ph { aspect-ratio: 4 / 3; background-color: #232E41; background-position: center; background-size: contain; background-repeat: no-repeat; }

/* Blog posts: the lead picture (16:9, 4:3 on phones) and the galleries (4:3) were cropped
   to fill their boxes, cutting off banner text and tall photos. Show each image whole at
   its own shape; a tall one is capped in height and centred. */
.pg .pimg img { width: auto; max-width: 100%; height: auto; max-height: min(720px, 80vh); margin: 0 auto; aspect-ratio: auto; object-fit: contain; }
.pg .gal { align-items: start; }
.pg .gal img { height: auto; aspect-ratio: auto; object-fit: contain; }

/* Blog articles: elements the design sample post didn't use. */
.pb h2 { margin: 48px 0 20px; font: 400 32px/1.15 'Space Grotesk', sans-serif; letter-spacing: -0.025em; }
.pb h3 { margin: 36px 0 16px; font: 500 24px/1.25 'Space Grotesk', sans-serif; letter-spacing: -0.015em; }
.pb.post ul, .pb.post ol { margin: 0 0 24px; padding-left: 1.3em; }
.pb.post li { margin: 0 0 10px; padding-left: .2em; }
.pb.post li::marker { color: rgba(24, 23, 22, .45); }
.pb strong { font-weight: 500; }
.pb code { font: 400 .9em/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: #F3F4F6; padding: 2px 6px; border-radius: 6px; }
.pb .fig { margin: 40px 0; }
.pb .fig img { display: block; width: 100%; height: auto; border-radius: 16px; }
.pb .video-embed { display: grid; gap: 16px; margin: 40px 0; }
.pb .video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 16px; background: #161D29; }