/* Brightpeas: tokens from the design canvas (Library, New series, Syllabus, Series, Player, Episode). */ :root { --bg: #F4F1EA; --surface: #FFFDF8; --line: #DDD6C8; --line-strong: #C9C1B1; --text: #1B1B18; --text-2: #45423C; --muted: #5E5A52; --accent: #1F5F5B; --accent-hover: #16453F; --accent-soft: #E3ECEA; --warn: #8A4610; --warn-soft: #F6E7D8; --danger: #9B2C1F; --ink: #1B1B18; --ink-text: #F4F1EA; --ink-muted: #C9C3B6; --danger-soft: #F8E3DF; --on-accent: #FFFFFF; --pea-off: #DDD6C8; --note-line: #B5AD9D; --lit: #E2A628; --lit-glow: rgba(226, 166, 40, 0.5); --serif: Fraunces, Georgia, serif; --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --mini-h: 0px; } /* Dark mode: follows the phone unless Your account fixes it (data-theme on ). The player is always dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0E1514; --surface: #16201E; --line: #25322F; --line-strong: #364642; --text: #EEF0EA; --text-2: #C6CDC7; --muted: #8E9A95; --accent: #7CE0C3; --accent-hover: #A3EBD5; --accent-soft: #173430; --warn: #F0B27A; --warn-soft: #3A2A1A; --danger: #F29A8E; --danger-soft: #3A1F1B; --ink: #1C2A27; --ink-text: #EEF0EA; --ink-muted: #A9B5B0; --on-accent: #0E1514; --pea-off: #2B3A37; --note-line: #3A4A46; --lit: #F2C14E; --lit-glow: rgba(242, 193, 78, 0.6); } } :root[data-theme="dark"], body.dark { color-scheme: dark; --bg: #0E1514; --surface: #16201E; --line: #25322F; --line-strong: #364642; --text: #EEF0EA; --text-2: #C6CDC7; --muted: #8E9A95; --accent: #7CE0C3; --accent-hover: #A3EBD5; --accent-soft: #173430; --warn: #F0B27A; --warn-soft: #3A2A1A; --danger: #F29A8E; --danger-soft: #3A1F1B; --ink: #1C2A27; --ink-text: #EEF0EA; --ink-muted: #A9B5B0; --on-accent: #0E1514; --pea-off: #2B3A37; --note-line: #3A4A46; --lit: #F2C14E; --lit-glow: rgba(242, 193, 78, 0.6); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.45; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } main { max-width: 560px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px calc(32px + var(--mini-h) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; } /* ---- type ---- */ .brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .brand .wm span { color: var(--accent); } .brand .mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; } .brand.hero { margin-top: 28px; gap: 14px; font-size: 34px; } .brand.hero .mark { width: 56px; height: 56px; border-radius: 12.5px; box-shadow: 0 2px 8px rgba(31, 95, 91, 0.25); } /* Bright peas: on the sign-in page the logo's peas light up once, one after another. */ .brand.hero .mark .pea { animation: mark-lit 2.2s ease-in-out 0.5s 1 both; } .brand.hero .mark .pea:nth-of-type(2) { animation-delay: 0.8s; } .brand.hero .mark .pea:nth-of-type(3) { animation-delay: 1.1s; } @keyframes mark-lit { 0%, 100% { fill: #1F5F5B; } 25%, 50% { fill: #F2C14E; } } .greet { margin: -6px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; } .page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .page-top .back { min-width: 0; } .mark-link { display: flex; flex-shrink: 0; border-radius: 7px; } .mark-link .mark { width: 30px; height: 30px; } h1 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } h2 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .eyebrow.warn { color: var(--warn); } .lede { margin: 0; font-size: 15px; color: var(--text-2); } .muted { color: var(--muted); font-size: 14px; } .small { font-size: 13px; } /* ---- layout bits ---- */ .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .stack { display: flex; flex-direction: column; gap: 10px; } .stack-lg { display: flex; flex-direction: column; gap: 16px; } /* ---- buttons ---- */ .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16px; text-decoration: none; } .btn:hover { background: var(--accent-hover); color: var(--on-accent); } .btn[disabled] { opacity: 0.55; cursor: default; } .btn.secondary { background: var(--surface); color: var(--accent); border: 1px solid var(--line-strong); } .btn.secondary:hover { background: var(--accent-soft); } .btn.secondary.danger { color: var(--danger); } .btn.secondary.danger:hover { background: var(--danger-soft); } details.finished > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; list-style: none; } details.finished > summary::-webkit-details-marker { display: none; } details.finished > summary::after { content: '▸'; margin-left: 8px; color: var(--muted); } details.finished[open] > summary::after { content: '▾'; } details.finished > .stack { margin-top: 12px; } .btn.small { min-height: 44px; font-size: 15px; padding: 0 14px; } .back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--accent); } .link-btn { padding: 0 4px; min-height: 44px; border: 0; background: none; font-weight: 600; font-size: 14px; color: var(--accent); text-decoration: underline; } .icon-btn { width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: 22px; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } .icon-btn:hover { background: var(--accent-soft); color: var(--accent); } .icon-btn[disabled] { opacity: 0.3; cursor: default; background: none; } .icon-btn.dl.done { color: var(--accent); } .icon-btn.dl.busy[disabled] { opacity: 1; } .dl-pct { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent); } .dl-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .dl-row .btn.small { min-height: 40px; } .card.dl-card { flex-direction: row; align-items: center; gap: 12px; } .subhead { font-size: 18px; margin: 0; } .subhead .muted { font-family: var(--sans); font-size: 14px; font-weight: 500; } .card-summary { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .avatar { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text); } /* ---- forms ---- */ label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; } label.field .opt { font-weight: 400; color: var(--muted); } input[type=text], input[type=email] { height: 52px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 16px; font-weight: 400; } input.code { height: 64px; border: 2px solid var(--accent); font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: 0.5em; text-align: center; padding-left: 0.5em; } fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; } legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; } .level { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); text-align: left; width: 100%; } .level .num { width: 32px; height: 32px; flex-shrink: 0; border-radius: 16px; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--muted); } .level[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); } .level[aria-pressed=true] .num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .level .name { display: block; font-size: 15px; font-weight: 600; } .level .detail { display: block; font-size: 13px; color: var(--muted); } .note { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 1px dashed var(--note-line); font-size: 13px; color: var(--text-2); } .error { padding: 12px 14px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 14px; } /* ---- cards and lists ---- */ .card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); } a.card:hover { border-color: var(--line-strong); color: var(--text); } .card .title { font-size: 16px; font-weight: 600; } .pill { flex-shrink: 0; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; } .pill.solid { border: 0; background: var(--accent-soft); color: var(--accent); padding: 4px 8px; } .status { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--accent); } .status.busy { color: var(--warn); } .status.bad { color: var(--danger); } .bar { height: 6px; border-radius: 3px; background: #E8E2D5; overflow: hidden; } .bar > div { height: 6px; background: var(--accent); } .list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .list > li, .list > div { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } ol.list, ul.list { margin: 0; padding: 0; } .ep-num { width: 26px; flex-shrink: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--accent); } .grow { flex-grow: 1; min-width: 0; } .ep-title { font-size: 15px; font-weight: 600; } .ep-title input { width: 100%; height: 40px; font-size: 15px; font-weight: 600; } .ep-meta { font-size: 13px; color: var(--muted); line-height: 1.35; } .ep-link { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; color: var(--text); } .empty { padding: 24px 20px 28px; border-radius: 14px; border: 1px dashed var(--line-strong); text-align: center; color: var(--muted); } /* An empty pod: the logo's pod with no peas grown yet. */ .empty::before { content: ''; display: block; width: 84px; height: 46px; margin: 0 auto 12px; background: var(--accent); opacity: 0.8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cg transform='rotate(-8 60 32)'%3E%3Cpath d='M6 32C24 6 96 6 114 32C96 58 24 58 6 32Z' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cg opacity='.35'%3E%3Ccircle cx='38' cy='32' r='4'/%3E%3Ccircle cx='60' cy='32' r='4'/%3E%3Ccircle cx='82' cy='32' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cg transform='rotate(-8 60 32)'%3E%3Cpath d='M6 32C24 6 96 6 114 32C96 58 24 58 6 32Z' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cg opacity='.35'%3E%3Ccircle cx='38' cy='32' r='4'/%3E%3Ccircle cx='60' cy='32' r='4'/%3E%3Ccircle cx='82' cy='32' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } /* Working on it: the logo's three peas, pulsing big to small. */ .spinner { display: inline-flex; align-items: center; gap: 2px; height: 16px; flex-shrink: 0; } .spinner i { border-radius: 50%; background: currentColor; animation: pea-lit 1.4s ease-in-out infinite; } .spinner i:nth-child(1) { width: 8px; height: 8px; } .spinner i:nth-child(2) { width: 6px; height: 6px; animation-delay: 0.2s; } .spinner i:nth-child(3) { width: 4px; height: 4px; animation-delay: 0.4s; } /* Working on it: the peas light up in turn. */ @keyframes pea-lit { 0%, 60%, 100% { background: currentColor; box-shadow: none; } 30% { background: var(--lit); box-shadow: 0 0 6px var(--lit-glow); } } @media (prefers-reduced-motion: reduce) { .spinner i, .brand.hero .mark .pea { animation: none; } } /* Peas count episodes: filled is heard, ringed is part-way, pale is still to come. */ .peas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .peas i { width: 9px; height: 9px; border-radius: 50%; background: var(--pea-off); flex-shrink: 0; } .peas i.on { background: var(--lit); box-shadow: 0 0 5px var(--lit-glow); } .peas i.now { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } .peas.lg { gap: 5px; } .peas.lg i { width: 12px; height: 12px; } /* A series that has just been made. */ .ready-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--text); } .ready-card .full-pod { width: 64px; height: 34px; flex-shrink: 0; color: var(--accent); overflow: visible; } .full-pod .lit { fill: var(--lit); filter: drop-shadow(0 0 3px var(--lit-glow)); } .ready-card strong { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.2; } .ready-card span { display: block; margin-top: 2px; font-size: 14px; color: var(--text-2); } /* Section labels carry a small pea. */ .eyebrow.sec { display: flex; align-items: center; gap: 7px; } .eyebrow.sec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* Appearance picker in Your account. */ .seg { display: flex; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--surface); } .seg button { flex: 1; min-height: 44px; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--text-2); } .seg button + button { border-left: 1px solid var(--line); } .seg button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* ---- episode detail ---- */ .script p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; } .script h3 { margin: 20px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } details.recall { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); } details.recall summary { font-weight: 600; cursor: pointer; min-height: 28px; } details.recall p { margin: 8px 0 0; color: var(--text-2); } .sources { margin: 0; padding-left: 18px; font-size: 14px; } .sources li { margin-bottom: 6px; overflow-wrap: anywhere; } /* ---- mini player ---- */ #mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--ink); color: var(--ink-text); padding-bottom: env(safe-area-inset-bottom); } #mini .progress { height: 3px; background: #3A3833; } #mini .progress > div { height: 3px; background: #7FB5AE; } #mini .inner { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; } #mini .open { flex-grow: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; color: inherit; text-align: left; padding: 0; min-height: 44px; } #mini .t1 { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mini .t2 { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mini .play { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 22px; background: var(--ink-text); color: var(--ink); display: flex; align-items: center; justify-content: center; } /* ---- full player ---- */ .player-cover { display: flex; justify-content: center; } .wave { position: relative; height: 56px; display: flex; align-items: center; gap: 3px; } .wave .b { flex: 1; border-radius: 2px; background: var(--line-strong); transition: background 0.2s; } .wave .b.on { background: var(--accent); } .wave .b.now { background: var(--text); } .wave.playing .b.now { animation: wave-pulse 0.8s ease-in-out infinite alternate; } @keyframes wave-pulse { to { transform: scaleY(0.5); } } @media (prefers-reduced-motion: reduce) { .wave.playing .b.now { animation: none; } } .center { text-align: center; } input[type=range].seek { width: 100%; accent-color: var(--accent); height: 28px; margin: 0; } .wave input.seek { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .transport { display: flex; justify-content: center; align-items: center; gap: 32px; } .skip { width: 52px; height: 52px; padding: 0; border: 0; background: none; position: relative; display: flex; align-items: center; justify-content: center; color: var(--text); } .skip span { position: absolute; font-size: 10px; font-weight: 600; padding-top: 2px; } .bigplay svg { width: 32px; height: 32px; } .bigplay { width: 72px; height: 72px; padding: 0; border: 0; border-radius: 36px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; } .chip { min-width: 72px; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .chapter { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 14px; color: var(--text-2); text-align: left; } .chapter.current { background: var(--accent-soft); font-weight: 600; color: var(--accent); } .chapter span:last-child { color: var(--muted); } /* ---- checkbox rows (sharing) ---- */ label.check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 600; cursor: pointer; } label.check input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--accent); } label.check .detail { display: block; font-size: 13px; font-weight: 400; color: var(--muted); } input[type=search] { height: 52px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 16px; font-weight: 400; } /* ---- welcome pitch ---- */ .pitch { display: flex; flex-direction: column; gap: 14px; padding: 26px 20px 22px; border-radius: 22px; background: var(--ink); color: var(--ink-text); overflow: hidden; } .pitch h1 { color: #fff; font-size: 30px; } .pitch .lede { color: var(--ink-muted); font-size: 16px; } .pitch-fan { position: relative; height: 176px; margin-bottom: 6px; } .pitch-fan .cv { position: absolute; top: 10px; left: 50%; width: 128px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .pitch-fan .cv-sm { width: 118px; top: 26px; border-radius: 12px; } .pitch-fan .cv .cv-t { font-size: 14px; } .pitch-fan .cv-sm .cv-t { font-size: 11.5px; margin: 8px; max-width: 84px; } /* Side tiles sit further out so each shows its title: left-aligned on the left, right-aligned on the right. */ .pitch-fan .cv:nth-child(1) { transform: translateX(-150%) rotate(-10deg); } .pitch-fan .cv:nth-child(2) { transform: translateX(-50%) translateY(-6px); z-index: 1; } .pitch-fan .cv:nth-child(3) { transform: translateX(50%) rotate(10deg); } .pitch-fan .cv:nth-child(3) .cv-t { margin-left: auto; text-align: right; } .voice-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #22262B; color: #F4F1EA; font-size: 13px; font-weight: 600; line-height: 1.3; } .voice-wave { display: inline-flex; align-items: center; gap: 2px; height: 18px; flex-shrink: 0; } .voice-wave i { width: 3px; height: 40%; border-radius: 2px; background: #7CE0C3; animation: voice 1.1s ease-in-out infinite alternate; } .voice-wave i:nth-child(2) { animation-delay: -0.2s; } .voice-wave i:nth-child(3) { animation-delay: -0.5s; } .voice-wave i:nth-child(4) { animation-delay: -0.1s; } .voice-wave i:nth-child(5) { animation-delay: -0.7s; } .voice-wave i:nth-child(6) { animation-delay: -0.35s; } .voice-wave i:nth-child(7) { animation-delay: -0.6s; } @keyframes voice { to { height: 100%; } } @media (prefers-reduced-motion: reduce) { .voice-wave i { animation: none; height: 70%; } } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } @media (min-width: 520px) { .steps { grid-template-columns: 1fr 1fr; } } .step { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); } .step p { margin: 0; font-size: 14px; color: var(--text-2); } .step h2 { font-size: 19px; } .step-head { display: flex; align-items: center; gap: 10px; } .step .pitch-n { background: var(--accent); color: var(--on-accent); } .pitch-n { width: 28px; height: 28px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 15px; } .step-demo { margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--bg); } .chips-demo { display: flex; flex-direction: column; gap: 6px; } .chips-demo span { align-self: flex-start; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: var(--accent-soft); color: var(--accent-hover); font-size: 13px; font-style: italic; } .chips-demo span:nth-child(2) { align-self: flex-end; border-radius: 14px 14px 4px 14px; } .plan-demo { display: flex; flex-direction: column; gap: 6px; } .plan-demo div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; } .plan-demo b { font-family: var(--serif); color: var(--accent); } .plan-demo span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan-demo em { font-style: normal; font-size: 12px; color: var(--muted); padding: 2px 8px; border-radius: 10px; background: var(--bg); } .plan-demo .lifted { transform: translateX(8px) rotate(-1.2deg); border-color: var(--accent); box-shadow: 0 6px 16px rgba(31, 95, 91, 0.18); } .player-demo { display: flex; align-items: center; gap: 10px; background: #0E1514; } .player-demo .grow { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pd-t { color: #F2F4F7; font-size: 13px; font-weight: 600; } .pd-wave { display: flex; align-items: center; gap: 2px; height: 22px; } .pd-wave i { flex: 1; border-radius: 1px; background: #3A4556; } .pd-wave i.on { background: #7CE0C3; } .pd-play { width: 36px; height: 36px; flex-shrink: 0; border-radius: 18px; background: #F2F4F7; color: #0E1116; display: flex; align-items: center; justify-content: center; } .pd-play svg { width: 16px; height: 16px; } .steer-demo { display: flex; flex-direction: column; gap: 8px; } .sd-chips { display: flex; gap: 6px; flex-wrap: wrap; } .sd-chips span { padding: 6px 11px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; font-weight: 600; } .sd-chips .on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .sd-bar { height: 5px; border-radius: 3px; background: var(--line); } .sd-bar span { display: block; width: 50%; height: 100%; border-radius: 3px; background: var(--accent); } .sd-note { font-size: 12px; color: var(--muted); } .pitch-tag { margin: 0; padding: 0 4px; text-align: center; font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--text); } .bp-tag { display: block; margin-top: 8px; font-style: italic; font-size: 17px; color: var(--accent); } /* ---- plan changes ---- */ textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 16px; font-weight: 400; line-height: 1.45; resize: vertical; } select { height: 52px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 16px; font-weight: 400; max-width: 100%; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } form.card h2 { font-size: 20px; } /* ---- asking to join ---- */ .join-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #F2B544; color: #1B1B18; text-decoration: none; box-shadow: 0 2px 0 #C98E1E; } .join-tile strong { display: block; font-size: 18px; line-height: 1.25; } .join-tile .grow > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: #3A2F12; } .join-tile .jt-arrow { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1B1B18; color: #F2B544; } .join-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 #C98E1E; } #join { scroll-margin-top: 16px; } details.join { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 4px 16px 16px; } details.join summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--accent); cursor: pointer; } details.join[open] summary { margin-bottom: 8px; } a.note.alert { text-decoration: none; border-style: solid; border-color: var(--warn); background: var(--warn-soft); color: var(--text); } .note > svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); } a.avatar { text-decoration: none; } /* ---- episode length control ---- */ .length { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; } .len-btn { width: 36px; height: 36px; padding: 0; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 18px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .len-btn[disabled] { opacity: 0.35; cursor: default; } .len-val { min-width: 56px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-2); } /* Episode rating: five big tap targets. */ .stars { display: flex; gap: 4px; } .stars button { width: 48px; height: 48px; border: 0; background: none; padding: 0; font-size: 34px; line-height: 1; color: var(--line-strong); } .stars button.on { color: var(--accent); } .stars-static { color: var(--accent); font-weight: 600; white-space: nowrap; } /* ---- covers, shelf and progress ---- */ .cv { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 1; display: flex; align-items: flex-end; flex-shrink: 0; } .cv svg { position: absolute; inset: 0; width: 100%; height: 100%; } .cv-t { position: relative; margin: 10px 11px; font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cv-md { width: 100%; } .cv-lg { width: min(280px, 72vw); border-radius: 20px; } .cv-lg .cv-t { font-size: 25px; margin: 18px 20px; } .cv-sm { width: 72px; border-radius: 10px; } .cv-xs { width: 44px; border-radius: 8px; } .shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } @media (min-width: 520px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .shelf-item { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: var(--text); } .shelf-item:hover .cv { transform: translateY(-2px); } .shelf-item .cv { transition: transform 0.15s; } .shelf-meta { font-size: 13px; color: var(--muted); } .shelf-item .status { font-size: 12px; } .bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; } .bar > div { height: 100%; border-radius: 2px; background: var(--accent); } .continue { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; } .continue .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .continue-t { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .continue-play { width: 40px; height: 40px; flex-shrink: 0; border-radius: 20px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; } .continue-play svg { width: 18px; height: 18px; } .series-head { display: flex; gap: 16px; align-items: flex-end; } .series-head .cv-md { width: 132px; } .series-head .cv-md .cv-t { font-size: 14px; margin: 8px 9px; } .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .two-up .btn { min-height: 48px; font-size: 15px; padding: 0 10px; } .series-head > .stack { flex: 1; min-width: 0; } .browse-top { display: flex; gap: 12px; align-items: flex-start; } .ep-link .bar { margin-top: 6px; max-width: 180px; } .ep-meta svg { vertical-align: -3px; } /* ---- the dark player ---- */ html:has(body.dark) { background: #0E1514; } body.dark { background: var(--bg); color: var(--text); } body.dark a { color: var(--accent); } body.dark .icon-btn, body.dark .chip, body.dark .skip { color: var(--text); } /* ---- insights (administrator) ---- */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 520px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .stat { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); } .stat-v { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; } .stat-l { font-size: 13px; font-weight: 600; color: var(--text-2); } .stat-d { font-size: 12px; color: var(--muted); margin-top: 2px; } .hbars { display: flex; flex-direction: column; gap: 8px; } .hbar { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 2.5em; align-items: center; gap: 10px; font-size: 14px; } .hbar-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); } .hbar-track { height: 10px; } .hbar-track > span { display: block; height: 100%; min-width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); } .hbar-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); } .vbars { height: 110px; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--line-strong); } .vbar { flex: 1; height: 100%; display: flex; align-items: flex-end; } .vbar > span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); } .vbar:hover > span { background: var(--accent-hover); } .ins-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; } .ins-row .grow { display: flex; flex-direction: column; min-width: 0; } .ins-t { font-weight: 600; font-size: 15px; } .table-wrap { overflow-x: auto; } .ins-table { width: 100%; border-collapse: collapse; font-size: 14px; } .ins-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line-strong); } .ins-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .ins-table td:first-child { font-weight: 600; } .feed { display: flex; flex-direction: column; } .feed-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); } .feed-row em { font-style: normal; color: var(--text); } .feed-row > .muted, .ins-row > .muted { white-space: nowrap; }