/* Go Offbook, whole site.
   Ported from the "Go Offbook Landing" Claude design project, 2026-08-22,
   then extended to cover the inner pages (tryit, flashcards, showcase,
   hints, signup) when they came off Bootstrap.
   Palette: bone #F5F3EE, band #D2D0C6, gold #D9A21B, ink #201e1d. */

*, *::before, *::after { box-sizing: border-box; }

/* Several components below set display, which would otherwise beat the
   browser's default rule for [hidden] and leave hidden elements visible.
   The JS toggles .hidden on buttons and cards, so this has to win. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: #F5F3EE;
    color: #201e1d;
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: #8A6410; text-underline-offset: 3px; }
a:hover { color: #6E4F0C; }
:focus-visible { outline: 2px solid #D9A21B; outline-offset: 3px; }
::selection { background: rgba(217, 162, 27, .28); }

img { max-width: 100%; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 96px 40px 0; }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 700;
    padding: 17px 30px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease;
}
.btn .arrow { font-weight: 400; }
.btn-sm { font-size: 14px; padding: 12px 22px; gap: 8px; }
.btn-block { width: 100%; }

.btn-gold { background: #D9A21B; color: #201e1d; box-shadow: 0 12px 26px rgba(184, 133, 15, .32); }
.btn-gold:hover { background: #C08F14; color: #201e1d; }
.btn-sm.btn-gold { box-shadow: 0 6px 16px rgba(184, 133, 15, .30); }

.btn-quiet { background: rgba(255, 255, 255, .72); color: #2A2622; padding: 17px 28px; }
.btn-quiet:hover { background: #fff; color: #2A2622; }

.btn-plain { background: #F0EEE7; color: #2A2622; font-size: 14.5px; padding: 13px 24px; }
.btn-plain:hover { background: #E6E3DA; color: #2A2622; }

.btn-ink { background: #201e1d; color: #fff; }
.btn-ink:hover { background: #3A3630; color: #fff; }

.btn-ghost { background: rgba(32, 30, 29, .12); color: #201e1d; padding: 17px 28px; }
.btn-ghost:hover { background: rgba(32, 30, 29, .2); color: #201e1d; }

/* ---------- header ---------- */

.band {
    background: #D2D0C6;
    border-radius: 0 0 40px 40px;
    padding-bottom: 96px;
}

.site-header { max-width: 1240px; margin: 0 auto; padding: 26px 40px; }

.header-pill {
    background: rgba(255, 255, 255, .62);
    border-radius: 999px;
    padding: 12px 14px 12px 24px;
    display: flex;
    align-items: center;
    gap: 36px;
    box-shadow: 0 8px 24px rgba(60, 52, 44, .10);
}
.brand { display: block; line-height: 0; }
.brand img { height: 30px; width: auto; }

.header-nav { display: flex; gap: 30px; margin-left: 12px; }
.header-nav a,
.header-login {
    color: #3A3630;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.header-nav a:hover, .header-login:hover { color: #201e1d; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }

/* ---------- hero ---------- */

.hero {
    max-width: 1240px;
    margin: 0 auto;
    padding: 44px 40px 0;
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    gap: 64px;
    align-items: center;
}

.eyebrow-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .66);
    border-radius: 999px;
    padding: 7px 16px 7px 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8A6410;
    margin-bottom: 26px;
}
.eyebrow-chip .dot { width: 7px; height: 7px; border-radius: 999px; background: #D9A21B; }

.hero-copy h1 {
    font-weight: 800;
    font-size: 62px;
    line-height: 1.04;
    letter-spacing: -.03em;
    margin: 0 0 24px;
    text-wrap: pretty;
    color: #1C1A18;
}
.hero-lead {
    font-size: 18.5px;
    line-height: 1.6;
    max-width: 29em;
    color: #4A443D;
    margin: 0 0 34px;
}
.hero-cta { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.hero-note { font-size: 13.5px; color: #6B645B; }

.hero-stats { display: flex; gap: 44px; margin-top: 52px; flex-wrap: wrap; }
.stat-title { font-weight: 800; font-size: 29px; letter-spacing: -.02em; color: #1C1A18; }
.stat-sub { font-size: 12.5px; color: #6B645B; margin-top: 2px; }

/* ---------- demo player ---------- */

.demo-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 6px;
}
.demo-caption-left {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7A7266;
}
.demo-caption-right { font-size: 12.5px; font-weight: 600; color: #7A7266; }

.demo-card {
    background: #FCFBF7;
    border-radius: 22px;
    box-shadow: 0 2px 3px rgba(60, 52, 44, .06),
                0 30px 70px -14px rgba(60, 52, 44, .42),
                0 1px 0 rgba(255, 255, 255, .9) inset;
    overflow: hidden;
}
.demo-head {
    padding: 24px 28px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.demo-role {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8A6410;
    margin-bottom: 7px;
}
.demo-scene { font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -.025em; }
.demo-count {
    background: #F0EEE7;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 11.5px;
    font-weight: 700;
    color: #6B645B;
    white-space: nowrap;
}

.demo-lines {
    padding: 2px 28px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 318px;
}
.demo-line {
    cursor: pointer;
    border-left: 3px solid transparent;
    padding: 2px 0 2px 16px;
    opacity: .62;
    transition: opacity .2s ease;
}
.demo-line.is-past { opacity: .34; }
.demo-line.is-current { opacity: 1; border-left-color: #C9C4B8; }
.demo-line.is-current.is-mine { border-left-color: #D9A21B; }
.demo-speaker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8B8378;
    margin-bottom: 4px;
}
.demo-line.is-mine .demo-speaker { color: #8A6410; }
.demo-text {
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: -.015em;
    color: #201e1d;
}
.demo-line.is-current .demo-text { font-size: 20px; font-weight: 700; }
.demo-line.is-covered .demo-text { filter: blur(5.5px); }

.demo-controls {
    padding: 14px 28px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid #EFECE4;
}
.demo-play {
    width: 52px;
    height: 52px;
    flex: none;
    background: #D9A21B;
    color: #201e1d;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    padding: 0;
    box-shadow: 0 10px 22px rgba(184, 133, 15, .34);
}
.demo-play:hover { background: #C08F14; }
.demo-meter { flex: 1; min-width: 0; }
.demo-meter-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.demo-status { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.demo-counter { font-size: 12px; font-weight: 600; color: #7A7266; font-variant-numeric: tabular-nums; }
.demo-track { height: 5px; background: #E6E3DA; border-radius: 999px; overflow: hidden; }
.demo-fill {
    height: 100%;
    background: #D9A21B;
    width: 0;
    /* The bar is driven by which line we are on, not a frame loop, so let CSS
       carry it between lines instead. */
    transition: width .45s linear;
}

.demo-hide {
    flex: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 9px 14px;
    border-radius: 999px;
    background: #F0EEE7;
    color: #6B645B;
}
.demo-hide.is-on { background: #F7EDD3; color: #8A6410; }
.demo-hide:hover { background: #EFE6D2; }
/* The signed-in member's name. Reads like the nav beside it but is not a
   link, because there is nowhere better for it to go than where they are. */
/* The read-through page. The landing page gives the player a column of its
   own; here it is the whole page, so it needs its own measure. */
.run-stage { max-width: 720px; }
.run-stage .demo-card { margin-top: 0; }

/* A stage direction is not a line anybody says, so it does not look like one
   and it is never covered. */
.demo-line.is-expo .demo-speaker { color: #A29A8D; }
.demo-line.is-expo .demo-text { font-style: italic; color: #6B645B; font-weight: 500; }
.demo-line.is-current.is-expo .demo-text { font-size: 17px; font-weight: 600; }

/* The second, quieter route into a scene from the list. */
.scene-alt {
    font-size: 12px;
    font-weight: 600;
    color: #8B8378;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.header-who {
    font-size: 13px;
    font-weight: 600;
    color: #6B645B;
    padding: 0 4px;
    white-space: nowrap;
}

.demo-hide[disabled] { opacity: .45; cursor: not-allowed; }
.demo-hide[disabled]:hover { background: #F0EEE7; }

/* Two pills stacked, so the microphone toggle fits beside the meter without
   squeezing it onto a second row. */
.demo-toggles {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.demo-toggles .demo-hide { padding: 7px 12px; text-align: center; }

/* While the microphone is live your line starts recessive and each word comes
   up to full ink as you say it. Only the line being said is treated this way,
   so the rest of the scene reads normally. */
.demo-card.is-listening .demo-line.is-current.is-mine .demo-text .w {
    color: #C0B9AC;
    transition: color .14s ease;
}
.demo-card.is-listening .demo-line.is-current.is-mine .demo-text .w.is-said { color: #201e1d; }

.demo-foot { font-size: 12.5px; color: #7A7266; margin-top: 12px; padding: 0 6px; }

/* ---------- section furniture ---------- */

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8A6410;
    margin-bottom: 14px;
}
.section-intro { margin-bottom: 44px; }
.section-intro.narrow { max-width: 22em; }
.section-intro h2,
.features-intro h2 {
    font-weight: 800;
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -.03em;
    margin: 0;
}
.h2-sm { font-weight: 800; font-size: 36px; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 16px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-3.tight { gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }

/* ---------- how it works ---------- */

.step-card {
    background: #fff;
    border-radius: 22px;
    padding: 34px 30px 32px;
    box-shadow: 0 1px 2px rgba(60, 52, 44, .05), 0 18px 40px -20px rgba(60, 52, 44, .3);
}
.step-num {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: #F7EDD3;
    color: #8A6410;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.step-card h3 { font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin: 0 0 10px; }
.step-card p { margin: 0; color: #4A443D; }

/* ---------- features ---------- */

.features-intro {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 56px;
    align-items: end;
    margin-bottom: 48px;
}
.features-intro p { font-size: 18px; line-height: 1.6; color: #4A443D; margin: 0; }

.feature-card { background: #fff; border-radius: 20px; padding: 30px 28px; }
.feature-num {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #8A6410;
    margin-bottom: 14px;
}
.feature-card h4 { font-weight: 800; font-size: 19px; margin: 0 0 8px; letter-spacing: -.015em; }
.feature-card p { margin: 0; color: #4A443D; font-size: 14.5px; }

/* ---------- saved scenes ---------- */

.saved-panel {
    background: #D2D0C6;
    border-radius: 32px;
    padding: 56px 52px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: center;
}
.saved-panel p { color: #4A443D; margin: 0 0 12px; }
.saved-panel p:last-child { margin-bottom: 0; }

.saved-card {
    background: #FCFBF7;
    border-radius: 22px;
    box-shadow: 0 2px 3px rgba(60, 52, 44, .06), 0 28px 60px -18px rgba(60, 52, 44, .4);
    overflow: hidden;
}
.saved-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 14px;
}
.saved-card-title { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.saved-card-sub { font-size: 12px; font-weight: 600; color: #7A7266; }

.saved-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.saved-table th {
    text-align: left;
    padding: 8px 10px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8B8378;
}
.saved-table td { padding: 12px 10px; }
.saved-table th.pad-l, .saved-table td.pad-l { padding-left: 24px; }
.saved-table th.pad-r, .saved-table td.pad-r { padding-right: 24px; }
.saved-table td.last { padding-bottom: 16px; }
.saved-table tr.alt { background: #F7F5F0; }
.saved-table .strong { font-weight: 600; }
.saved-table .num { font-variant-numeric: tabular-nums; }
.saved-table .good { color: #6E4F0C; font-weight: 600; }
.saved-table .muted { color: #7A7266; }

/* ---------- pricing ---------- */

.pricing { max-width: none; }
.price-suffix { font-size: 16px; font-weight: 600; color: #7A7266; letter-spacing: 0; }
.price-card-features { background: #FCFBF7; border: 1px solid #E6E3DA; }
.price-card-features .tick-list { margin-bottom: 0; font-size: 14.5px; }
.price-card { background: #fff; border-radius: 22px; padding: 34px 30px; }
.price-card.featured {
    background: #FCFBF7;
    box-shadow: 0 2px 3px rgba(60, 52, 44, .06), 0 26px 56px -18px rgba(60, 52, 44, .4);
}
.price-tier-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-tier {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8B8378;
}
.price-badge {
    background: #D9A21B;
    color: #201e1d;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.price-figure { font-weight: 800; font-size: 40px; letter-spacing: -.03em; margin: 12px 0 6px; }
.price-card p { color: #4A443D; font-size: 14.5px; margin: 0 0 24px; }
.price-card .btn { font-size: 14.5px; padding: 13px 24px; }

/* ---------- closer ---------- */

.closer { background: #D9A21B; color: #201e1d; border-radius: 32px; padding: 76px 56px; }
.closer h2 {
    font-weight: 800;
    font-size: 64px;
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 0 0 32px;
    max-width: 20em;
}
.closer-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- footer ---------- */

.site-footer { padding: 56px 40px 44px; display: flex; gap: 64px; align-items: flex-start; }
.footer-brand { flex: 1; }
.footer-brand img { height: 26px; width: auto; margin-bottom: 14px; }
.footer-blurb { font-size: 13.5px; color: #7A7266; max-width: 24em; }
.footer-legal { font-size: 12.5px; color: #8B8378; margin-top: 26px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8B8378;
    margin-bottom: 2px;
}
.footer-col a { color: #3A3630; text-decoration: none; font-size: 13.5px; }
.footer-col a:hover { color: #201e1d; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
    .hero { grid-template-columns: 1fr; gap: 48px; }
    .hero-copy h1 { font-size: 50px; }
    .hero-lead { max-width: none; }
    .closer h2 { font-size: 46px; }
    .saved-panel { grid-template-columns: 1fr; gap: 36px; padding: 44px 34px; }
    .features-intro { grid-template-columns: 1fr; gap: 22px; align-items: start; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .header-nav { display: none; }
    .header-pill { gap: 16px; }
}

@media (max-width: 740px) {
    .wrap { padding: 64px 20px 0; }
    .band { border-radius: 0 0 28px 28px; padding-bottom: 64px; }
    .site-header { padding: 18px 20px; }
    .header-pill { padding: 10px 10px 10px 18px; }
    .brand img { height: 26px; }
    .hero { padding: 32px 20px 0; gap: 40px; }
    .hero-copy h1 { font-size: 36px; }
    .hero-lead { font-size: 16.5px; }
    .hero-stats { gap: 26px; margin-top: 36px; }
    .stat-title { font-size: 22px; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .section-intro h2, .features-intro h2 { font-size: 30px; }
    .h2-sm { font-size: 26px; }
    .closer { padding: 44px 26px; border-radius: 24px; }
    .closer h2 { font-size: 32px; margin-bottom: 24px; }
    .saved-panel { padding: 34px 22px; border-radius: 24px; }
    .demo-head, .demo-lines, .demo-controls { padding-left: 20px; padding-right: 20px; }
    .demo-scene { font-size: 21px; }
    .demo-controls { flex-wrap: wrap; }
    .demo-hide { order: 3; width: 100%; }
    .site-footer { flex-direction: column; gap: 36px; padding: 48px 20px 40px; }
    .footer-cols { gap: 32px; }
    .hero-cta .btn, .closer-cta .btn, .price-card .btn { width: 100%; }
    .saved-card { overflow-x: auto; }
}

/* ==========================================================================
   Inner pages: tryit, flashcards, showcase, hints, signup.
   Everything below replaces what Bootstrap and the ZKIN kit used to provide.
   ========================================================================== */

/* ---------- inner page chrome ---------- */

.band-flat {
    background: #D2D0C6;
    border-radius: 0 0 40px 40px;
    padding-bottom: 52px;
}
.band-flat.is-bare { padding-bottom: 26px; }

.page-head { max-width: 1240px; margin: 0 auto; padding: 30px 40px 0; }
.page-head h1 {
    font-weight: 800;
    font-size: 44px;
    line-height: 1.06;
    letter-spacing: -.03em;
    margin: 0 0 14px;
    color: #1C1A18;
    text-wrap: pretty;
}
.page-head .lead { font-size: 18px; line-height: 1.6; color: #4A443D; margin: 0; max-width: 44em; }
.page-head .lead + .lead { margin-top: 10px; }
.page-head .head-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.main { max-width: 1240px; margin: 0 auto; padding: 52px 40px 96px; }
.main > * + * { margin-top: 28px; }

.header-nav a.is-active, .header-login.is-active { color: #8A6410; }

/* Slideshow gets the screen: the page heading collapses and what is left of
   the chrome fades back, so the card can be as large as the viewport allows. */
body.is-slideshow .band-flat { padding-bottom: 0; }
body.is-slideshow .page-head { display: none; }
body.is-slideshow .header-pill { opacity: .3; transition: opacity .2s ease; }
body.is-slideshow .header-pill:hover { opacity: 1; }
body.is-slideshow .site-footer { display: none; }

/* ---------- generic pieces ---------- */

.panel {
    background: #fff;
    border-radius: 22px;
    padding: 30px 28px;
    box-shadow: 0 1px 2px rgba(60, 52, 44, .05), 0 18px 40px -20px rgba(60, 52, 44, .3);
}
.panel-quiet { background: #FCFBF7; box-shadow: none; border: 1px solid #E6E3DA; }
.panel h2 { font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin: 0 0 12px; }
.panel h3 { font-weight: 800; font-size: 19px; letter-spacing: -.015em; margin: 0 0 10px; }
.panel > p:last-child { margin-bottom: 0; }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.cols-2-wide { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: start; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 24px; }

.note { font-size: 13.5px; color: #7A7266; }

.btn-outline {
    background: transparent;
    color: #3A3630;
    box-shadow: inset 0 0 0 1px #C9C4B8;
    font-size: 14.5px;
    padding: 13px 24px;
}
.btn-outline:hover { background: rgba(255, 255, 255, .7); color: #201e1d; }

.btn-danger { background: #F1E1D8; color: #8A3A14; font-size: 14.5px; padding: 13px 24px; }
.btn-danger:hover { background: #E8D2C6; color: #74300F; }

.btn-white { background: #fff; color: #2A2622; font-size: 14.5px; padding: 13px 24px; }
.btn-white:hover { background: #F5F3EE; color: #201e1d; }

/* ---------- character tones ----------
   The keys (success, danger, warning, info, primary, secondary, dark) are the
   ones stored in sides.qs, so they cannot be renamed without breaking every
   scene saved so far. Only what they look like changed. */

.tone-success   { --tone: #D9A21B; --tone-ink: #201e1d; --tone-soft: #F7EDD3; }
.tone-danger    { --tone: #A5461A; --tone-ink: #ffffff; --tone-soft: #F6E3DA; }
.tone-warning   { --tone: #8A6410; --tone-ink: #ffffff; --tone-soft: #F3EBD8; }
.tone-info      { --tone: #2F6B68; --tone-ink: #ffffff; --tone-soft: #DCEBEA; }
.tone-primary   { --tone: #3A4A6B; --tone-ink: #ffffff; --tone-soft: #E0E5EF; }
.tone-secondary { --tone: #6B645B; --tone-ink: #ffffff; --tone-soft: #E9E6DF; }
.tone-dark      { --tone: #3A3630; --tone-ink: #ffffff; --tone-soft: #E4E1D9; }

.chip {
    display: inline-block;
    background: var(--tone-soft, #F0EEE7);
    color: var(--tone, #6B645B);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- forms ---------- */

.field { display: block; margin-bottom: 18px; }
.field-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8B8378;
    margin-bottom: 8px;
}
.input, .textarea {
    width: 100%;
    font: inherit;
    color: #201e1d;
    background: #FCFBF7;
    border: 1px solid #E0DCD2;
    border-radius: 14px;
    padding: 14px 16px;
}
.textarea { min-height: 320px; line-height: 1.5; resize: vertical; }
.input:focus, .textarea:focus {
    outline: none;
    border-color: #D9A21B;
    box-shadow: 0 0 0 3px rgba(217, 162, 27, .22);
}
.input-row { display: flex; gap: 10px; }
.input-row .input { flex: 1; }

.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switch input { margin: 3px 0 0; width: 17px; height: 17px; flex: none; accent-color: #D9A21B; cursor: pointer; }
.switch-text { font-size: 14px; font-weight: 600; color: #2A2622; }
.switch-sub { display: block; font-size: 12.5px; font-weight: 400; color: #7A7266; margin-top: 2px; }

/* ---------- modal ---------- */

.modal[hidden] { display: none; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 20px;
    overflow-y: auto;
}
.modal-backdrop { position: fixed; inset: 0; background: rgba(32, 30, 29, .5); border: 0; padding: 0; }
.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #FCFBF7;
    border-radius: 24px;
    box-shadow: 0 40px 90px -20px rgba(32, 30, 29, .55);
    overflow: hidden;
}
.modal-dialog.is-wide { max-width: 880px; }
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 18px;
}
.modal-head h2 { font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin: 0; }
.modal-close {
    border: 0;
    background: #F0EEE7;
    color: #6B645B;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { background: #E6E3DA; color: #201e1d; }
.modal-body { padding: 0 28px 8px; }
.modal-body p { color: #4A443D; }
.modal-foot {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 18px 28px 26px;
}

/* ---------- tryit: steps ---------- */

.step-rail { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.step-pip {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    color: #7A7266;
    font-size: 12.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-pip.is-done { background: rgba(255, 255, 255, .8); color: #8A6410; }
.step-pip.is-now { background: #D9A21B; color: #201e1d; box-shadow: 0 6px 16px rgba(184, 133, 15, .3); }
.step-rail-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A6410;
    margin-left: 6px;
}

/* ---------- tryit: script table ---------- */

.script-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.script-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8B8378;
    border-bottom: 1px solid #EFECE4;
}
.script-table td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid #F2EFE8; }
.script-table tr:last-child td { border-bottom: 0; }
.script-table .cell-character { width: 1%; white-space: nowrap; }
.script-table .cell-line { color: #2A2622; }

.script-table.is-pickable tr { cursor: pointer; }
.script-table.is-pickable tr:hover { background: #F7F5F0; }
.script-table tr.is-exposition { background: #F3F1EA; }
.script-table tr.is-exposition .cell-character { visibility: hidden; }
.script-table tr.is-exposition .cell-line { font-style: italic; color: #6B645B; text-align: center; }

.scroll-x { overflow-x: auto; }

/* ---------- tryit: character list ---------- */

.character-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.character-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #FCFBF7;
    border: 1px solid #E6E3DA;
    border-radius: 16px;
    padding: 14px 18px;
}
.character-name { font-weight: 800; font-size: 17px; letter-spacing: -.015em; }
.character-drop { font-size: 12.5px; font-weight: 600; }

/* ---------- tryit: pick your role ---------- */

.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.role-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 104px;
    padding: 18px;
    background: #fff;
    border: 1px solid #E6E3DA;
    border-radius: 20px;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.015em;
    color: #201e1d;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.role-card:hover {
    background: #F7EDD3;
    border-color: #D9A21B;
    color: #201e1d;
    transform: translateY(-2px);
}

/* ---------- tryit: color picker ---------- */

.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.picker {
    background: #fff;
    border: 1px solid #E6E3DA;
    border-radius: 20px;
    padding: 20px;
}
.picker-name {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.015em;
    margin-bottom: 4px;
    color: var(--tone, #201e1d);
}
.picker-sub { font-size: 12.5px; color: #7A7266; margin-bottom: 14px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: var(--tone);
    box-shadow: 0 0 0 2px #fff, 0 0 0 2px transparent;
}
.swatch:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E0DCD2; }
.swatch.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #201e1d; }

.picker.is-you { background: #F7EDD3; border-color: #D9A21B; }
.picker.is-you .picker-sub { color: #8A6410; }

/* ---------- tryit: yes/no choice ---------- */

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.choice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 132px;
    padding: 26px 28px;
    border-radius: 22px;
    border: 1px solid #E6E3DA;
    background: #fff;
    text-decoration: none;
    color: #201e1d;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.choice:hover { transform: translateY(-2px); color: #201e1d; }
.choice-title { font-weight: 800; font-size: 21px; letter-spacing: -.02em; margin-bottom: 6px; }
.choice-sub { font-size: 14px; color: #4A443D; }
.choice.is-yes:hover { background: #F7EDD3; border-color: #D9A21B; }
.choice.is-no:hover { background: #F1EFE8; border-color: #C9C4B8; }

/* ---------- tryit: final preview ---------- */

.preview-list { display: flex; flex-direction: column; gap: 10px; }
.preview-line {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 16px;
    align-items: start;
    padding: 12px 16px;
    background: #FCFBF7;
    border: 1px solid #EFECE4;
    border-left: 3px solid var(--tone, #E0DCD2);
    border-radius: 14px;
}
.preview-line.is-exposition {
    display: block;
    text-align: center;
    font-style: italic;
    color: #6B645B;
    background: #F3F1EA;
    border-left-color: #D6D2C7;
}
.preview-text { color: #201e1d; }
.preview-head { display: flex; align-items: center; gap: 8px; }
.speak {
    border: 0;
    background: var(--tone-soft, #F0EEE7);
    color: var(--tone, #6B645B);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    flex: none;
}
.speak:hover { filter: brightness(.94); }

/* ---------- flashcards ---------- */

.deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}
.flashcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    min-height: 170px;
    padding: 26px 24px;
    border-radius: 22px;
    border: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.01em;
    cursor: pointer;
    background: var(--tone);
    color: var(--tone-ink);
    box-shadow: 0 2px 3px rgba(60, 52, 44, .06), 0 20px 44px -22px rgba(60, 52, 44, .5);
    -webkit-user-select: none;
    user-select: none;
    transition: transform .15s ease;
}
.flashcard:hover { transform: translateY(-3px); }
.flashcard.is-exposition { font-style: italic; font-weight: 500; }
.flashcard[hidden] { display: none; }

/* Slideshow: one card, as big as the screen allows. */
body.is-slideshow .main { padding-top: 24px; }
body.is-slideshow .deck { display: block; }
body.is-slideshow .flashcard {
    /* A button sizes to its content, so in the grid it stretches but as a
       block-level card it would not. */
    width: 100%;
    min-height: 64vh;
    font-size: clamp(24px, 4.4vw, 54px);
    font-weight: 700;
    line-height: 1.24;
    padding: 40px;
}
body.is-slideshow .flashcard:hover { transform: none; }

.your-line-note {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .75;
    display: none;
}
.deck.is-covering .is-yours .flashcard-text { display: none; }

/* Listening: the line starts recessive and each word comes up as you say it.
   Opacity rather than color, so it works whatever tone the character carries. */
.deck.is-listening .flashcard.is-yours .flashcard-text .w {
    opacity: .26;
    transition: opacity .16s ease;
}
.deck.is-listening .flashcard.is-yours .flashcard-text .w.is-said { opacity: 1; }

/* Covered and listening together, which is the run worth doing: the card is
   blank and the line writes itself as you get it out. The words still hold
   their space, so nothing reflows under you mid-line. */
.deck.is-covering.is-listening .is-yours .flashcard-text { display: block; }
.deck.is-covering.is-listening .is-yours .your-line-note { display: none; }
.deck.is-covering.is-listening .is-yours .flashcard-text .w { opacity: 0; }
.deck.is-covering.is-listening .is-yours .flashcard-text .w.is-said { opacity: 1; }
.deck.is-covering .is-yours .your-line-note { display: block; }

.flash-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.flash-nav[hidden] { display: none; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

/* ---------- showcase ---------- */

.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.showcase-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(60, 52, 44, .05), 0 18px 40px -20px rgba(60, 52, 44, .3);
    display: flex;
    flex-direction: column;
}
.showcase-card img { display: block; width: 100%; height: auto; }
.showcase-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.showcase-title { font-weight: 800; font-size: 21px; letter-spacing: -.02em; margin: 0; }
.showcase-scene {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A6410;
    margin-top: -6px;
}
.showcase-body p { margin: 0; color: #4A443D; font-size: 14.5px; flex: 1; }

/* A typographic cover instead of a film poster: it previews the product
   and does not put someone else's artwork on the page. */
.showcase-cover {
    background: #2A2622;
    color: #F5F3EE;
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 190px;
}
.cover-cast { display: flex; gap: 8px; flex-wrap: wrap; }
.cover-line {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.02em;
    flex: 1;
}
.cover-note {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .55);
}

.actions.is-tight { margin-top: 0; }

.numbered { margin: 0 0 16px; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.numbered li { color: #4A443D; }
.numbered li::marker { color: #8A6410; font-weight: 700; }

hr.rule { border: 0; border-top: 1px solid #E6E3DA; margin: 24px 0; }

input[type="file"].input { padding: 11px 14px; cursor: pointer; }

.tick-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tick-list li { position: relative; padding-left: 26px; color: #4A443D; }
.tick-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 12px;
    height: 6px;
    border-left: 2px solid #D9A21B;
    border-bottom: 2px solid #D9A21B;
    transform: rotate(-45deg);
}

/* ---------- hints ---------- */

.hint-list { display: flex; flex-direction: column; gap: 12px; }
.hint {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow: 0 1px 2px rgba(60, 52, 44, .05), 0 14px 30px -22px rgba(60, 52, 44, .3);
}
.hint-key {
    flex: none;
    min-width: 116px;
    text-align: center;
    background: #F0EEE7;
    border-bottom: 2px solid #DAD6CB;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4A443D;
}
.hint p { margin: 0; color: #4A443D; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
    .showcase-grid { grid-template-columns: repeat(2, 1fr); }
    .cols-2, .cols-2-wide { grid-template-columns: 1fr; }
}

@media (max-width: 740px) {
    .band-flat { border-radius: 0 0 28px 28px; padding-bottom: 36px; }
    .page-head { padding: 22px 20px 0; }
    .page-head h1 { font-size: 30px; }
    .page-head .lead { font-size: 16.5px; }
    .main { padding: 36px 20px 72px; }
    .panel { padding: 24px 20px; border-radius: 18px; }
    .showcase-grid { grid-template-columns: 1fr; }
    .choice-grid { grid-template-columns: 1fr; }
    .preview-line { grid-template-columns: 1fr; gap: 8px; }
    .hint { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hint-key { min-width: 0; }
    .character-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .modal { padding: 3vh 12px; }
    .modal-head, .modal-body, .modal-foot { padding-left: 20px; padding-right: 20px; }
    .textarea { min-height: 240px; }
    .modal-foot .btn { flex: 1; }
}

.convert-error {
    background: #F6E3DA;
    border-left: 4px solid #A5461A;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    color: #8A3A14;
    font-weight: 600;
}