/* Shared SubA design system. */
:root { --ink: #0F0F0E; --paper: #FBFBF9; --muted: #5C5C58; --body: #3A3A37; --line: #E2E1DC; --accent: #FFD60A; }
body { margin: 0; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--muted); }

.layout-001.layout-001 { background: var(--paper); color: var(--ink); font-family: 'Inter Tight', system-ui, sans-serif; font-size: 16px; line-height: 1.6; min-height: 100vh; }
.layout-002.layout-002 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 64px); }
.layout-003.layout-003 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 40px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.layout-004.layout-004 { text-decoration: none; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.layout-005.layout-005 { font-weight: 400; color: var(--muted); }
.layout-006.layout-006 { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.layout-007.layout-007 { text-decoration: none; }
.layout-008.layout-008 { padding: clamp(64px, 10vw, 140px) 0 clamp(56px, 8vw, 112px); }
.layout-009.layout-009 { display: flex; flex-wrap: wrap; gap: 8px 32px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px; }
.layout-010.layout-010 { margin: 0; font-size: clamp(52px, 10.5vw, 172px); line-height: 0.92; letter-spacing: -0.05em; font-weight: 500; }
.layout-011.layout-011 { display: block; }
.layout-012.layout-012 { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; background: var(--accent); padding: 0 0.12em; }
.layout-013.layout-013 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: clamp(48px, 7vw, 96px); }
.layout-014.layout-014 { margin: 0; max-width: 600px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--body); }
.layout-015.layout-015 { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.layout-016.layout-016 { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 500; }
.layout-017.layout-017 { display: inline-flex; align-items: center; min-height: 52px; font-weight: 500; }
.layout-018.layout-018 { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--ink); }
.layout-019.layout-019 { display: flex; flex-wrap: wrap; gap: 8px 32px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 48px; }
.layout-020.layout-020 { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.layout-021.layout-021 { flex: 1 1 420px; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.layout-022.layout-022 { height: 300px; overflow: hidden; font-size: 11px; line-height: 1.45; color: #A3A29C; text-align: justify; hyphens: auto; }
.layout-023.layout-023 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.layout-024.layout-024 { height: 300px; background: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 24px 36px; box-sizing: border-box; text-align: center; }
.layout-025.layout-025 { margin: 0; color: var(--paper); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35; font-weight: 500; }
.layout-026.layout-026 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; margin-top: clamp(56px, 7vw, 96px); }
.layout-027.layout-027 { margin: 0; max-width: 820px; font-size: clamp(26px, 3vw, 42px); line-height: 1.18; letter-spacing: -0.03em; font-weight: 500; }
.layout-028.layout-028 { margin: 0; max-width: 300px; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 20px; line-height: 1.4; color: var(--body); }
.layout-029.layout-029 { display: block; margin-top: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-style: normal; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.layout-030.layout-030 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
.layout-031.layout-031 { margin: 0; max-width: 760px; font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.04em; font-weight: 500; }
.layout-032.layout-032 { display: flex; flex-wrap: wrap; gap: 48px; }
.layout-033.layout-033 { flex: 1 1 280px; border-top: 1px solid var(--ink); padding-top: 20px; }
.layout-034.layout-034 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); line-height: 1.7; }
.layout-035.layout-035 { margin: 28px 0 12px; font-size: 24px; letter-spacing: -0.02em; font-weight: 500; }
.layout-036.layout-036 { margin: 0; color: var(--body); }
.layout-037.layout-037 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
.layout-038.layout-038 { margin: 0; font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.04em; font-weight: 500; }
.layout-039.layout-039 { margin: 0; display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 48px); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(40px, 7.4vw, 120px); line-height: 1.1; letter-spacing: -0.04em; font-weight: 400; }
.layout-040.layout-040 { display: flex; flex-wrap: wrap; gap: 24px 48px; margin-top: 56px; }
.layout-041.layout-041 { margin: 0; flex: 1 1 380px; color: var(--body); }
.layout-042.layout-042 { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 64px; }
.layout-043.layout-043 { flex: 1 1 420px; }
.layout-044.layout-044 { margin: 0 0 24px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 500; }
.layout-045.layout-045 { margin: 0 0 24px; color: var(--body); }
.layout-046.layout-046 { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-weight: 500; }
.layout-047.layout-047 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 48px; }
.layout-048.layout-048 { display: flex; flex-wrap: wrap; gap: 12px 48px; padding: 28px 0; border-top: 1px solid var(--line); }
.layout-049.layout-049 { margin: 0; flex: 1 1 300px; font-size: 20px; letter-spacing: -0.02em; font-weight: 500; }
.layout-050.layout-050 { margin: 0; flex: 2 1 480px; color: var(--body); }
.layout-051.layout-051 { display: flex; flex-wrap: wrap; gap: 12px 48px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.layout-052.layout-052 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding: 40px 0 56px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--muted); }
.layout-053.layout-053 { margin: 0; }
.layout-054.layout-054 { margin: 4px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.layout-055.layout-055 { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.layout-056.layout-056 { text-decoration: underline; }
.layout-057.layout-057 { padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); }
.layout-058.layout-058 { margin: 0; max-width: 1100px; font-size: clamp(48px, 8vw, 128px); line-height: 0.94; letter-spacing: -0.05em; font-weight: 500; }
.layout-059.layout-059 { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.layout-060.layout-060 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: clamp(40px, 6vw, 80px); }
.layout-061.layout-061 { list-style: none; margin: 0; padding: 0; }
.layout-062.layout-062 { display: flex; flex-wrap: wrap; gap: 16px 48px; padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--ink); }
.layout-063.layout-063 { flex: 0 0 220px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); line-height: 1.7; }
.layout-064.layout-064 { display: block; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 72px; line-height: 1; color: var(--ink); margin-bottom: 12px; }
.layout-065.layout-065 { flex: 1 1 480px; max-width: 720px; }
.layout-066.layout-066 { margin: 0 0 16px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 500; }
.layout-067.layout-067 { display: flex; flex-wrap: wrap; gap: 16px 48px; padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.layout-068.layout-068 { flex: 1 1 480px; max-width: 840px; }
.layout-069.layout-069 { margin: 0 0 32px; color: var(--body); max-width: 720px; }
.layout-070.layout-070 { margin: 0 0 32px; }
.layout-071.layout-071 { aspect-ratio: 16 / 7; min-height: 220px; background: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 clamp(20px, 5vw, 64px) clamp(24px, 3vw, 40px); box-sizing: border-box; text-align: center; }
.layout-072.layout-072 { margin: 0; color: var(--paper); font-size: clamp(16px, 1.7vw, 22px); line-height: 1.4; font-weight: 500; max-width: 640px; }
.layout-073.layout-073 { margin-top: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.layout-074.layout-074 { margin: 0; color: var(--body); max-width: 720px; }
.layout-075.layout-075 { background: var(--accent); padding: 0 0.1em; }
.layout-076.layout-076 { margin: 0; padding: 40px 0; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 8px 32px; font-weight: 500; }
.layout-077.layout-077 { padding: 32px 0 56px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.layout-078.layout-078 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.layout-079.layout-079 { margin: 0; max-width: 1160px; font-size: clamp(44px, 7vw, 112px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 500; }
.layout-080.layout-080 { margin: clamp(40px, 6vw, 72px) 0 0 auto; max-width: 640px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--body); }
.layout-081.layout-081 { display: flex; flex-wrap: wrap; gap: 16px 48px; padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--ink); }
.layout-082.layout-082 { flex: 0 0 220px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.layout-083.layout-083 { flex: 1 1 480px; max-width: 760px; }
.layout-084.layout-084 { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.layout-085.layout-085 { display: flex; flex-wrap: wrap; gap: 16px 48px; }
.layout-086.layout-086 { margin: clamp(48px, 6vw, 80px) 0 0; padding: clamp(32px, 5vw, 64px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.layout-087.layout-087 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px clamp(24px, 4vw, 64px); }
.layout-088.layout-088 { flex: 1 1 320px; }
.layout-089.layout-089 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.layout-090.layout-090 { margin: 0; font-size: clamp(40px, 6vw, 96px); line-height: 1; letter-spacing: -0.045em; font-weight: 500; }
.layout-091.layout-091 { flex: 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(24px, 3vw, 40px); color: var(--muted); }
.layout-092.layout-092 { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: clamp(44px, 6.6vw, 104px); line-height: 1; letter-spacing: -0.025em; }
.layout-093.layout-093 { display: flex; flex-wrap: wrap; gap: 8px 48px; margin-top: 40px; color: var(--body); }
.layout-094.layout-094 { font-weight: 500; color: var(--ink); }
.layout-095.layout-095 { flex: 1 1 320px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.layout-096.layout-096 { display: flex; flex-wrap: wrap; gap: 16px 48px; padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.layout-097.layout-097 { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--ink); }
.layout-098.layout-098 { aspect-ratio: 16 / 6; min-height: 220px; background: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 clamp(20px, 5vw, 64px) clamp(24px, 3vw, 44px); box-sizing: border-box; text-align: center; }
.layout-099.layout-099 { margin: 0; color: var(--paper); font-size: clamp(16px, 1.8vw, 24px); line-height: 1.4; font-weight: 500; max-width: 760px; }
.layout-100.layout-100 { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; font-weight: 500; }
.layout-101.layout-101 { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; background: var(--ink); color: var(--paper); text-decoration: none; }
.layout-102.layout-102 { padding: clamp(64px, 9vw, 128px) 0 clamp(48px, 6vw, 80px); }
.layout-103.layout-103 { margin: 0; max-width: 1100px; font-size: clamp(44px, 7vw, 112px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 500; }
.layout-104.layout-104 { background: var(--ink); color: var(--paper); margin: 0 calc(-1 * clamp(16px, 4vw, 64px)); padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 64px); }
.layout-105.layout-105 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #B5B4AE; margin-bottom: clamp(32px, 5vw, 64px); }
.layout-106.layout-106 { margin: 0; font: inherit; }
.layout-107.layout-107 { margin: 0 0 12px; color: #B5B4AE; }
.layout-108.layout-108 { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(26px, 5.4vw, 84px); line-height: 1.05; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.layout-109.layout-109 { font: inherit; }
.layout-110.layout-110 { color: var(--accent); }
.layout-111.layout-111 { margin: clamp(32px, 5vw, 64px) 0 0; max-width: 760px; color: #D9D8D2; }
.layout-112.layout-112 { color: var(--paper); }
.layout-113.layout-113 { display: flex; flex-wrap: wrap; gap: 16px 48px; padding: clamp(56px, 7vw, 96px) 0; border-bottom: 1px solid var(--line); }
.layout-114.layout-114 { flex: 1 1 520px; max-width: 840px; }
.layout-115.layout-115 { margin: 0 0 32px; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 500; }
.layout-116.layout-116 { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid var(--ink); }
.layout-117.layout-117 { flex: 0 0 32px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); padding-top: 4px; }
.layout-118.layout-118 { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.layout-119.layout-119 { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.layout-120.layout-120 { margin: 32px 0 0; color: var(--body); }
.layout-121.layout-121 { display: flex; flex-wrap: wrap; gap: 16px 48px; padding: clamp(56px, 7vw, 96px) 0; }
.layout-122.layout-122 { margin: 0 0 24px; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 500; }
.layout-123.layout-123 { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-weight: 500; }
.layout-124.layout-124 { padding: 32px 0 56px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--muted); }

/* Keep the original design while allowing prompt panels to shrink on phones. */
@media (max-width: 600px) {
  .layout-068.layout-068 { min-width: 0; }
  .layout-072.layout-072, .layout-099.layout-099 { width: 100%; min-width: 0; }
}

/* Decorative arrows preserve the original link labels. */
a[data-arrow]::after { content: " →"; white-space: pre; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .layout-071.layout-071, .layout-098.layout-098 { aspect-ratio: auto; }
}