/* The home page: the hero, the tour of features (a bento of screens, or a shell), the rows
   that go into each, the index, TaoolKit, pricing and the download. */

main { display: block; }

section { position: relative; }

/* ---------- Hero ---------- */

.hero {
    min-height: calc(100vh - var(--bz-top) - var(--bz-chin) - var(--tmux));
    min-height: calc(100dvh - var(--bz-top) - var(--bz-chin) - var(--tmux));
    display: grid;
    align-content: center;
    /* Below, room for the POST screen's last line (.post). */
    padding: 28px 0 56px;
    overflow: hidden;
}

/* Auto margins would keep a grid item from stretching. */
.hero > .wrap { width: 100%; }

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: 32px;
    width: 100%;
}

.hero-text { padding-bottom: 36px; }

/* The power-on self test that prints before the wordmark: fast, dim, and gone from the
   accessibility tree, since it says nothing. */
.boot {
    min-height: 7.5em;
    margin-bottom: 18px;
    color: var(--dim);
    font: 12px/1.5 var(--mono);
    white-space: pre-wrap;
}

.boot .ok { color: var(--ok); }

.tagline { margin-top: 20px; font-size: 20px; text-wrap: balance; }

.hero .ls { margin-top: 14px; --rows: 8; color: var(--phosphor); }
.hero .actions { margin-top: 26px; }
.hero .platforms { margin-top: 14px; font-size: 14px; }
/* Under the devices, while the Mac app waits for App Review. */
.hero .soon { margin-top: 8px; }

/* A short window: the wordmark a step smaller, so the hero fits above the fold. */
@media (min-width: 1001px) and (max-height: 860px) { .hero .wordmark { font-size: 110px; } }

/* The page loads as one sequence: the boot log, the wordmark typed, then the rest printed
   (hero.js). "booting" is set before the page paints; each part is hidden until the sequence
   shows it, or 8 seconds in if it never does. */
.booting .hero .seq { visibility: hidden; animation: seq-fallback 0s 8s forwards; }
.booting .hero .seq.on { visibility: visible; animation: none; }
@keyframes seq-fallback { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .booting .hero .seq { visibility: visible; animation: none; } }

/* The edge the koala peeks over, as the app icon's glass cuts it off. */
.edge {
    position: relative;
    z-index: 1;
    height: 2px;
    background: var(--phosphor);
    box-shadow: 0 0 8px rgba(236, 223, 197, 0.45);
}

.hero-art { position: relative; align-self: end; }

.hero-koala {
    width: min(420px, 100%);
    margin-left: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The POST screen's last line, under the edge: the way on past the hero, its key pressing itself
   now and then. Gone once the page moves (hero.js). */
.post { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1; }

.continue {
    padding: 0;
    border: 0;
    background: none;
    color: var(--dim);
    font: 14px/1.6 var(--mono);
    cursor: pointer;
    transition: opacity 0.4s;
}

.continue:hover { color: var(--phosphor); }
.continue.gone { opacity: 0; pointer-events: none; }

.continue kbd {
    display: inline-block;
    margin: 0 0.3ch;
    padding: 0.1em 0.5em 0.05em;
    border: 1px solid var(--dim);
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--phosphor);
    font: inherit;
    line-height: 1.3;
    animation: keypress 2.6s infinite;
}

@keyframes keypress {
    0%, 78%, 100% { transform: none; border-bottom-width: 2px; background: transparent; color: var(--phosphor); }
    82%, 90% { transform: translateY(1px); border-bottom-width: 1px; background: var(--phosphor); color: var(--ink); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .continue { transition: none; }
    .continue kbd { animation: none; }
}

/* Warp: the arcade run up a chart, the whole hero behind the text. */
.warp {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: none;
    image-rendering: pixelated;
}

[data-hero="warp"] .warp { display: block; }
[data-hero="warp"] .hero-koala { display: none; }
[data-hero="warp"] .edge { opacity: 0; }

@media (max-width: 860px) {
    .hero { padding-top: 32px; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hero-text { padding-bottom: 20px; }
    .hero-koala { width: min(240px, 60vw); margin: 0 auto 0 0; }
    .boot { min-height: 6em; font-size: 12px; }
}

@media (max-width: 1100px) { .hero .ls { column-gap: 2ch; } }

/* ---------- Ticker: alerts going by, as on a stock board ---------- */

.ticker {
    overflow: hidden;
    border-bottom: 1px dashed var(--line);
    padding: 10px 0;
    color: var(--dim);
    font-size: 14px;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker-track { display: inline-flex; gap: 48px; padding-left: 48px; animation: ticker 60s linear infinite; }
.ticker-track b { color: var(--phosphor); font-weight: 400; }
.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Sections ---------- */

.block { padding: 120px 0 0; }
.block > .wrap > .prose, .block > .wrap > .lede + .prose { margin-top: 18px; }

@media (max-width: 700px) { .block { padding-top: 88px; } }

/* ---------- The tour: a bento of little screens ---------- */

.bento {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(250px, auto);
    /* A tall tile's neighbours fill in beside it at every width. */
    grid-auto-flow: row dense;
    gap: 16px;
}

[data-features="shell"] .bento { display: none; }
[data-features="bento"] .shell { display: none; }

.tile {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px 18px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    container-type: inline-size;
}

.tile:hover { border-color: var(--faint); }
.tile.w5 { grid-column: span 5; }
.tile.w6 { grid-column: span 6; }
.tile.w7 { grid-column: span 7; }
.tile.w8 { grid-column: span 8; }
.tile.tall { grid-row: span 2; }

.tile h3 { font: 400 15px/1.3 var(--mono); }
.tile > p { margin-top: 2px; color: var(--dim); font-size: 13px; line-height: 1.45; }
.tile .demo { flex: 1; margin-top: 14px; min-height: 0; }

@media (max-width: 1080px) {
    .tile, .tile.w5, .tile.w7 { grid-column: span 6; }
    .tile.w8 { grid-column: span 12; }
}

@media (max-width: 700px) {
    .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .tile, .tile.w5, .tile.w6, .tile.w7, .tile.w8 { grid-column: auto; grid-row: auto; }
    .tile .demo { min-height: 190px; }
}

/* ---------- The tour as a shell: commands on the left, their output on the right ---------- */

.shell { margin-top: 40px; overflow: hidden; }

.shell-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 480px; }

.shell-cmds {
    list-style: none;
    padding: 14px 10px;
    border-right: 1px solid var(--line);
}

.shell-cmds button {
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--dim);
    font: 14px/1.4 var(--mono);
    text-align: left;
    cursor: pointer;
    text-shadow: inherit;
}

.shell-cmds button::before { content: "$ "; }
.shell-cmds button:hover { color: var(--phosphor); }
.shell-cmds button[aria-pressed="true"] { background: var(--phosphor); color: var(--ink); text-shadow: none; }

.shell-out { padding: 18px 22px 22px; min-width: 0; display: flex; flex-direction: column; container-type: inline-size; }
.shell-out .echo { color: var(--dim); }
.shell-out .echo b { color: var(--phosphor); font-weight: 400; }
.shell-out h3 { margin-top: 10px; font: 33px/1.15 var(--pixel); }
.shell-out p { margin-top: 8px; color: var(--dim); max-width: 60ch; }
.shell-out .demo { flex: 1; margin-top: 18px; min-height: 280px; max-width: 640px; }

@media (max-width: 760px) {
    .shell-body { grid-template-columns: minmax(0, 1fr); }
    .shell-cmds { display: flex; overflow-x: auto; gap: 4px; border-right: 0; border-bottom: 1px solid var(--line); }
    .shell-cmds li { flex: none; }
}

/* ---------- Rows: a feature each, its words on one side and its screen on the other ---------- */

.row .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.row.flip .copy { order: 2; }

.row .visual { display: grid; gap: 16px; }
.row .visual .panel { padding: 18px; container-type: inline-size; }
.row .visual .demo { min-height: 300px; }
.row .visual.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row .visual.pair .demo { min-height: 260px; }

/* Half a page wide, a row's words flow onto as many lines as they need, as ls's do in a
   narrow terminal: in columns, the longest ran past the copy into the demo beside it. */
.row .ls { margin-top: 22px; display: flex; flex-wrap: wrap; column-gap: 3ch; color: var(--dim); }

@media (max-width: 560px) {
    .hero .ls { display: flex; flex-wrap: wrap; column-gap: 2.5ch; }
}
/* Half a page wide, a row's line is a step smaller than a section's, so it holds two lines. */
.row .lede { font-size: 33px; max-width: 24ch; }

/* The tour's line is about after launch; its asterisk points to the footnote for before. */
.lede .ast { margin-left: 0.15ch; color: var(--dim); }
.prose .footnote { margin-top: 12px; color: var(--dim); font-size: 14px; }

@media (max-width: 960px) {
    .row .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .row.flip .copy { order: 0; }
}

@media (max-width: 560px) { .row .visual.pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The index: shelves of apps going by ---------- */

.shelves { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* A shelf's name lines up with the page's text; its apps run on to the glass's edge. */
.shelf {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: max(16px, calc((100% - var(--page)) / 2 + clamp(16px, 4vw, 48px)));
}

.shelf-label {
    flex: none;
    width: 15ch;
    color: var(--dim);
    font-size: 14px;
}

.shelf-window {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}

@media (max-width: 700px) {
    .shelf { flex-direction: column; align-items: stretch; gap: 6px; }
}

.shelf-track, .shelf-track .copies { display: flex; gap: 14px; }
.shelf-track { animation: shelf var(--speed, 50s) linear infinite; }
.shelf:nth-child(even) .shelf-track { animation-direction: reverse; }
.shelf:hover .shelf-track { animation-play-state: paused; }

@keyframes shelf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .shelf-track { animation: none; } }

.shelf-track a {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(12, 9, 7, 0.5);
    color: var(--phosphor);
    text-decoration: none;
    font-size: 14px;
}

.shelf-track a:hover { border-color: var(--dim); }
.shelf-track img { width: 40px; height: 40px; border-radius: 22.5%; }
.shelf-track .tf { color: var(--ok); font-size: 12px; }

.indie-cta { margin-top: 36px; }

/* ---------- TaoolKit ---------- */

.kit-grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: start; }

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

.code { overflow: hidden; }

.code pre {
    padding: 18px 20px;
    overflow-x: auto;
    font: 14px/1.6 var(--mono);
    tab-size: 4;
}

.code .k { color: var(--amber); }
.code .s { color: var(--ok); }
.code .c { color: var(--dim); }
.code .f { color: #e9c9a8; }

.install { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.copyline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 9, 7, 0.5);
    font-size: 14px;
}

/* The link scrolls in its own box rather than widening the page on a phone. */
.copyline code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }

/* As wide as "[ copied ]" from the start, so the line doesn't shift when it says so. */
.copyline .btn { flex: none; min-width: calc(9.2ch + 22px); justify-content: center; }
.copyline code::-webkit-scrollbar { display: none; }

.code .snippets { display: grid; }
.code .snippets pre { grid-area: 1 / 1; }
.code .snippets pre:not(.on) { visibility: hidden; }
.code pre:focus-visible { outline: 1px dashed var(--dim); outline-offset: -6px; }

/* A product picked prints its code from the top, a line at a time. */
.code .snippets pre.printing { animation: print 420ms steps(14, end); }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .code .snippets pre.printing { animation: none; } }

/* The products are tabs: the one picked is the code's. */
.products { display: grid; gap: 12px; }

.products button {
    display: block;
    width: 100%;
    padding: 14px 16px;
    color: inherit;
    font: inherit;
    text-align: left;
    text-shadow: inherit;
    cursor: pointer;
}

.products button:hover { border-color: var(--faint); }
.products button[aria-selected="true"] { border-color: var(--phosphor); }
.products button:focus-visible { outline: 1px dashed var(--phosphor); outline-offset: 3px; }
.products b { font-weight: 400; color: var(--dim); }
.products b::before { content: "  "; white-space: pre; }
.products button[aria-selected="true"] b { color: var(--phosphor); }
.products button[aria-selected="true"] b::before { content: "▸ "; }
.products button > span:last-child { display: block; margin-top: 4px; color: var(--dim); font-size: 14px; }

/* ---------- Pricing ---------- */

.plans { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

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

.plan { padding: 22px 24px 24px; }
.plan h3 { display: flex; align-items: baseline; gap: 12px; font: 33px/1 var(--pixel); }
.plan .price { margin-top: 14px; font-size: 18px; }
.plan .price small { display: block; color: var(--dim); font-size: 14px; }
/* The launch offer in inverse video, as a terminal highlights: the one block on the card in it. */
.plan .offer {
    margin-top: 14px;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--phosphor);
    color: var(--ink);
    text-shadow: none;
    box-shadow: 0 0 18px rgba(236, 223, 197, 0.28);
    font-size: 14px;
}
.plan .offer b { font-weight: 700; }
.plan ul { margin-top: 18px; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.plan li { padding-left: 2ch; text-indent: -2ch; }
.plan li::before { content: "+ "; color: var(--dim); }
.plan .fair { margin-top: 16px; font-size: 13px; }
.plan .fair + .fair { margin-top: 4px; }
/* As the app's paywall puts it, a prompt line over what Pro adds. */
.plan .plus { margin-top: 18px; color: var(--dim); font-size: 14px; }
.plan .plus + ul { margin-top: 10px; }
/* What TaoolKit does in the developer's own app, apart from what taool does in its own. */
.plan .group { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); font: 400 22px/1 var(--pixel); color: var(--phosphor); }
.plan .group small { margin-left: 1.2ch; font: 13px var(--mono); color: var(--dim); }
.plan .group + ul { margin-top: 12px; }
.plan.pro-plan { border-color: var(--dim); }

/* ---------- Get it ---------- */

.get { text-align: left; }
.get .wordmark { font-size: 88px; }
@media (max-width: 520px) { .get .wordmark { font-size: 55px; } }

/* Asleep at the bottom of the page, on an edge of its own. */
.sleepy { width: 260px; margin-top: 72px; border-bottom: 2px solid var(--phosphor); box-shadow: 0 6px 8px -6px rgba(236, 223, 197, 0.45); }