.topic-gen-page .page-masthead h1{max-width: 28ch;} .topic-gen-page .page-content{padding-top: clamp(2rem, 4vw, 3rem);} .topic-gen-page .page-summary{margin-bottom: 1.35rem;} .topic-gen{margin: 0 0 2.25rem;padding: 1.2rem 1.25rem 1.35rem;background: var(--bg);border: 1px solid var(--border);border-radius: 16px;box-shadow: var(--shadow-card);} .topic-gen[hidden], .topic-gen [hidden]{display: none !important;} .topic-gen__cats, .topic-gen__durations{display: flex;flex-wrap: wrap;gap: 0.5rem;} .topic-gen__cat, .topic-gen__duration{display: inline-flex;align-items: center;padding: 0.4rem 0.9rem;border-radius: 999px;border: 1px solid rgba(96, 22, 196, 0.18);background: rgba(96, 22, 196, 0.06);color: var(--purple);font-family: var(--sub);font-size: 0.8125rem;font-weight: 600;letter-spacing: 0.01em;cursor: pointer;transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);} .topic-gen__cat:hover, .topic-gen__duration:hover{background: rgba(96, 22, 196, 0.12);border-color: rgba(96, 22, 196, 0.28);} .topic-gen__cat:focus-visible, .topic-gen__duration:focus-visible{outline: 2px solid var(--purple);outline-offset: 2px;} .topic-gen__cat.is-active, .topic-gen__duration.is-active{background: var(--purple);border-color: var(--purple);color: #fff;box-shadow: 0 4px 12px rgba(96, 22, 196, 0.2);} .topic-gen__card{margin: 1rem 0 0.85rem;padding: 1.25rem 1.2rem;min-height: 6.75rem;display: grid;place-content: center;text-align: center;background: var(--bg-muted);border-radius: 12px;} .topic-gen.has-topic .topic-gen__card{background: linear-gradient( 180deg, rgba(96, 22, 196, 0.06) 0%, var(--bg-muted) 100% );} .topic-gen__label{margin: 0 0 0.55rem;font-family: var(--sub);font-weight: 700;font-size: 0.78rem;letter-spacing: 0.14em;text-transform: uppercase;color: var(--magenta);} .topic-gen__prompt{margin: 0;font-family: var(--display);font-weight: 600;font-size: clamp(1.25rem, 3.4vw, 1.85rem);line-height: 1.25;letter-spacing: -0.02em;color: var(--text);text-wrap: balance;} .topic-gen__spin-row{display: flex;justify-content: center;margin-bottom: 1.15rem;} .topic-gen__timer{padding-top: 1rem;border-top: 1px solid var(--line);text-align: center;} .topic-gen__durations{justify-content: center;margin-bottom: 0.9rem;} .topic-gen__think{display: inline-flex;align-items: flex-start;gap: 0.5rem;margin: 0 0 1rem;color: var(--text-muted);font-size: 0.95rem;cursor: pointer;} .topic-gen__think input{appearance: none;-webkit-appearance: none;width: 1.15em;height: 1.15em;margin: 0.15em 0 0;flex: 0 0 auto;border: 2px solid var(--purple);border-radius: 3px;background: #fff;cursor: pointer;} .topic-gen__think input:checked{background: var(--purple);box-shadow: inset 0 0 0 2px #fff;} .topic-gen__think input:focus-visible{outline: 2px solid var(--accent);outline-offset: 2px;} .topic-gen__clock{margin: 0.15rem 0 0.15rem;font-family: var(--display);font-weight: 700;font-size: clamp(2.1rem, 6vw, 3rem);line-height: 1;letter-spacing: -0.03em;font-variant-numeric: tabular-nums;color: var(--purple);} .topic-gen.is-think .topic-gen__clock{color: var(--magenta);} .topic-gen.is-done .topic-gen__clock{color: var(--orange);} .topic-gen__phase{margin: 0 0 0.85rem;font-family: var(--sub);font-weight: 700;font-size: 0.92rem;color: var(--text-muted);} .topic-gen__bar{width: min(16rem, 100%);height: 6px;margin: 0 auto 1.15rem;overflow: hidden;border-radius: 999px;background: rgba(96, 22, 196, 0.12);} .topic-gen__bar span{display: block;width: 100%;height: 100%;transform: scaleX(1);transform-origin: left center;background: var(--grad);} .topic-gen.is-running .topic-gen__bar span{transition: transform 0.1s linear;} .topic-gen__timer-actions{display: flex;flex-wrap: wrap;justify-content: center;gap: 0.6rem;} .topic-gen__timer-actions .btn:disabled{opacity: 0.45;cursor: not-allowed;transform: none;filter: none;} .topic-gen__prep{margin-top: 1.35rem;border: 1px solid var(--border);border-radius: 12px;background: var(--bg);} .topic-gen__prep summary{cursor: pointer;list-style: none;padding: 0.9rem 1.1rem;font-family: var(--sub);font-weight: 700;font-size: 0.98rem;color: var(--purple);} .topic-gen__prep summary::-webkit-details-marker{display: none;} .topic-gen__prep summary::marker{content: "";} .topic-gen__prep summary:hover, .topic-gen__prep[open] summary{color: var(--magenta);} .topic-gen__prep summary:focus-visible{outline: 2px solid var(--accent);outline-offset: -2px;border-radius: 12px;} .topic-gen__prep-body{padding: 0 1.1rem 1.1rem;color: var(--text-muted);font-size: 0.98rem;line-height: 1.55;} .topic-gen__prep-body p{margin: 0 0 0.7rem;} .topic-gen__prep-body ol{margin: 0 0 0.7rem;padding-left: 1.2rem;} .topic-gen__prep-body li + li{margin-top: 0.35rem;} .topic-gen__prep-body a{color: var(--accent);text-decoration: underline;text-underline-offset: 2px;} .topic-gen__prep-body a:hover{color: var(--purple);} @media (prefers-reduced-motion: reduce){.topic-gen.is-running .topic-gen__bar span{transition: none;} .topic-gen__cat, .topic-gen__duration{transition: none;}} @media (max-width: 640px){.topic-gen{padding: 1.15rem 1rem 1.25rem;} .topic-gen__card{min-height: 7.25rem;padding: 1.25rem 1rem;} .topic-gen__timer-actions .btn{flex: 1 1 8rem;justify-content: center;}}