:root {
    --cream: #F3EBDA;
    --paper: #FFF8EA;
    --ink: #1E1612;
    --walnut: #2E1F18;
    --trim: #5A3A26;
    --amber: #F2A33A;
    --orange: #EC7A2C;
    --red: #D2472A;
    --muted: #5E4F45;
    --line: rgba(30,22,18,.16);
    --grotesk: 'Inter Tight','Helvetica Neue',Arial,sans-serif;
    --mono: 'IBM Plex Mono',ui-monospace,Menlo,monospace;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top,0px);
    padding-bottom: env(safe-area-inset-bottom,0px)
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cream: #F3EBDA
    }
}

:root[data-theme="dark"] {
    --cream: #F3EBDA
}

:root[data-theme="light"] {
    --cream: #F3EBDA
}

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

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--grotesk);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

button {
    font: inherit
}

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px
}
/* header (same as the approved header: logo, Menu, Start) */
.hdr {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(14px,3vw,36px);
    background: color-mix(in srgb,var(--cream) 88%,transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none
}

.mono {
    width: 62px;
    height: auto;
    display: block
}

.logo span {
    font-weight: 800;
    font-style: italic;
    font-size: 1.02rem;
    letter-spacing: -.03em
}

.hdr .right {
    display: flex;
    gap: 10px
}

.mk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border-radius: 99px;
    background: var(--walnut);
    color: var(--cream);
    font-weight: 700;
    text-decoration: none
}

.st {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 99px;
    background: var(--amber);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none
}

@media (max-width:640px) {
    .logo span {
        display: none
    }

    .st .full {
        display: none
    }
}

@media (min-width:641px) {
    .st .short {
        display: none
    }
}


.hdr {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.note {
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom,0px));
    transform: translateX(-50%);
    z-index: 90;
    margin: 0;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--walnut);
    color: var(--cream);
    font-size: .74rem;
    white-space: nowrap
}

    .note b {
        color: var(--amber)
    }

.wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(18px,4vw,56px)
}

.kick {
    margin: 0 0 .6em;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .85rem;
    color: var(--red)
}

.sec-h {
    margin: 0;
    font-weight: 800;
    font-size: clamp(2rem,4.4vw,3.8rem);
    line-height: .95;
    letter-spacing: -.05em
}

.ph {
    color: var(--red);
    font-family: var(--mono);
    font-size: .9em
}

/* hero: tags, three-line title, drifting picture + text; then holds while the sheet rises */
.hero {
    position: sticky;
    top: 0;
    z-index: 0;
    min-height: 100svh;
    padding: calc(150px + env(safe-area-inset-top,0px)) clamp(18px,5vw,72px) 90px;
    background-color: var(--cream);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke-width='6' stroke-opacity='.06'><path d='M0 22A22 22 0 0 0 22 0' stroke='%23D2472A'/><path d='M0 38A38 38 0 0 0 38 0' stroke='%23EC7A2C'/><path d='M0 54A54 54 0 0 0 54 0' stroke='%23F2A33A'/><path d='M120 98A22 22 0 0 0 98 120' stroke='%23D2472A'/><path d='M120 82A38 38 0 0 0 82 120' stroke='%23EC7A2C'/><path d='M120 66A54 54 0 0 0 66 120' stroke='%23F2A33A'/></g></svg>");
    background-size: 120px 120px
}

.hero-in {
    max-width: 1320px;
    margin: 0 auto
}

.h-tags {
    display: flex;
    gap: 6px;
    margin: 0 0 clamp(20px,3vw,30px);
    font-family: var(--mono);
    font-weight: 600;
    font-size: .8rem
}

    .h-tags span:first-child {
        padding: 2px 7px;
        border: 1.5px solid var(--ink);
        border-radius: 5px
    }

    .h-tags span:last-child {
        padding: 3px 8px;
        border-radius: 5px;
        background: var(--ink);
        color: var(--cream)
    }

.title {
    margin: 0;
    max-width: min(100%,1150px);
    font-weight: 800;
    font-size: clamp(2.1rem,4.4vw,4.6rem);
    line-height: 1.04;
    letter-spacing: -.045em
}

.h-stripes {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: clamp(22px,3vw,32px)
}

    .h-stripes i {
        display: block;
        height: 6px;
        width: min(340px,60%)
    }

        .h-stripes i:nth-child(1) {
            background: var(--amber)
        }

        .h-stripes i:nth-child(2) {
            background: var(--orange)
        }

        .h-stripes i:nth-child(3) {
            background: var(--red)
        }

.story {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(24px,6vw,110px);
    align-items: start;
    margin-top: clamp(56px,8vw,110px)
}

.st-frame {
    position: relative;
    height: min(78vh,720px);
    border-radius: 18px;
    overflow: hidden;
    background: #e9dcc2;
    box-shadow: 0 24px 50px rgba(46,31,24,.18)
}

.st-img {
    position: absolute;
    left: -2%;
    top: -14%;
    width: 112%;
    height: 128%;
    object-fit: cover;
    will-change: transform
}

.st-text {
    position: sticky;
    top: 34vh
}

.st-p {
    margin: 0;
    max-width: 26ch;
    font-weight: 700;
    font-size: clamp(1.4rem,2.3vw,2.1rem);
    line-height: 1.18;
    letter-spacing: -.03em
}

.st-links {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 99px;
    font-weight: 800;
    text-decoration: none;
    border: 0;
    cursor: pointer
}

    .btn.a {
        background: var(--amber);
        color: var(--ink)
    }

    .btn.d {
        background: var(--walnut);
        color: var(--cream)
    }

    .btn.o {
        background: transparent;
        color: var(--ink);
        box-shadow: inset 0 0 0 2px var(--ink)
    }

@media (max-width:900px) {
    .story {
        grid-template-columns: minmax(0,1fr)
    }

    .st-frame {
        height: 60vh
    }

    .st-text {
        position: static
    }
}

.sheet {
    position: relative;
    z-index: 2;
    background: var(--paper);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -24px 50px rgba(46,31,24,.14)
}

.tab {
    position: absolute;
    left: clamp(18px,5vw,72px);
    top: -44px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-radius: 14px 14px 0 0;
    background: var(--paper);
    font-family: var(--mono);
    font-weight: 600;
    font-size: .82rem
}

    .tab b {
        color: var(--red)
    }

/* ===== The terminal ===== */
.term-sec {
    padding: clamp(70px,8vw,110px) clamp(12px,3vw,40px) clamp(50px,6vw,80px);
    background: radial-gradient(ellipse 60% 50% at 50% 40%,rgba(242,163,58,.18),transparent 70%)
}

.term-head {
    max-width: 1100px;
    margin: 0 auto 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 14px
}

    .term-head p.lead {
        margin: 0;
        max-width: 40ch;
        color: var(--muted);
        line-height: 1.5
    }

.pc {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(14px,2vw,24px);
    border-radius: 28px 28px 16px 16px;
    background: linear-gradient(90deg,#efe4cc,#fbf5e8 40%,#e6dac2);
    border: 5px solid var(--trim);
    box-shadow: 0 40px 70px rgba(46,31,24,.3)
}

.pc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 4px 12px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .78rem;
    color: var(--trim)
}

    .pc-top b {
        font-family: var(--grotesk);
        font-weight: 800;
        font-style: italic;
        font-size: 1.1rem;
        letter-spacing: -.03em;
        color: var(--ink)
    }

.sig {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px
}

    .sig i {
        width: 6px;
        background: rgba(90,58,38,.25);
        border-radius: 1px;
        transition: background .3s
    }

        .sig i:nth-child(1) {
            height: 30%
        }

        .sig i:nth-child(2) {
            height: 45%
        }

        .sig i:nth-child(3) {
            height: 60%
        }

        .sig i:nth-child(4) {
            height: 75%
        }

        .sig i:nth-child(5) {
            height: 90%
        }

        .sig i:nth-child(6) {
            height: 100%
        }

        .sig i.on {
            background: var(--red)
        }

.led {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4a2a;
    box-shadow: 0 0 8px #ff4a2a;
    margin-right: 8px;
    vertical-align: -1px
}

.bezel {
    padding: 14px;
    border-radius: 22px;
    background: #231a15;
    box-shadow: inset 0 0 0 3px #3b2a20
}

.crt {
    position: relative;
    height: clamp(300px,42vh,440px);
    border-radius: 16px/22px;
    overflow: hidden;
    cursor: text;
    background: radial-gradient(ellipse at 50% 45%,#f9b54c,#e07a22 75%,#b8601c)
}

    .crt::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: radial-gradient(ellipse at 22% 14%,rgba(255,255,255,.25),transparent 40%),repeating-linear-gradient(to bottom,rgba(60,20,0,.16) 0 1px,transparent 1px 3px);
        box-shadow: inset 0 0 50px rgba(60,20,0,.55)
    }

.screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: clamp(16px,2.4vw,28px);
    font-family: var(--mono);
    font-weight: 600;
    font-size: clamp(.9rem,1.35vw,1.15rem);
    line-height: 1.6;
    color: #3b1703;
    scrollbar-width: none
}

    .screen::-webkit-scrollbar {
        display: none
    }

.ln {
    white-space: pre-wrap;
    word-break: break-word
}

    .ln.you {
        color: #5a1f00
    }

    .ln.sys {
        opacity: .75
    }

    .ln.err {
        color: #7a1200
    }

.opt {
    display: inline-block;
    margin: 2px 10px 2px 0;
    padding: 0 6px;
    border-radius: 4px
}

    .opt.sel {
        background: #3b1703;
        color: #ffcf7a
    }

.cur {
    display: inline-block;
    width: .6em;
    height: 1.1em;
    background: #3b1703;
    vertical-align: -.2em;
    animation: blink 1s steps(1) infinite
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

.real {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
    font-size: 16px
}
/* keyboard */
.kb {
    margin-top: 16px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(#e6dac2,#d8cab0);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.15)
}

.krow {
    display: flex;
    gap: 6px;
    margin-bottom: 6px
}

    .krow:last-child {
        margin-bottom: 0
    }

.k {
    flex: 1 1 0;
    min-width: 0;
    height: clamp(30px,4.2vw,46px);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-family: var(--mono);
    font-weight: 600;
    font-size: clamp(.6rem,1vw,.82rem);
    color: #f3ebda;
    background: linear-gradient(#5a4a40,#3a3029);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .06s,box-shadow .06s,background .15s
}

    .k.cr {
        background: linear-gradient(#f4ecdc,#d8cab0);
        color: #3b2d25
    }

    .k.or {
        background: linear-gradient(#f07c40,#d2562a);
        color: #2a1305
    }

    .k.am {
        background: linear-gradient(#ffc56a,#F2A33A);
        color: #2a1305
    }

    .k.w15 {
        flex-grow: 1.5
    }

    .k.w18 {
        flex-grow: 1.8
    }

    .k.w2 {
        flex-grow: 2.2
    }

    .k.w6 {
        flex-grow: 7
    }

    .k.down {
        transform: translateY(3px);
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.45);
        filter: brightness(1.25)
    }

.pc-st {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 14px -24px -24px;
    border-radius: 0 0 11px 11px;
    overflow: hidden
}

    .pc-st i {
        height: 6px
    }

        .pc-st i:nth-child(1) {
            background: var(--amber)
        }

        .pc-st i:nth-child(2) {
            background: var(--orange)
        }

        .pc-st i:nth-child(3) {
            background: var(--red)
        }

.hint {
    max-width: 1100px;
    margin: 14px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--muted)
}

@media (max-width:760px) {
    .kb {
        padding: 8px
    }

    .krow {
        gap: 3px;
        margin-bottom: 3px
    }

    .k {
        height: 22px;
        font-size: 0;
        border-radius: 4px;
        pointer-events: none
    }

        .k.w6 {
            font-size: 0
        }

    .crt {
        height: 56vh
    }

    .hint .desk {
        display: none
    }
}

@media (min-width:761px) {
    .hint .mob {
        display: none
    }
}

/* other ways + clock */
.ways {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    padding: clamp(50px,6vw,80px) 0
}

@media (max-width:900px) {
    .ways {
        grid-template-columns: minmax(0,1fr)
    }
}

.way {
    padding: 26px;
    border-radius: 18px;
    background: var(--cream);
    box-shadow: inset 0 0 0 1px var(--line)
}

    .way h3 {
        margin: 0 0 6px;
        font-weight: 800;
        font-size: 1.4rem;
        letter-spacing: -.03em
    }

    .way p {
        margin: 0 0 16px;
        color: var(--muted);
        line-height: 1.5
    }

    .way a.mail {
        font-weight: 800;
        color: var(--ink);
        word-break: break-all
    }

.clock {
    display: flex;
    gap: 6px;
    margin: 6px 0 12px
}

    .clock span {
        display: grid;
        place-items: center;
        min-width: 52px;
        height: 64px;
        padding: 0 6px;
        border-radius: 8px;
        background: #1a110c;
        color: #ffb347;
        font-family: var(--mono);
        font-weight: 600;
        font-size: 2rem;
        position: relative;
        text-shadow: 0 0 10px rgba(255,160,60,.6)
    }

        .clock span::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 2px;
            background: rgba(0,0,0,.6)
        }

    .clock em {
        align-self: center;
        font-style: normal;
        font-size: 1.6rem;
        font-weight: 800
    }

.status {
    font-family: var(--mono);
    font-size: .8rem
}

    .status i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        margin-right: 6px;
        background: #3e9a5c;
        box-shadow: 0 0 8px #3e9a5c
    }

    .status.off i {
        background: #8a7a6a;
        box-shadow: none
    }

.faq {
    padding: 0 0 clamp(60px,8vw,100px)
}

    .faq details {
        border-bottom: 1px solid var(--line);
        padding: 18px 0
    }

    .faq summary {
        cursor: pointer;
        font-weight: 800;
        font-size: 1.2rem;
        list-style: none
    }

        .faq summary::before {
            content: "+ ";
            color: var(--red)
        }

    .faq details[open] summary::before {
        content: "– "
    }

    .faq details p {
        margin: 10px 0 0;
        color: var(--muted);
        max-width: 60ch;
        line-height: 1.55
    }

.foot {
    padding: 50px 20px;
    text-align: center;
    background: var(--walnut);
    color: rgba(243,235,218,.7)
}

@media (prefers-reduced-motion: reduce) {
    .cur {
        animation: none
    }
}

/* the transmission UI inside the TTD-7000 screen */
.crt {
    display: block;
    margin: 0
}

.ui {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(18px,2.6vw,30px);
    color: #3b1703
}

.q-no {
    margin: 0 0 6px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .08em
}

.q {
    margin: 0 0 16px;
    font-weight: 800;
    font-size: clamp(1.6rem,3vw,2.6rem);
    letter-spacing: -.04em;
    line-height: 1.05
}

.field input, .field textarea {
    width: 100%;
    border: 0;
    border-bottom: 3px solid #3b1703;
    background: transparent;
    color: #3b1703;
    font-family: var(--mono);
    font-weight: 600;
    font-size: clamp(1rem,1.7vw,1.3rem);
    padding: 6px 2px;
    outline: none;
    resize: none;
    caret-color: #3b1703
}

    .field input::placeholder, .field textarea::placeholder {
        color: rgba(59,23,3,.45)
    }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.chip {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 99px;
    border: 2px solid #3b1703;
    background: transparent;
    color: #3b1703;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .84rem;
    cursor: pointer
}

    .chip b {
        opacity: .6;
        margin-right: 4px
    }

    .chip[aria-pressed="true"] {
        background: #3b1703;
        color: #ffcf7a
    }

.err {
    min-height: 1.3em;
    margin: 8px 0 0;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .82rem;
    color: #7a1200
}

.nav {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    padding-top: 10px
}

.back, .go {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 99px;
    border: 0;
    cursor: pointer;
    font-weight: 800
}

.back {
    background: transparent;
    color: #3b1703;
    box-shadow: inset 0 0 0 2px #3b1703
}

    .back.hide {
        visibility: hidden
    }

.go {
    background: #3b1703;
    color: #ffcf7a
}

.sum {
    margin: 0;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.7
}

    .sum b {
        display: inline-block;
        min-width: 7.5em
    }

.sendfx {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6%;
    width: 100%;
    height: 46%;
    opacity: 0;
    pointer-events: none
}

.title .dim, .fill .dim {
    color: rgba(30,22,18,.18)
}