/* outside-core.css - made by dev/outside/build-css.py from the Twiends design system, apps/outside/menu.css, base.css and landing.css, comments left out.
   Edit those and run it again; never edit this file. */
:root {
    --ink: #111111;
    --ink-2: #4a4a48;
    --ink-3: #62625f;
    --on-yellow-2: #3a3a38;
    --line: #e4e4df;
    --paper: #ffffff;
    --grey: #f4f4f1;
    --yellow: #ffe45c;
    --yellow-tint: #fff8d6;
    --dot: rgba(17, 17, 17, 0.16);
    --focus: var(--ink);
    --done: #14935a;
    --done-soft: #b3efcf;
    --stop: #e0442b;
    --stop-soft: #ffbfb0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-14: 56px;
    --space-22: 88px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-full: 999px;
    --edge: 0 0 0 1.5px #111111;
    --edge-strong: 0 0 0 2px #111111;
    --edge-inset: inset 0 0 0 2px #111111;
    --ring: 0 0 0 2px #111111, 0 0 0 6px #ffe45c, 0 0 0 8px #111111;
    --ring-on-yellow: 0 0 0 2px #111111, 0 0 0 6px #ffffff, 0 0 0 8px #111111;
    --btn-ring: 0 0 0 3px #ffe45c, 0 0 0 5px #111111;
    --toast: 0 0 0 1.5px #111111, 3px 3px 0 #111111;
    --dock: 0 -10px 30px rgba(0, 0, 0, 0.12);
    --page-w: 1180px;
    --text-w: 640px;
    --bar-h: 60px;
    --strip-h: 54px;
    --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-logo: Gabarito, "Plus Jakarta Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}
body { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tw-page { container-type: inline-size; }
.tw-wrap { box-sizing: border-box; width: 100%; max-width: var(--page-w); margin-inline: auto; padding-left: max(var(--space-8), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-8), env(safe-area-inset-right, 0px)); }
@container (max-width: 759px) {
    .tw-wrap { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
    .tw-hide-sm { display: none !important; }
}
@container (min-width: 760px) {
    .tw-show-sm { display: none !important; }
}
.tw-eyebrow { display: block; color: var(--ink-3); font-size: 12px; font-weight: 800; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.tw-dots { --dmask: none; position: relative; isolation: isolate; }
.tw-dots::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.3px); background-size: var(--space-3) var(--space-3); -webkit-mask-image: var(--dmask); mask-image: var(--dmask); }
.tw-on-grey { --hl: var(--yellow); background-color: var(--grey); }
.tw-on-yellow { --hl: var(--paper); background-color: var(--yellow); }
.tw-dots-middle { --dmask: radial-gradient(ellipse 65% 70% at 50% 45%, transparent 30%, #000 90%); }
.tw-dots-left { --dmask: radial-gradient(ellipse 60% 75% at 28% 45%, transparent 30%, #000 85%); }
.tw-dots-corner { --dmask: radial-gradient(circle at 100% 0%, #000 0%, transparent 60%); }
.tw-dots-bottom-left { --dmask: radial-gradient(ellipse 75% 55% at 0% 100%, transparent 35%, #000 90%); }
.tw-dots-top { --dmask: linear-gradient(to bottom, transparent 38%, #000 78%); }
.tw-hl { padding: 0 .05em; background: linear-gradient(transparent 55%, var(--hl, var(--yellow)) 55%, var(--hl, var(--yellow)) 92%, transparent 92%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tw-brand { display: inline-flex; align-items: center; gap: .35em; color: var(--ink); font-size: 26px; text-decoration: none; }
.tw-brand .tw-mark { width: 1.2em; height: 1.2em; }
.tw-mark { display: block; flex: none; }
.tw-mark .k { fill: var(--ink); }
.tw-mark .w { fill: var(--paper); }
.tw-mark .y { fill: var(--yellow); stroke: var(--ink); stroke-width: 3.5px; }
.tw-wordmark { font-family: var(--font-logo); font-size: 1em; font-weight: 800; letter-spacing: -.01em; line-height: 1; text-transform: lowercase; }
.tw-brand-lg .tw-wordmark { letter-spacing: -.04em; }
.tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font: inherit; font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .15s; }
.tw-btn:hover { transform: translateY(-1px); }
.tw-btn svg { flex: none; width: 18px; height: 18px; }
.tw-btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.tw-btn-sm svg { width: 16px; height: 16px; }
.tw-btn-lg { height: 58px; padding: 0 30px; font-size: 17.5px; }
.tw-btn-line { background: var(--paper); color: var(--ink); box-shadow: var(--edge-inset); }
.tw-btn-ring { box-shadow: var(--btn-ring); }
@media (prefers-reduced-motion: reduce) { .tw-btn { transition: none; } .tw-btn:hover { transform: none; } }
.tw-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-full); background: var(--yellow-tint); color: var(--ink); font-size: 12.5px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: var(--edge); }
.tw-chip svg { flex: none; width: 14px; height: 14px; }
.tw-chip-dark { background: var(--ink); color: var(--paper); box-shadow: none; }
.tw-chip-done { background: var(--done-soft); }
.tw-chip-stop { background: var(--stop-soft); }
.tw-state { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }
.tw-state svg { flex: none; width: 16px; height: 16px; }
.tw-state-done svg { color: var(--done); }
.tw-state-stop svg { color: var(--stop); }
.tw-states-ink .tw-chip-done { background: var(--ink); color: var(--paper); }
.tw-states-ink .tw-chip-done svg { color: var(--yellow); }
.tw-states-ink .tw-chip-stop { background: var(--paper); color: var(--ink-2); }
.tw-states-ink .tw-state-done svg { color: var(--ink); }
.tw-states-ink .tw-state-stop { color: var(--ink-2); }
.tw-states-ink .tw-state-stop svg { color: currentColor; }
.tw-states-ink .tw-algo i { background: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.tw-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); background: var(--grey); color: var(--ink-2); font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
.tw-tag-y { background: var(--yellow); color: var(--ink); box-shadow: var(--edge); }
.tw-card { box-sizing: border-box; border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: var(--edge); }
.tw-card-ring { box-shadow: var(--ring); }
.tw-on-yellow .tw-card-ring { box-shadow: var(--ring-on-yellow); }
.tw-faq { display: grid; gap: 10px; align-content: start; padding: var(--space-6) 26px; }
.tw-faq-ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-full); background: var(--yellow); box-shadow: var(--edge); }
.tw-faq-ic svg { width: 21px; height: 21px; }
.tw-faq h3 { margin: 4px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.tw-faq p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.tw-faq p b { color: var(--ink); }
.tw-face { display: block; flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--yellow-tint); object-fit: cover; }
.tw-faces { display: flex; flex: none; }
.tw-faces img { display: block; width: 28px; height: 28px; border: 2px solid var(--paper); border-radius: var(--radius-full); background: var(--yellow-tint); object-fit: cover; }
.tw-faces img + img { margin-left: -9px; }
.tw-on-grey .tw-faces img { border-color: var(--grey); }
.tw-on-yellow .tw-faces img { border-color: var(--yellow); }
.tw-card .tw-faces img { border-color: var(--paper); }
.tw-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); color: var(--ink); border-bottom: 2px solid var(--ink); }
.tw-bar-in { display: flex; align-items: center; gap: 6px; height: var(--bar-h); }
.tw-bar .tw-brand { margin-right: auto; }
.tw-bar-link { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: var(--radius-full); color: var(--ink-2); font-size: 14px; font-weight: 700; text-decoration: none; }
.tw-bar-link:hover, .tw-bar-link[aria-current="page"] { background: var(--grey); color: var(--ink); }
.tw-bar-grp { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.tw-bar .tw-btn { height: 40px; padding: 0 18px; font-size: 14px; }
.tw-me { display: inline-flex; flex: none; width: 36px; height: 36px; margin-left: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--yellow-tint); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--yellow), 0 0 0 5.5px var(--ink); }
.tw-me img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tw-bar-on-band { position: static; background: transparent; border-bottom: 0; }
.tw-bar-on-band .tw-bar-in { height: 68px; }
.tw-bar-on-band .tw-bar-link:hover { background: var(--paper); }
.tw-strip { background: var(--paper); color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.tw-strip-in { display: flex; align-items: center; gap: 14px; min-height: var(--strip-h); padding-block: var(--space-2); }
.tw-strip-title { flex: 1; min-width: 0; color: inherit; font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }
.tw-strip-title:hover { text-decoration: underline; text-underline-offset: 3px; }
@container (max-width: 759px) { .tw-strip { display: none; } }
.tw-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; gap: var(--space-3); padding: 10px max(var(--space-4), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px)); background: var(--yellow); color: var(--ink); border-top: 2px solid var(--ink); box-shadow: var(--dock); }
@container (max-width: 759px) { .tw-dock { display: flex; } }
.tw-dock-title { flex: 1; min-width: 0; color: inherit; font-size: 14.5px; font-weight: 800; line-height: 1.25; text-decoration: none; }
.tw-hero { overflow: hidden; }
.tw-hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: var(--space-12); padding-block: 28px 64px; }
.tw-hero-l { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; }
.tw-hero h1 { margin: 0; font-size: clamp(38px, 5.6cqw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.tw-lead { max-width: 540px; margin: 0; font-size: clamp(17px, 1.6cqw, 20px); font-weight: 500; line-height: 1.5; }
.tw-hero .tw-btn-lg { margin-top: 6px; }
.tw-hero-r { position: relative; justify-self: center; width: min(100%, 380px); }
.tw-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 14px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; box-shadow: var(--edge); }
.tw-pill b { font-weight: 800; }
.tw-stars { color: var(--ink); letter-spacing: 2px; }
.tw-safe { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; font-weight: 600; }
.tw-safe svg { flex: none; width: 16px; height: 16px; }
.tw-joined { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 600; }
.tw-joined b { font-weight: 800; font-variant-numeric: tabular-nums; }
@container (max-width: 899px) {
    .tw-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-14); padding-top: var(--space-3); }
    .tw-hero.tw-dots-left { --dmask: linear-gradient(to bottom, transparent 38%, #000 78%); }
}
.tw-bhero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--space-14); padding-block: var(--space-14) 64px; }
.tw-bhero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tw-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--on-yellow-2); font-size: 13.5px; font-weight: 700; }
.tw-crumbs a { color: inherit; text-decoration: none; }
.tw-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.tw-bhero h1 { margin: 0; font-size: clamp(32px, 3.7cqw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.tw-inshort { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tw-inshort li { position: relative; padding-left: 24px; font-size: 16.5px; font-weight: 600; line-height: 1.5; }
.tw-inshort li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--hl, var(--yellow)); box-shadow: var(--edge); }
.tw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 10px; color: var(--on-yellow-2); font-size: 13.5px; font-weight: 600; }
.tw-meta .tw-mark { width: 28px; height: 28px; }
.tw-algo { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 12.5px; font-weight: 800; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-algo i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--done); box-shadow: 0 0 0 3px var(--done-soft); }
.tw-bhero-fig { min-width: 0; margin: 0; }
.tw-bhero-cap { display: grid; gap: 6px; margin-top: 26px; padding: 14px var(--space-4); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); }
.tw-bhero-cap b { font-size: 15px; font-weight: 800; line-height: 1.3; }
.tw-bhero-cap p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
@container (max-width: 959px) {
    .tw-bhero-in { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 36px 44px; }
    .tw-bhero.tw-dots-left { --dmask: linear-gradient(to bottom, transparent 38%, #000 78%); }
}
.tw-post { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); box-shadow: var(--edge); }
.tw-post.tw-card-ring { transform: translateY(-6px); box-shadow: var(--ring); }
.tw-on-yellow .tw-post.tw-card-ring { box-shadow: var(--ring-on-yellow); }
.tw-post-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tw-post-head .tw-face { width: 34px; height: 34px; }
.tw-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tw-who b { font-size: 13.5px; font-weight: 800; }
.tw-who span { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.tw-post p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.tw-badge { position: absolute; top: -12px; right: 12px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); background: var(--yellow); color: var(--ink); font-size: 11.5px; font-weight: 800; box-shadow: var(--edge); }
.tw-score { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-top: 10px; border-top: 1px solid var(--line); }
.tw-score span { color: var(--ink-3); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tw-score b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tw-meter { height: 10px; overflow: hidden; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); }
.tw-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.tw-meter-y > i { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-article { display: flex; flex-direction: column; gap: 76px; padding-block: var(--space-14) 80px; }
.tw-sec { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 700px; }
.tw-sec-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tw-sec-text > * { margin: 0; }
.tw-sec h2 { font-size: clamp(26px, 3cqw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.tw-sec-text > p { font-size: 18px; line-height: 1.7; }
.tw-sec-text > p.tw-lead { font-size: clamp(17px, 1.6cqw, 20px); line-height: 1.5; }
.tw-sec-text a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tw-sec-text mark { padding: 0 .05em; background: linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%); color: inherit; }
@container (min-width: 1000px) {
    .tw-sec { display: grid; grid-template-columns: minmax(0, var(--text-w)) minmax(0, 1fr); column-gap: var(--space-14); align-items: start; max-width: none; }
    .tw-sec > .tw-figure { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 86px); }
}
@container (max-width: 759px) {
    .tw-sec-text > p { font-size: 17px; }
}
.tw-figure { margin: 0; min-width: 0; border-radius: var(--radius-lg); color: var(--ink); container-type: inline-size; }
.tw-figure-body { padding: 20px 20px 12px; }
.tw-figure-cap { max-width: 44ch; margin: 0; padding: 4px 20px 18px; color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1.5; }
.tw-bars { display: grid; gap: 10px; }
.tw-bar-row { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 48px; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 700; }
.tw-bar-row b { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tw-track { height: 14px; overflow: hidden; border-radius: var(--radius-full); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.tw-track > i { display: block; min-width: 3px; height: 100%; border-radius: inherit; background: var(--ink); }
.tw-bar-row.tw-top .tw-track > i { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-next-in { display: grid; gap: 22px; padding-block: var(--space-12) var(--space-14); }
.tw-next-in h2 { margin: 4px 0 0; font-size: clamp(24px, 2.6cqw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.tw-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@container (max-width: 899px) { .tw-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 559px) { .tw-next-grid { grid-template-columns: minmax(0, 1fr); } }
.tw-nx { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: var(--space-3); padding: 14px; border-radius: var(--radius-md); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--edge); transition: box-shadow .15s; }
.tw-nx:hover { box-shadow: 0 0 0 2.5px var(--ink); }
.tw-nx-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-nx-ic svg { width: 20px; height: 20px; }
.tw-nx-tool .tw-nx-ic { background: var(--paper); }
.tw-nx b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.tw-nx small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.tw-sec-h { display: grid; justify-items: center; gap: 10px; margin-bottom: 36px; text-align: center; }
.tw-sec-h h2 { max-width: 760px; margin: 0; font-size: clamp(29px, 3.6cqw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.tw-sec-h p { max-width: 580px; margin: 0; color: var(--ink-2); font-size: 17px; }
.tw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; text-align: center; }
.tw-stat b { display: block; font-size: clamp(38px, 4.4cqw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tw-stat b span { background: linear-gradient(transparent 60%, var(--hl, var(--yellow)) 60%, var(--hl, var(--yellow)) 92%, transparent 92%); }
.tw-stat small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 15.5px; font-weight: 600; }
.tw-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 0; color: var(--ink-2); font-size: 16px; }
.tw-rating b { color: var(--ink); font-weight: 800; }
.tw-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.tw-rev { display: grid; gap: 10px; align-content: start; margin: 0; padding: var(--space-4) 18px; }
.tw-rev-who { display: flex; align-items: center; gap: var(--space-3); }
.tw-rev-who b { display: block; font-size: 14.5px; font-weight: 800; }
.tw-rev-who small { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.tw-initial { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 800; line-height: 1; }
.tw-rev p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.tw-profile { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); box-shadow: var(--ring-on-yellow); }
.tw-profile-ban { height: 64px; background-color: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 9 8 3 16 9' fill='none' stroke='%23111111' stroke-opacity='.22' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E"); background-size: 16px 12px; background-position: 0 2px; border-bottom: 1.5px solid var(--ink); }
.tw-profile-grey { box-shadow: var(--ring); }
.tw-profile-grey .tw-profile-ban { background-color: var(--grey); }
.tw-profile-in { display: grid; gap: 14px; padding: 0 var(--space-5) var(--space-5); }
.tw-profile-top { display: flex; align-items: flex-end; gap: var(--space-3); margin-top: -32px; }
.tw-profile-top .tw-face { width: 72px; height: 72px; border: 4px solid var(--paper); box-shadow: var(--edge); }
.tw-profile-who { padding-bottom: 6px; line-height: 1.25; }
.tw-profile-who b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.tw-profile-who span { color: var(--ink-3); font-size: 14px; }
.tw-profile-by { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.tw-profile-by b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.tw-profile-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tw-toast { position: absolute; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px 6px 6px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: var(--toast); }
.tw-toast img { width: 26px; height: 26px; border-radius: var(--radius-full); object-fit: cover; }
.tw-toast i { color: var(--ink-3); font-style: normal; font-weight: 600; }
.tw-list { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--edge); }
.tw-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px var(--space-3); }
.tw-row + .tw-row { border-top: 1px solid var(--line); }
.tw-row .tw-face { width: 34px; height: 34px; }
.tw-row b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.tw-row small { display: block; overflow: hidden; color: var(--ink-3); font-size: 12px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.tw-row-lit { background: var(--yellow-tint); }
.tw-bar {
    --mb-ink: #111111;
    --mb-ink-2: #4a4a48;
    --mb-ink-3: #62625f;
    --mb-grey: #f4f4f1;
    --mb-line: #e6e6e0;
    --mb-paper: #ffffff;
    --mb-mint: #7ee2b8;
    --mb-h: 60px;
    container: tw-bar / inline-size;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 30;
    box-sizing: border-box;
    background: var(--mb-paper);
    color: var(--mb-ink);
    border-bottom: 2px solid var(--mb-ink);
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
.tw-bar *, .tw-bar *::before, .tw-bar *::after { box-sizing: border-box; }
.tw-bar a, .tw-bar a:hover, .tw-bar a:visited { text-decoration: none; }
.tw-bar :where(a, a:hover, a:visited) { color: inherit; }
.tw-bar a:focus-visible, .tw-bar summary:focus-visible { outline: 2px solid var(--mb-ink); outline-offset: 2px; }
.tw-bar .tw-bar-in { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 1220px; height: var(--mb-h); margin: 0 auto; padding: 0 max(32px, env(safe-area-inset-right, 0px)) 0 max(32px, env(safe-area-inset-left, 0px)); }
.tw-bar .tw-bar-member { display: none; }
.tw-in .tw-bar .tw-bar-guest, .tw-bar.tw-member .tw-bar-guest { display: none; }
.tw-in .tw-bar .tw-bar-member, .tw-bar.tw-member .tw-bar-member { display: flex; }
.tw-bar .tw-bar-brand { display: flex; flex: none; align-items: center; }
.tw-bar .tw-bar-brand svg { display: block; flex: none; width: auto; max-width: none; height: 30px; }
.tw-bar .tw-bar-tile { width: 30px; overflow: hidden; }
.tw-bar .tw-bar-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 12px; }
.tw-bar .tw-bar-link { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; border-radius: 999px; color: var(--mb-ink-2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.tw-bar .tw-bar-link:hover, .tw-bar .tw-bar-link[aria-current="page"] { background: var(--mb-grey); color: var(--mb-ink); }
.tw-bar .tw-bar-glyph { display: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.tw-bar .tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin: 0; padding: 0 18px; border: 0; border-radius: 999px; background: var(--mb-ink); color: var(--mb-paper); font: inherit; font-size: 14px; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; }
.tw-bar a.tw-btn, .tw-bar a.tw-btn:hover, .tw-bar a.tw-btn:visited { color: var(--mb-paper); }
.tw-bar .tw-bar-more { position: relative; flex: none; margin: 0; }
.tw-bar .tw-bar-more > summary { display: flex; list-style: none; user-select: none; cursor: pointer; }
.tw-bar .tw-bar-more > summary::-webkit-details-marker { display: none; }
.tw-bar .tw-bar-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 2; width: 300px; padding: 8px; border-radius: 10px; background: var(--mb-paper); color: var(--mb-ink); box-shadow: 0 0 0 1.5px var(--mb-ink), 3px 3px 0 var(--mb-ink); }
.tw-bar .tw-bar-menu a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; color: var(--mb-ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.tw-bar .tw-bar-menu a:hover, .tw-bar .tw-bar-menu a:focus-visible { background: var(--mb-grey); }
.tw-bar .tw-bar-menu small { display: block; margin-top: 2px; color: var(--mb-ink-3); font-size: 12.5px; font-weight: 500; }
.tw-bar .tw-bar-menu [hidden] { display: none; }
.tw-bar .tw-bar-menu-glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--mb-grey); color: var(--mb-ink); }
.tw-bar .tw-bar-menu-glyph svg { display: block; width: 17px; height: 17px; }
.tw-bar .tw-bar-menu-x .tw-bar-menu-glyph { background: var(--mb-ink); color: var(--mb-paper); }
.tw-bar .tw-signin { display: inline-flex; flex: none; align-items: center; }
.tw-bar .tw-signin > .tw-btn { border-radius: 999px 0 0 999px; padding-right: 14px; }
.tw-bar .tw-signin .tw-bar-more > summary { border-radius: 0 999px 999px 0; padding: 0 12px 0 10px; box-shadow: inset 1.5px 0 0 rgba(255, 255, 255, .3); }
.tw-bar .tw-bar-caret { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.tw-bar .tw-bar-more[open] .tw-bar-caret { transform: rotate(180deg); }
.tw-bar .tw-bar-acct > summary { align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; }
.tw-bar .tw-bar-acct > summary:hover, .tw-bar .tw-bar-acct[open] > summary { background: var(--mb-grey); }
.tw-bar .tw-bar-face { position: relative; display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--mb-mint); color: var(--mb-ink); box-shadow: 0 0 0 2px var(--mb-ink); font-size: 14px; font-weight: 800; line-height: 1; }
.tw-bar .tw-bar-face img { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 999px; object-fit: cover; }
.tw-bar .tw-bar-dot { position: absolute; top: -2px; right: -3px; width: 12px; height: 12px; border-radius: 999px; background: var(--mb-mint); box-shadow: 0 0 0 2px var(--mb-paper), 0 0 0 3px var(--mb-ink); }
.tw-bar .tw-bar-dot[hidden] { display: none; }
.tw-bar .tw-bar-who { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 6px; padding: 8px 10px 12px; border-bottom: 1px solid var(--mb-line); font-size: 14.5px; font-weight: 800; overflow-wrap: anywhere; }
.tw-bar .tw-bar-who .tw-bar-face { width: 40px; height: 40px; font-size: 16px; }
.tw-bar .tw-bar-new { padding: 3px 8px; border-radius: 999px; background: var(--mb-mint); color: var(--mb-ink); font-size: 12px; font-weight: 800; }
@container tw-bar (max-width: 759px) {
    .tw-bar .tw-bar-in { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
    .tw-bar .tw-bar-brand { width: 30px; overflow: hidden; }
    .tw-bar .tw-bar-nav { display: grid; flex: 1 1 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-items: center; gap: 0; max-width: 180px; margin-left: 16px; }
    .tw-bar .tw-bar-member .tw-bar-nav { max-width: 240px; }
    .tw-bar .tw-bar-link { position: relative; width: 44px; height: 44px; padding: 0; }
    .tw-bar .tw-bar-glyph { display: block; }
    .tw-bar .tw-bar-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .tw-bar .tw-btn { padding: 0 14px; }
    .tw-bar .tw-bar-more { position: static; }
    .tw-bar .tw-bar-menu { top: calc(100% + 8px); right: 8px; left: 8px; width: auto; }
}
@container tw-bar (min-width: 600px) {
    .tw-bar .tw-bar-menu .tw-bar-phone { display: none; }
}
@container tw-bar (max-width: 359px) {
    .tw-bar .tw-bar-nav { margin-left: 8px; }
    .tw-bar .tw-bar-link { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .tw-bar .tw-bar-caret { transition: none; } }
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/staging/apps/outside/fonts/plus-jakarta-sans.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
:root {
    --yellow: #7ee2b8;
    --yellow-tint: #e3f9ef;
    --ring: 0 0 0 2px #111111, 0 0 0 6px var(--yellow), 0 0 0 8px #111111;
    --btn-ring: 0 0 0 3px var(--yellow), 0 0 0 5px #111111;
}
.tw-logo [fill="#7ee2b8"] { fill: var(--yellow); }
:root {
    --page-w: 1220px;
    --edge: 0 0 0 1px #111111;
    --edge-strong: 0 0 0 1px #111111;
    --edge-inset: inset 0 0 0 1px #111111;
}
body { font-weight: 400; }
:is(.tw-prose, .tw-panel-text, .tw-faq, .tw-art-lead, .tw-lead) :is(b, strong) { font-weight: 700; }
.tw-strip { border-bottom-width: 1px; }
.tw-brand .tw-logo { display: block; width: auto; height: 30px; }
.tw-in .tw-dock { display: none; }
.tw-in .tw-has-dock .tw-foot-in { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 759px) {
    .tw-dock { display: flex; }
    .tw-has-dock .tw-foot-in { padding-bottom: calc(var(--space-12) + 72px + env(safe-area-inset-bottom, 0px)); }
}
.tw-bar { transition: background-color .2s; }
.tw-bar-promo { display: none; }
.tw-promo-on .tw-bar { background: var(--yellow); }
.tw-promo-on .tw-bar-in { display: none; }
.tw-promo-on .tw-bar-promo { display: flex; align-items: center; gap: var(--space-4); height: var(--bar-h); animation: tw-bar-in .25s ease-out; }
.tw-bar-promo .tw-brand { margin-right: auto; }
.tw-bar-promo-text { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; text-align: right; }
.tw-bar-promo .tw-btn { flex: none; height: 40px; padding: 0 18px; font-size: 14px; }
@keyframes tw-bar-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@container (max-width: 759px) {
    .tw-bar-promo { gap: var(--space-3); }
    .tw-bar-promo .tw-brand { flex: none; width: 26px; overflow: hidden; margin-right: 0; }    
    .tw-bar-promo .tw-logo { flex: none; max-width: none; }
    .tw-bar-promo-text { flex: 1; font-size: 13px; text-align: left; }
    .tw-bar-promo .tw-btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .tw-bar { transition: none; } .tw-promo-on .tw-bar-promo { animation: none; } }
.tw-foot { background: var(--paper); border-top: 1px solid var(--ink); }
.tw-foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8) var(--space-14); padding-block: var(--space-12) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
.tw-foot-brand { display: grid; justify-items: start; gap: var(--space-4); align-content: start; }
.tw-foot .tw-brand .tw-logo { height: 26px; }
.tw-foot-note { max-width: 460px; margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
.tw-foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-8) var(--space-12); align-content: start; }
.tw-foot-cols div { display: grid; align-content: start; gap: 10px; }
.tw-foot-cols h2 { margin: 0 0 2px; color: var(--ink-3); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tw-foot-cols a { color: var(--ink); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.tw-foot-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tw-foot-year { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; grid-column: 1 / -1; margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; line-height: 1.55; }
.tw-foot-year address { font-style: normal; }
.tw-foot-year b { color: var(--ink-2); font-weight: 700; }
@container (max-width: 759px) {
    .tw-foot-in { grid-template-columns: minmax(0, 1fr); }
    .tw-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
:root { --link: #3e9a7b; --link-weight: 450; }
:is(.tw-prose, .tw-art-lead, .tw-panel-text, .tw-sec-text, .tw-lead, .tw-faq) a:not(.tw-btn, .lrn_box, .lrn_row, .tw-pic, .tw-chap, .tw-nx) { color: var(--link); font-weight: var(--link-weight); text-decoration: none; }
:is(.tw-prose, .tw-art-lead, .tw-panel-text, .tw-sec-text, .tw-lead, .tw-faq) a:not(.tw-btn, .lrn_box, .lrn_row, .tw-pic, .tw-chap, .tw-nx):hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
body { overflow-x: clip; }        
.tw-land h2, .tw-land .tw-prose h2 { margin: 0; font-size: clamp(28px, 3.4cqw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.tw-land h2 a, .tw-land .tw-hero h1 a { color: inherit; text-decoration: none; }
.tw-land .tw-btn-lg small { font-size: .75em; font-weight: 700; }
.tw-home-hero { overflow: visible; overflow-x: clip; z-index: 1; }
.tw-page:has(.tw-home-hero) .tw-bar { border-bottom: 0; }
.tw-page:has(.tw-home-hero) .tw-foot { border-top: 0; }
.tw-sg-sky { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.tw-home-hero-in { --sg-space: 100px; position: relative; display: grid; justify-items: center; padding-top: clamp(40px, 7vh, 72px); text-align: center; }
.tw-home-hero h1 { position: relative; z-index: 2; max-width: 940px; margin: 0; font-size: clamp(34px, 5cqw, 60px); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; text-wrap: balance; }
.tw-home-hero h1 a { white-space: nowrap; }
.tw-sg { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; margin: calc(var(--sg-space) + 5px) 0 0; }
.tw-sg-you { position: relative; width: 116px; height: 116px; }
.tw-sg-you img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--paper); box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px var(--yellow), 0 0 0 9.5px var(--ink); }
.tw-sg-count { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 24px; }
.tw-sg b { font-variant-numeric: tabular-nums; }
.tw-sg-face { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: var(--radius-full); background: url(/img/stargate/faces-first.webp) calc(var(--c) * -56px) calc(var(--r) * -56px) / calc(var(--sg-cols, 6) * 56px) auto no-repeat; transform: translate(var(--x), var(--y)); }
.tw-sg-new { --sg-cols: 15; background-image: url(/img/stargate/faces-fly.webp); opacity: var(--o, .9); }
.tw-sg-go { opacity: 0; transform: translate(0, 0) scale(.35); transition: transform 1.2s cubic-bezier(.55, 0, .8, .3), opacity 1.2s cubic-bezier(.9, 0, 1, .6); }
.tw-home-cta { position: relative; z-index: 3; }
.tw-home-hero .tw-home-cta { margin: clamp(36px, 5.5vh, 52px) 0 -29px; }
.tw-home-hero.tw-on-yellow .tw-sg-you img { box-shadow: 0 0 0 5px var(--paper); }
.tw-home-hero.tw-on-yellow .tw-btn-ring { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
@container (max-width: 759px) {
    .tw-home-hero { --sg-u: clamp(88px, 13svh, 132px); --sg-face: 44px; --sg-rx: min(calc(50cqw - var(--sg-face) / 2 - 10px), calc(var(--sg-u) * 1.75)); --sg-ry: calc(var(--sg-u) * .68); }
    .tw-home-hero-in { grid-template-rows: minmax(0, .6fr) auto minmax(0, 1fr) auto minmax(0, .9fr) auto minmax(0, 1.3fr) auto; row-gap: 14px; min-height: calc(100vh - var(--bar-h)); min-height: calc(100svh - var(--bar-h)); padding-block: var(--space-2) var(--space-6); }
    .tw-home-hero h1 { grid-row: 2; font-size: clamp(30px, min(calc((100cqw - 32px) / 8.6), 4.6svh), 46px); }
    .tw-sg { grid-row: 4; margin: 0; }
    .tw-home-hero .tw-home-cta { grid-row: 6; height: clamp(58px, 6.6svh, 64px); margin: 0; font-size: clamp(17.5px, 2.05svh, 19px); }
    .tw-sg-you { width: var(--sg-u); height: var(--sg-u); }
    .tw-sg-count { font-size: clamp(17px, 2.1svh, 20px); }
    .tw-sg-face { width: var(--sg-face); height: var(--sg-face); margin: calc(var(--sg-face) / -2) 0 0 calc(var(--sg-face) / -2); background-position: calc(var(--c) * -1 * var(--sg-face)) calc(var(--r) * -1 * var(--sg-face)); background-size: calc(var(--sg-face) * var(--sg-cols, 6)) auto; }
    .tw-sg-you .tw-sg-face { transform: translate(calc(var(--sx) * var(--sg-rx)), calc(var(--sy) * var(--sg-ry))); }
}
@supports (width: round(1.5px, 1px)) {
    @container (max-width: 759px) { .tw-home-hero { --sg-face: round(calc(var(--sg-u) * .46), 1px); } }
}
.tw-press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-8); margin-top: calc(var(--sg-space) - 35px); opacity: .82; }
.tw-press img { display: block; width: auto; height: 23px; }
@container (max-width: 759px) {
    .tw-press { grid-row: 8; gap: var(--space-3) var(--space-5); margin-top: 0; }
    .tw-press img { height: clamp(18px, 2.3svh, 22px); }
}
.tw-video-open { justify-self: start; margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 19px; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.tw-video-open svg { width: 30px; height: 30px; }
.tw-video { width: min(100% - 32px, min(82vh, 760px) * 1000 / 1782); max-width: none; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--ink); box-shadow: var(--edge); overflow: visible; }
.tw-video::backdrop { background: rgb(17 17 17 / .7); }
.tw-video-frame { aspect-ratio: 1000 / 1782; }
.tw-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); }
.tw-video-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border: 0; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 26px; line-height: 1; box-shadow: var(--edge); cursor: pointer; }
.tw-panel-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); align-items: center; gap: clamp(var(--space-12), 7cqw, var(--space-22)); padding-block: var(--space-22); }
.tw-panel-alt .tw-panel-pic { order: -1; }
.tw-panel-alt .tw-panel-in { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }
.tw-panel-text { display: grid; gap: var(--space-5); }
.tw-panel-text p { margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.tw-panel-text b { color: var(--ink); font-weight: 700; }
.tw-panel-pic { display: block; }
.tw-panel-pic img { display: block; width: 100%; height: auto; border-radius: var(--radius-full); background: var(--paper); box-shadow: 0 0 0 6px var(--paper); }
@container (max-width: 759px) {
    .tw-panel-in, .tw-panel-alt .tw-panel-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-14); }
    .tw-panel-alt .tw-panel-pic { order: 0; }
    .tw-panel-pic { justify-self: center; width: min(100%, 300px); }
    .tw-panel-pic img { border-radius: var(--radius-lg); box-shadow: none; background: none; }
    .tw-panel-text p { font-size: 17px; }
}
.tw-home-guides { padding-block: var(--space-22); }
.tw-home-guides-head { display: grid; justify-items: center; gap: var(--space-5); max-width: 880px; margin: 0 auto var(--space-14); text-align: center; }
.tw-home-guides-head p { margin: 0; color: var(--on-yellow-2); font-size: 18px; line-height: 1.65; }
.tw-home-guides-head b { color: var(--ink); font-weight: 800; }
.tw-guide-row { display: flex; justify-content: center; gap: var(--space-22); }
.tw-guide { display: grid; justify-items: center; align-content: start; gap: 4px; width: 280px; color: var(--ink); text-align: center; text-decoration: none; }
.tw-guide img { width: 220px; height: 220px; margin-bottom: var(--space-6); border-radius: var(--radius-full); background: var(--paper); box-shadow: 0 0 0 5px var(--paper); transition: transform .15s; }
.tw-guide:hover img { transform: translateY(-3px); }
.tw-guide h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tw-guide:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tw-guide p { margin: 0; color: var(--on-yellow-2); font-size: 15.5px; }
@container (max-width: 759px) {
    .tw-home-guides { padding-block: var(--space-14); }
    .tw-home-guides-head { margin-bottom: var(--space-8); }
    .tw-home-guides-head p { font-size: 17px; }
    .tw-guide-row { gap: var(--space-4); }
    .tw-guide { width: 160px; }
    .tw-guide img { width: 132px; height: 132px; margin-bottom: var(--space-3); }
    .tw-guide h3 { font-size: 17px; }
    .tw-guide p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .tw-guide img { transition: none; } }
.tw-home-faq-in { padding-block: var(--space-22); }
.tw-home-q { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 6px clamp(var(--space-12), 7cqw, var(--space-22)); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.tw-home-q:first-child { padding-top: 0; border-top: 0; }
.tw-home-q:last-child { padding-bottom: 0; }
.tw-home-q h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.tw-home-q p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
@container (max-width: 759px) {
    .tw-home-faq-in { padding-block: var(--space-14); }
    .tw-home-q { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-5); }
    .tw-home-q h3 { font-size: 18px; }
    .tw-home-q p { font-size: 16px; }
}
.tw-close-in { display: grid; justify-items: center; gap: var(--space-6); padding-block: var(--space-14); text-align: center; }
.tw-home-close .tw-close-in { gap: var(--space-8); padding-block: var(--space-22); }