:root {
  --page:#edeeef;
  --training-page:#1d174c;
  --brand:#313dff;
  --accent:#2d46cd;
  --icon:#4057ff;
  --status:#747aaa;
  --text:#333;
  --secondary:#555;
  --muted:#747980;
  --border:#dee5e7;
  --input:#f9fbfa;
  --surface:#fff;
  --hint:#e9fff7;
  --reading:#f7f8f9;
  --timer:#9bf8d8;
  --quote-footer-height:48px;
  font-family:'Noto Sans JP',sans-serif;
  font-size:14px;
  color:var(--text);
  background:var(--page)
}

/* Figma GA9h7C8Zyy98ci5AHPGncu: opaque Share PC / Training SP.
   Colors are grouped by role from actual fills, not outdated Figma style names. */
* {
  box-sizing:border-box
}
html,body {
  margin:0;
  height:100%;
  overflow:hidden
}
body {
  background:var(--page)
}
body[data-mode="training"] {
  background:var(--training-page)
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed
}
button[hidden],[hidden] {
  display:none!important
}
button:focus-visible,a:focus-visible,input:focus-visible,.choice input:focus-visible+.label {
  outline:2px solid var(--icon);
  outline-offset:3px
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
input {
  color:var(--text);
  color-scheme:light
}
input[type=number] {
  appearance:textfield
}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {
  -webkit-appearance:none;
  margin:0
}
a {
  color:inherit
}
h2,h3,p {
  margin:0
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
/* Two columns and fixed actions, within the 1440 × 900 reference. */
main {
  max-width:984px;
  height:100dvh;
  margin:auto;
  padding:24px 24px calc(60px + env(safe-area-inset-bottom))
}
.workspace {
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  gap:40px;
  height:100%;
  min-height:0
}
.settings-panel {
  min-width:0;
  height:100%;
  position:relative
}
#settings {
  height:100%;
  display:flex;
  flex-direction:column
}
.settings-brand {
  height:66px;
  padding-top:4px;
  flex:none
}
.brand {
  display:inline-flex;
  text-decoration:none;
  height:31px
}
.brand img {
  display:block
}
.logo-training,.brand-mode {
  display:none
}
body[data-mode=training] .logo-training {
  display:block
}
body[data-mode=training] .logo-share {
  display:none
}
.settings-scroll {
  flex:1;
  min-height:0;
  overflow:auto;
  padding:4px 12px 96px 0;
  scrollbar-width:thin;
  scrollbar-color:#bbc5d3 transparent
}
.settings-section {
  margin-bottom:40px
}
.settings-section:last-child {
  margin-bottom:0
}
fieldset {
  margin:0;
  padding:0;
  border:0;
  min-width:0
}
legend {
  padding:0;
  margin-bottom:9px;
  color:var(--icon);
  font:600 15px/24px Orbitron,sans-serif;
  letter-spacing:.75px;
  text-transform:lowercase
}
legend label {
  display:flex;
  align-items:center
}
.ui-icon {
  display:inline-block;
  width:18px;
  height:18px;
  object-fit:contain;
  margin-right:6px;
  vertical-align:-3px
}
body[data-mode=training] legend {
  color:#fff
}
.options {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.choice {
  position:relative;
  cursor:pointer;
  max-width:100%
}
.choice input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}
.label {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:5px 10px 9px;
  border:1px solid var(--border);
  border-radius:4px;
  background:#fff;
  color:var(--text);
  font:400 13px/19.5px 'Noto Sans JP',sans-serif;
  overflow-wrap:anywhere
}
.choice:hover .label {
  border-color:var(--accent)
}
.choice input:checked+.label {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff
}
.selection-dot {
  display:none
}
.choice input:checked+.label .selection-dot {
  display:inline-flex;
  flex:none;
  width:14px;
  justify-content:center
}
.selection-dot:after {
  content:'✓'
}
.mood-icon {
  display:none
}
fieldset:disabled legend {
  opacity:.45
}
fieldset:disabled .label,.choice input:disabled+.label {
  color:#939598;
  background:#e9ebed;
  border-color:var(--border);
  cursor:not-allowed
}
.time-input {
  height:46px;
  display:flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--input);
  padding-right:14px;
  gap:8px
}
.time-input input {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  padding:8px 14px;
  font-size:18px;
  line-height:27px
}
.time-input input:focus-visible {
  outline:0
}
.time-input:focus-within {
  outline:2px solid var(--icon);
  outline-offset:2px
}
.time-input span {
  color:var(--status);
  font-size:12px
}
#participant-fields {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px
}
.participant-row {
  position:relative
}
.participant-row input {
  width:100%;
  height:40px;
  padding:8px 34px 8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--input);
  font-size:14px;
  line-height:23.8px
}
.participant-row:last-child input {
  border-style:dashed;
  background:#fff
}
.participant-row input::placeholder {
  font-size:12px;
  color:#8d9b94
}
.remove-member {
  position:absolute;
  right:6px;
  top:4px;
  width:28px;
  height:32px;
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:13.8px;
  line-height:1
}
.input-error {
  font-size:12px;
  color:#ac302a;
  margin-top:6px
}
.input-error:empty {
  display:none
}
.settings-actions {
  position:absolute;
  bottom:0;
  left:0;
  right:12px;
  padding:16px 0;
  background:transparent;
  z-index:3;
  pointer-events:none
}
.settings-actions button {
  pointer-events:auto
}
.primary,.secondary {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:55px;
  border:1px solid #fff;
  border-radius:0;
  padding:10px 8px;
  font-size:15px;
  line-height:19.5px;
  font-weight:500;
  backdrop-filter:blur(4px)
}
.primary {
  background:var(--brand);
  color:#fff
}
.primary:hover:not(:disabled) {
  background:var(--accent)
}
.primary:disabled {
  background:#d6d8da;
  color:#939598
}
.secondary {
  color:#222;
  background:rgba(255,255,255,.72);
  border-color:var(--border)
}
.secondary:hover {
  background:#f7f8f9
}
.secondary img {
  max-width:16px;
  max-height:16px;
  object-fit:contain
}
body[data-mode=training] .settings-section:has(#participant-fields),body[data-mode=training] .settings-section:has(#facilitator-fieldset) {
  display:none
}
/* One card structure is shared by modes and viewport sizes. */
.topic-layer,.result {
  min-width:0;
  height:100%
}
.topic-surface {
  display:contents
}
.topic-toolbar,.layer-open,.layer-close,.layer-backdrop {
  display:none
}
.session,.empty {
  height:100%;
  background:#fff;
  border-radius:10px;
  overflow:hidden
}
.session {
  display:flex;
  flex-direction:column;
  position:relative
}
.session-status {
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  flex:none;
  min-height:40px;
  margin-bottom:30px
}
.session-status>span {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:149px;
  padding:10px 16px;
  background:var(--status);
  font-size:12px;
  line-height:20px;
  color:white;
  text-align:center;
  overflow-wrap:anywhere
}
.session-status>span:last-child {
  background:var(--brand);
  min-width:150px
}
.session-status img {
  width:16px;
  height:16px;
  object-fit:contain
}
.session-content {
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column
}
.session-body {
  overflow:auto;
  flex:1;
  min-height:0;
  padding:20px 30px 110px;
  scrollbar-width:thin;
  display:flex;
  flex-direction:column;
  gap:35px
}
.session-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
  font-size:12px;
  line-height:20px;
  color:var(--status)
}
.session-tag {
  font-weight:300;
  padding:1px 9px 3px;
  background:var(--accent);
  color:white;
  line-height:20px
}
h2 {
  font-size:25px;
  font-weight:600;
  line-height:37.5px;
  letter-spacing:.02em;
  outline:0
}
.description {
  font-size:14.5px;
  line-height:26px;
  color:var(--secondary);
  margin-top:10px;
  overflow-wrap:anywhere
}
.steps {
  border-top:1px solid var(--border);
  margin-top:35px
}
.flow-step {
  border-bottom:1px solid var(--border)
}
.step {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 20px 10px 10px;
  min-height:59px
}
.step-number {
  display:grid;
  place-items:center;
  flex:0 0 29px;
  height:29px;
  font:600 15px/21px Orbitron,sans-serif;
  color:var(--icon)
}
.step h3 {
  flex:1;
  min-width:0;
  font-size:16px;
  font-weight:500;
  line-height:27.2px
}
.step-time {
  flex:none;
  color:var(--accent);
  font-size:14px;
  white-space:nowrap
}
.reading {
  margin:0 18px 12px;
  padding:14px 16px;
  background:var(--reading)
}
.reading a {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  line-height:23.8px;
  color:#222;
  text-decoration:none;
  overflow-wrap:anywhere
}
.reading a>span:last-child {
  text-decoration:underline;
  text-underline-offset:3px
}
.reading small {
  display:block;
  font-size:12px;
  line-height:20px;
  color:var(--muted);
  margin-top:8px
}
.thinking-hints {
  background:var(--hint);
  padding:16px 18px
}
.thinking-hints h3 {
  font-size:14px;
  line-height:24px;
  font-weight:600;
  margin-bottom:8px
}
.thinking-hints ul {
  margin:0;
  padding-left:15px
}
.thinking-hints li {
  font-size:13px;
  line-height:20px;
  color:var(--secondary);
  padding:2px 0
}
.result-actions {
  position:absolute;
  bottom:0;
  left:30px;
  right:30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  padding:16px 0;
  z-index:3;
  pointer-events:none
}
.result-actions>* {
  pointer-events:auto
}
#copy-status {
  grid-column:1/-1;
  font-size:12px;
  color:var(--muted);
  background:#fff
}
#copy-status:empty {
  display:none
}
.copy-fallback {
  width:100%;
  height:120px
}
#clear-topic {
  display:none
}
body[data-mode=training] #again {
  display:none
}
body[data-mode=training] #clear-topic {
  display:flex;
  background:#e3ecef;
  color:#222
}
.clear-check-icon {
  flex:none
}
.empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--muted)
}
.empty>span {
  display:none
}
.empty p {
  font-size:20px;
  letter-spacing:.08em;
  font-weight:500
}
/* Footer ticker never depends on form or dialog state. */
#quote-slider {
  position:fixed;
  inset:auto 0 0;
  height:calc(48px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
  align-items:center;
  background:transparent;
  color:var(--status);
  z-index:20;
  overflow:hidden
}
.quote-viewport {
  width:100%;
  overflow:hidden
}
.quote-track {
  display:flex;
  width:max-content;
  animation:quote-flow var(--quote-duration,600s) linear infinite
}
.quote-group {
  display:flex;
  gap:48px;
  padding-right:48px;
  flex:none
}
.quote-item {
  display:inline-flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  font-size:13px;
  font-weight:500;
  line-height:23.4px
}
.quote-author {
  font-weight:400;
  opacity:.75
}
body[data-mode=training] #quote-slider {
  color:#bbc5d3
}
@keyframes quote-flow {
  to {
    transform:translateX(-50%)
  }
}
/* Timer: same control colors in both modes; SP top-right, PC bottom-right. */
#timer-button {
  position:fixed;
  right:0;
  bottom:0;
  z-index:60;
  width:60px;
  height:60px;
  padding:0;
  border:0;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:var(--timer);
  color:var(--brand)
}
.alarm-icon {
  flex:none;
  display:block;
  width:28px;
  height:28px;
  object-fit:contain;
  transform-origin:50% 65%;
  animation:alarm-fine 3s linear infinite
}
#timer-button:not(.running) #timer-label {
  display:none
}
#timer-button.running {
  width:184px;
  min-width:184px;
  max-width:184px;
  padding:0 16px
}
#timer-label {
  flex:1;
  min-width:0;
  text-align:left;
  white-space:nowrap;
  order:0;
  font:400 23px/1 Orbitron,sans-serif;
  font-variant-numeric:tabular-nums
}
#timer-button.running .alarm-icon {
  order:1;
  animation:none;
  transform:none
}
.timer-modal {
  width:min(400px,calc(100vw - 32px));
  border:0;
  border-radius:10px;
  background:white;
  color:var(--text);
  padding:32px;
  text-align:center;
  max-height:calc(100dvh - 32px);
  overflow:auto;
  box-shadow:0 12px 60px #0002;
  color-scheme:light
}
.timer-modal::backdrop {
  background:rgb(0 0 0 / 50%)
}
body[data-mode="training"] .timer-modal::backdrop {
  background:rgb(0 0 0 / 50%)
}
.timer-dialog-icon,.timer-done-icon {
  display:block;
  width:52px;
  height:52px;
  object-fit:contain;
  margin:0 auto 16px
}
.timer-modal form {
  display:flex;
  flex-direction:column;
  gap:16px
}
#timer-form>label {
  font-weight:500;
  font-size:16px;
  line-height:24px
}
.timer-modal p {
  font-size:14px;
  line-height:23.8px;
  margin-bottom:16px
}
.timer-input {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:64px
}
.timer-input input {
  width:100%;
  height:64px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--input);
  padding:8px 44px;
  text-align:center;
  font:400 30px/42px Orbitron,sans-serif;
  letter-spacing:3px
}
.timer-input span {
  position:absolute;
  right:16px;
  font-size:12px;
  pointer-events:none
}
.timer-modal .primary {
  background:var(--accent)
}
#timer-present {
  height:47px;
  margin-top:0!important
}
.timer-done-icon {
  animation:alarm-continuous 80ms linear infinite;
  transform-origin:50% 65%
}
@keyframes alarm-fine {
  0%,24%,100% {
    transform:translateX(0) rotate(0)
  }
  1%,3%,5%,7%,9%,11%,13%,15%,17%,19%,21% {
    transform:translateX(-1.5px) rotate(-22deg)
  }
  2%,4%,6%,8%,10%,12%,14%,16%,18%,20%,22% {
    transform:translateX(1.5px) rotate(22deg)
  }
}
@keyframes alarm-continuous {
  0%,100% {
    transform:rotate(-8deg) translateX(-.5px)
  }
  50% {
    transform:rotate(8deg) translateX(.5px)
  }
}
body.timer-finished #timer-done::backdrop {
  animation:timer-flash 1.4s ease-in-out infinite
}
@keyframes timer-flash {
  0%,65%,100% {
    background:rgb(0 0 0 / 70%)
  }
  12%,30% {
    background:rgb(255 255 255 / 92%)
  }
}
/* Clear notification, quote, and author. */
#training-clear-toast {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:100;
  width:400px;
  max-width:calc(100vw - 64px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:30px 20px;
  gap:10px;
  background:#fff;
  color:var(--accent);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 16px #0003
}
.clear-message {
  font:500 30px/33px Orbitron,sans-serif;
  letter-spacing:1.5px
}
.clear-gauge {
  position:relative;
  display:grid;
  place-items:center;
  width:100px;
  height:100px;
  flex:none
}
.clear-gauge svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg)
}
.clear-progress {
  fill:none;
  stroke:var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100
}
.clear-count {
  font:400 31.667px/1.1 Orbitron,sans-serif;
  opacity:0
}
.celebrating .clear-progress {
  animation:clear-fill 850ms ease-in-out forwards
}
.celebrating .clear-count {
  animation:clear-reveal 220ms ease-out 850ms forwards
}
.clear-quote {
  width:100%;
  margin:30px 0 0;
  text-align:left;
  color:var(--text)
}
.clear-quote p {
  font-size:15px;
  font-weight:500;
  line-height:24px
}
.clear-quote footer {
  margin-top:15px;
  text-align:right;
  font-size:14px;
  line-height:25px;
  color:var(--muted)
}
.clear-quote a {
  text-decoration:underline;
  text-underline-offset:3px
}
.clear-author-link-icon {
  opacity:.6;
  width:16.5px;
  height:16.5px;
  vertical-align:-3px;
  margin-left:3px
}
@keyframes clear-fill {
  to {
    stroke-dashoffset:0
  }
}
@keyframes clear-reveal {
  from {
    opacity:0;
    transform:scale(.8)
  }
  to {
    opacity:1;
    transform:scale(1)
  }
}
/* Entry screen. */
#home-screen {
  display:none
}
body[data-view=home] {
  background:var(--page)
}
body[data-view=home]>main,body[data-view=home]>#quote-slider {
  display:none
}
body[data-view=home] #home-screen {
  display:grid;
  place-items:center;
  min-height:100dvh;
  padding:0 24px 194px
}
.home-content {
  text-align:center;
  width:100%;
  max-width:560px
}
#home-catchphrase {
  font-size:28px;
  line-height:44.8px;
  font-weight:500;
  letter-spacing:2.24px;
  color:#222;
  margin:0 0 56px;
  outline:0
}
.home-modes {
  display:flex;
  justify-content:center;
  gap:64px
}
.home-mode {
  border:0;
  background:transparent;
  padding:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--brand);
  font:500 20px/27px Orbitron,sans-serif;
  letter-spacing:1px
}
.home-mode-square {
  display:grid;
  place-items:center;
  width:112px;
  height:112px;
  border:1.5px solid var(--brand);
  background:#fff;
  font:400 48px/1 Orbitron,sans-serif;
  letter-spacing:0
}
.home-mode[data-enter-mode=training] .home-mode-square {
  background:var(--brand);
  color:#e7efeb
}
.home-mode:hover .home-mode-square {
  box-shadow:0 3px 12px #313dff20
}
.home-logo-marquee {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  pointer-events:none
}
.home-logo-track {
  display:flex;
  width:max-content;
  animation:quote-flow 50s linear infinite
}
.home-logo-group {
  display:flex;
  gap:64px;
  padding-right:64px;
  flex:none
}
.home-logo,.home-logo img {
  display:block;
  flex:none
}
@media(max-width:1050px) and (min-width:721px) {
  main {
    padding-left:20px;
    padding-right:20px
  }
  .workspace {
    grid-template-columns:240px minmax(0,1fr);
    gap:24px
  }
  .session-body {
    padding-left:24px;
    padding-right:24px
  }
  .result-actions {
    left:24px;
    right:24px
  }
  .session-status>span {
    min-width:0
  }
}
/* SP: the topic slides above the persistent selection panel. */
@media(max-width:720px) {
  main {
    max-width:none;
    padding:0;
    height:100dvh
  }
  .workspace {
    --layer-header:108px;
    --topic-peek:64px;
    display:block;
    position:relative;
    height:calc(100dvh - 48px - env(safe-area-inset-bottom));
    overflow:hidden;
    isolation:isolate
  }
  .workspace>.settings-panel {
    position:absolute;
    left:20px;
    top:121px;
    bottom:12px;
    width:calc(100% - 128px);
    height:auto;
    z-index:1
  }
  .settings-brand {
    display:none
  }
  .settings-scroll {
    padding:0 4px 87px 0;
    margin:0;
    scrollbar-gutter:auto
  }
  .settings-section {
    margin-bottom:25px
  }
  legend {
    font-size:14px;
    line-height:24px;
    font-weight:500;
    letter-spacing:.7px
  }
  .settings-actions {
    left:0;
    right:4px;
    padding:12px 0
  }
  .primary,.secondary {
    font-size:13px;
    font-weight:700;
    height:55px
  }
  .topic-layer {
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    flex-direction:column;
    padding:0 0 12px 44px;
    pointer-events:none
  }
  .topic-toolbar {
    display:flex;
    align-items:flex-start;
    height:108px;
    flex:none;
    margin-left:-24px;
    padding-top:18px;
    pointer-events:none
  }
  .topic-toolbar .brand {
    pointer-events:auto
  }
  .topic-surface {
    position:relative;
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    border:1px solid white;
    border-right:0;
    border-radius:16px 0 0 16px;
    background:white;
    box-shadow:-4px 2px 16px rgba(24,62,50,.1);
    pointer-events:auto;
    transition:transform .32s cubic-bezier(.2,.7,.2,1)
  }
  .selection-expanded .topic-surface {
    transform:translateX(calc(100vw - var(--topic-peek) - 44px))
  }
  .topic-surface>.result {
    flex:1;
    min-height:0
  }
  .session,.empty {
    border-radius:16px 0 0 16px
  }
  .session-status {
    width:100%;
    min-height:42px;
    margin-bottom:0;
    justify-content:flex-start
  }
  .session-status>span,.session-status>span:last-child {
    flex:1;
    min-width:0;
    padding:10px 4px;
    font-size:14px;
    line-height:22px
  }
  .session-status img {
    width:14px;
    height:14px
  }
  .session-body {
    padding:20px 24px 100px;
    gap:35px
  }
  .session-meta {
    font-size:14px;
    gap:6px;
    margin-bottom:12px
  }
  .session-tag {
    font-size:14px
  }
  h2 {
    font-size:22px;
    line-height:34px;
    letter-spacing:.02em
  }
  .description {
    font-size:14px;
    line-height:25px;
    margin-top:12px
  }
  .step {
    padding:10px 10px 10px 2px;
    gap:12px
  }
  .step-number {
    font:700 13px/24px 'Noto Sans JP',sans-serif
  }
  .step h3 {
    font-size:15px;
    line-height:24px
  }
  .step-time {
    font-size:14px
  }
  .reading {
    margin:0 12px 12px;
    padding:14px 16px
  }
  .reading a {
    font-size:13px;
    line-height:19.5px
  }
  .reading small {
    font-size:11px;
    line-height:16.5px
  }
  .thinking-hints li {
    line-height:23.8px
  }
  .result-actions {
    left:12px;
    right:12px;
    padding:8px 0;
    gap:8px
  }
  .result-actions .primary,.result-actions .secondary {
    padding:8px 4px
  }
  .empty p {
    font-size:16px
  }
  .layer-open {
    display:block;
    position:absolute;
    left:0;
    top:108px;
    bottom:12px;
    width:44px;
    z-index:2;
    background:transparent;
    border:0;
    padding:0
  }
  .layer-backdrop:not([hidden]) {
    display:block;
    position:absolute;
    top:108px;
    right:0;
    bottom:12px;
    width:64px;
    z-index:4;
    background:transparent;
    border:0
  }
  .layer-close {
    display:none
  }
  #timer-button {
    top:env(safe-area-inset-top,0px);
    bottom:auto
  }
  #training-clear-toast {
    width:311px
  }
  body[data-view=home] #home-screen {
    padding-bottom:138px
  }
  #home-catchphrase {
    font-size:23px;
    line-height:36.8px;
    letter-spacing:1.84px;
    margin-bottom:48px
  }
  .home-modes {
    gap:38px
  }
  .home-mode {
    font-size:17px;
    letter-spacing:.85px
  }
  .home-mode-square {
    width:100px;
    height:100px;
    font-size:42px
  }
  .home-logo-group {
    gap:40px;
    padding-right:40px
  }
}
@media(prefers-reduced-motion:reduce) {
  .quote-track,.home-logo-track,.alarm-icon,.timer-done-icon,body.timer-finished {
    animation:none
  }
  .topic-surface {
    transition:none
  }
  .celebrating .clear-progress {
    animation:none;
    stroke-dashoffset:0
  }
  .celebrating .clear-count {
    animation:none;
    opacity:1
  }
}
/* Keep grid tracks bounded even when content exceeds the viewport. */
.workspace {
  grid-template-rows:minmax(0,1fr)
}
.topic-layer {
  min-height:0
}
.brand .logo-training {
  display:none
}
body[data-mode=training] .brand .logo-training {
  display:block
}
body[data-mode=training] .brand .logo-share {
  display:none
}
/* Exported icon vectors use black fills; tint their silhouettes with the design token. */
.settings-panel legend .ui-icon {
  filter:invert(34%) sepia(91%) saturate(3992%) hue-rotate(228deg) brightness(102%) contrast(104%)
}
@media(min-width:1051px) {
  main {
    max-width:1000px;
    padding-left:40px;
    padding-right:24px
  }
}
@media(min-width:721px) {
  .session-status {
    margin-bottom:6px
  }
  .settings-actions,.result-actions {
    padding-top:16px;
    padding-bottom:8px
  }
}
/* Optical spacing and a common text axis beneath the progress headings. */
.settings-scroll {
  margin-left:-5px;
  padding-left:5px
}
.participant-row input {
  padding-top:7px;
  padding-bottom:7px
}
.session-body {
  --progress-indent:51px;
  --reference-inset:18px
}
.reading {
  padding-left:calc(var(--progress-indent) - var(--reference-inset))
}
.reading a {
  position:relative;
  display:block
}
.reading a>span:first-child {
  position:absolute;
  right:calc(100% + 8px);
  top:0;
  white-space:nowrap
}
.thinking-hints ul {
  padding-left:calc(var(--progress-indent) - 18px)
}
@media(max-width:720px) {
  .session-body {
    --progress-indent:43px;
    --reference-inset:12px
  }
}
/* Lift the common action row, retaining its shared baseline. */
.settings-actions,.result-actions {
  bottom:12px;
  padding-bottom:8px
}
.session-body {
  padding-bottom:122px
}
.settings-scroll {
  padding-bottom:108px
}
.hint-bulb {
  display:inline-block;
  font-size:1.3em;
  line-height:1;
  vertical-align:-.08em
}
@media(max-width:720px) {
  .session-body {
    padding-bottom:112px
  }
  .settings-scroll {
    padding-bottom:99px
  }
}
@media(prefers-reduced-motion:reduce) {
  body.timer-finished #timer-done::backdrop {
    animation:none;
    background:rgba(0,0,0,.8)
  }
}
/* Keep a full suffix slot, so every 分 shares the same right edge. */
.step-time {
  display:inline-flex;
  align-items:baseline;
  justify-content:flex-end;
  font-variant-numeric:tabular-nums
}
.step-duration {
  text-align:right
}
.step-time-suffix {
  margin-left:4px;
  display:inline-block;
  flex:0 0 1em;
  width:1em;
  text-align:left
}
/* The glyph is smaller; its hit area remains 28 × 32px. */
.remove-member {
  right:5px
}
/* Japanese tracking follows the description; Latin display text keeps its own style. */
:root {
  --jp-tracking:0em
}
#topic-title,.description,.session-meta,.session-status,.label,.primary,.secondary, .participant-row input,.participant-row input::placeholder,.input-error, .step h3,.step-time,.reading,.thinking-hints,.quote-item,.quote-author, .clear-quote,.empty p,#home-catchphrase,#timer-heading,.timer-modal p, #copy-status,.timer-input span {
  letter-spacing:var(--jp-tracking)
}
/* Keep the band fixed, while the clock follows the actual time text closely. */
#timer-button.running {
  justify-content:flex-start;
  gap:6px
}
#timer-label {
  flex:0 1 auto;
  letter-spacing:.06em
}
/* Completion blocks background controls; advancing happens only after dismissal. */
#training-clear-toast {
  margin:0;
  color-scheme:light
}
#training-clear-toast:not([open]) {
  display:none
}
#training-clear-toast::backdrop {
  background:rgb(0 0 0 / 50%)
}
body[data-mode="training"] #training-clear-toast::backdrop {
  background:rgb(0 0 0 / 50%)
}
.session-status>span {
  font-size:14.5px;
  line-height:26px
}
#timer-button.running {
  gap:10px
}
#timer-label {
  flex:1;
  min-width:0
}
.quote-training {
  display:none;
  align-items:center;
  font:600 15px/24px Orbitron,sans-serif;
  letter-spacing:.75px;
  color:var(--brand);
  flex:none
}
body[data-mode="training"] .quote-training {
  display:inline-flex
}
@media(max-width:720px) {
  .session-status>span,.session-status>span:last-child {
    font-size:14px;
    line-height:25px
  }
}
/* Slightly more breathing room above the topic, shared by both modes. */
.session-meta {
  margin-bottom:14px
}
.description {
  margin-top:14px
}
#timer-button.running {
  gap:5px;
  width:168px;
  min-width:168px;
  max-width:168px
}
@media(min-width:721px) {
  .session-status {
    margin-bottom:10px
  }
}
@media(max-width:720px) {
  .session-body {
    padding-top:24px
  }
  .session-meta {
    margin-bottom:16px
  }
  .description {
    margin-top:16px
  }
  .quote-training {
    font-size:14px;
    font-weight:500;
    letter-spacing:.7px
  }
}
/* Shared header rhythm: match the 35px gap between progress and hints. */
.session-status {
  margin-bottom:0
}
.session-body {
  padding-top:35px
}
.session-meta {
  margin-bottom:11px
}
.description {
  margin-top:11px
}
.step-duration {
  font-size:14.5px
}
.quote-training {
  font-size:19px
}
@media(max-width:720px) {
  .session-meta {
    margin-bottom:13px
  }
  .description {
    margin-top:13px
  }
  .step-duration {
    font-size:14px
  }
  .quote-training {
    font-size:18px
  }
}
/* Tight tag spacing, with white separators on matching colored chips. */
.session-meta {
  gap:4px
}
.tag-separator {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  padding:1px 2px 3px;
  background:var(--accent);
  color:#fff;
  line-height:20px;
  font-weight:300
}
/* Text-only topic metadata and typography shared with reference content. */
.session-status>span,.session-status>span:last-child {
  font:400 14px/23.8px 'Noto Sans JP',sans-serif;
  letter-spacing:var(--jp-tracking)
}
.session-meta {
  color:var(--secondary);
  font:400 13px/20px 'Noto Sans JP',sans-serif;
  letter-spacing:var(--jp-tracking)
}
.session-tag,.tag-separator {
  background:transparent;
  padding:0;
  color:inherit;
  font:inherit;
  letter-spacing:inherit
}
.session-tag:first-child {
  color:var(--accent)
}
.timer-input span {
  font-size:18px;
  line-height:27px
}
@media(max-width:720px) {
  .session-status>span,.session-status>span:last-child {
    font-size:13px;
    line-height:19.5px
  }
  .session-meta {
    line-height:23.8px
  }
}
/* Metadata colors and progression hierarchy, across modes and viewports. */
.session-tag {
  color:var(--accent)
}
.step-number {
  font-size:19px
}
.session-status>span,.session-status>span:last-child {
  font-size:13px
}
@media(max-width:720px) {
  .step-number {
    font-size:17px
  }
  .session-status>span,.session-status>span:last-child {
    font-size:12px
  }
}
/* Give metadata separators twice the spacing and soften their text color. */
.session-meta {
  gap:8px
}
.tag-separator {
  color:var(--text);
  opacity:.6
}
/* Hide topic metadata; use the same check artwork as the clear action. */
.session-meta {
  display:none
}
.selection-dot:after {
  content:none
}
.choice input:checked+.label .selection-dot {
  width:16px;
  height:16px;
  align-items:center
}
.selection-dot svg {
  display:block;
  flex:none
}
#timer-present .present-arrow {
  width:24px;
  height:24px;
  max-width:24px;
  max-height:24px;
  flex:none
}
/* Optical check alignment and mode-matched generate button outlines. */
.selection-dot svg {
  transform:translateY(2px)
}
#generate-button {
  border-color:var(--page)
}
body[data-mode="training"] #generate-button {
  border-color:var(--training-page)
}

/* Top: Figma 4020:9922, with native Japanese vertical punctuation. */
body[data-view=home] #home-screen {
  padding:0 24px 84.8944px;
  min-height:100dvh;
  height:100dvh
}
.home-content {
  max-width:none
}
#home-catchphrase {
  position:absolute;
  top:39px;
  right:26px;
  margin:0;
  font:400 28px/37px 'Noto Sans JP',sans-serif;
  letter-spacing:2.24px;
  color:#222;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  white-space:nowrap;
  width:auto;
  height:auto
}
.home-modes {
  gap:30px;
  align-items:center
}
.home-mode {
  width:200px;
  height:240px;
  flex:none;
  justify-content:center;
  gap:35px;
  padding:8px 0 0;
  background:#fff;
  color:var(--brand);
  border:0;
  border-radius:0;
  letter-spacing:normal
}
.home-mode[data-enter-mode=training] {
  background:var(--brand);
  color:#fff
}
.home-mode-label {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  white-space:nowrap
}
.home-mode-japanese {
  font:500 24px/38.4px 'Noto Sans JP',sans-serif;
  letter-spacing:1.92px
}
.home-mode-english {
  font:600 14px/27px Orbitron,sans-serif;
  letter-spacing:.98px
}
.home-mode-icon {
  display:block;
  flex:none
}
.home-mode {
  box-shadow:none;
  transition:transform .18s cubic-bezier(.2,.7,.2,1)
}
.home-mode:hover,.home-mode:hover .home-mode-square {
  box-shadow:none
}
@media(hover:hover) and (pointer:fine) {
  .home-mode:hover {
    transform:translateY(-4px)
  }
}
.home-mode:active {
  transform:translateY(1px) scale(.97)
}
@media(prefers-reduced-motion:reduce) {
  .home-mode {
    transition:none
  }
  .home-mode:hover,.home-mode:active {
    transform:none
  }
}
.home-mode:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
.home-logo-marquee {
  height:84.8944px
}
.home-logo {
  width:352.928px;
  height:84.8944px;
  overflow:visible
}
.home-logo-group {
  gap:64px;
  padding-right:64px
}
@media(max-width:720px) {
  body[data-view=home] #home-screen {
    padding:24px 64px 94px 24px
  }
  #home-catchphrase {
    top:25px;
    right:14px;
    font-size:23px;
    line-height:29px;
    letter-spacing:1.84px
  }
  .home-modes {
    flex-direction:column;
    gap:24px
  }
  .home-mode {
    width:160px;
    height:190px;
    gap:20px;
    padding-top:8px
  }
  .home-mode-japanese {
    font-size:19px;
    line-height:30.4px;
    letter-spacing:1.52px
  }
  .home-mode-english {
    font-size:13px;
    line-height:24px;
    letter-spacing:.91px
  }
  .home-logo-marquee,.home-logo {
    height:70px
  }
  .home-logo {
    width:291.008px
  }
  .home-logo img {
    transform:scale(.824554);
    transform-origin:top left
  }
  .home-logo-group {
    gap:40px;
    padding-right:40px
  }
}
@media(max-width:720px) and (max-height:600px) {
  .home-modes {
    gap:16px
  }
  .home-mode {
    height:160px;
    gap:12px
  }
  #home-catchphrase {
    font-size:20px;
    line-height:26px
  }
}
@media(max-height:440px) {
  body[data-view=home] {
    overflow-y:auto
  }
  body[data-view=home] #home-screen {
    min-height:440px
  }
}
/* Catchphrase sits beneath the mode cards on desktop and mobile. */
.home-content {
  position:relative;
  top:-24px
}
#home-catchphrase {
  position:absolute;
  top:calc(100% + 28px);
  right:auto;
  left:0;
  width:100%;
  height:auto;
  margin:0;
  text-align:center;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
  white-space:normal;
  font-size:24px;
  line-height:38px;
  letter-spacing:1.92px
}
@media(max-width:720px) {
  body[data-view=home] #home-screen {
    padding:24px 24px 94px
  }
  #home-catchphrase {
    top:calc(100% + 20px);
    font-size:24px;
    line-height:38px;
    letter-spacing:1.92px
  }
}
@media(max-width:720px) and (max-height:600px) {
  #home-catchphrase {
    top:calc(100% + 16px);
    font-size:22px;
    line-height:35px
  }
}
/* Top mode cards: layered motion with a short, deliberate selection beat. */
.home-mode {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .36s cubic-bezier(.22,1,.36,1)
}
.home-mode:before {
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid currentColor;
  opacity:0;
  transform:scale(.94);
  pointer-events:none;
  transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1)
}
.home-mode-icon {
  transition:transform .4s cubic-bezier(.22,1,.36,1)
}
.home-mode-label {
  transition:transform .4s cubic-bezier(.22,1,.36,1) .035s
}
.home-mode-english {
  transition:letter-spacing .4s cubic-bezier(.22,1,.36,1)
}
@media(hover:hover) and (pointer:fine) {
  .home-mode:hover {
    transform:translateY(-5px);
    box-shadow:none
  }
  .home-mode:hover:before {
    opacity:.22;
    transform:scale(1)
  }
  .home-mode:hover .home-mode-icon {
    transform:translateY(-5px) scale(1.06)
  }
  .home-mode:hover .home-mode-label {
    transform:translateY(2px)
  }
  .home-mode:hover .home-mode-english {
    letter-spacing:1.6px
  }
}
.home-mode:active {
  transform:translateY(-1px) scale(.975)
}
.home-mode.is-entering {
  animation:home-mode-confirm .28s cubic-bezier(.22,1,.36,1) both
}
.home-mode.is-entering:before {
  opacity:.4;
  transform:scale(1)
}
.home-mode.is-entering .home-mode-icon {
  transform:translateY(-2px) scale(.96)
}
@keyframes home-mode-confirm {
  0% {
    transform:translateY(-1px) scale(.975)
  }
  45% {
    transform:translateY(-3px) scale(1.015)
  }
  100% {
    transform:translateY(-7px) scale(1);
    opacity:.6
  }
}
@media(prefers-reduced-motion:reduce) {
  .home-mode,.home-mode:before,.home-mode-icon,.home-mode-label,.home-mode-english {
    transition:none
  }
  .home-mode:hover,.home-mode:active,.home-mode:hover .home-mode-icon,.home-mode:hover .home-mode-label {
    transform:none
  }
  .home-mode.is-entering {
    animation:none
  }
}
/* Keep mode-card motion without an inner outline. */
.home-mode:before {
  content:none
}
/* Brief section entrances; ordinary form updates do not restart these. */
@keyframes section-arrive {
  from {
    opacity:0;
    translate:0 8px
  }
  to {
    opacity:1;
    translate:0 0
  }
}
@keyframes section-fade {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
body[data-view=home] .home-modes, body[data-view=home] #home-catchphrase, body[data-view=app] .settings-section, body[data-view=app] .empty, body[data-view=app] .session-main, body[data-view=app] .thinking-hints, .timer-modal[open],#training-clear-toast[open] {
  animation:section-arrive .5s cubic-bezier(.22,1,.36,1) both
}
body[data-view=home] #home-catchphrase {
  animation-delay:90ms
}
body[data-view=app] .settings-section:nth-child(2) {
  animation-delay:40ms
}
body[data-view=app] .settings-section:nth-child(3) {
  animation-delay:80ms
}
body[data-view=app] .settings-section:nth-child(n+4) {
  animation-delay:120ms
}
body[data-view=app] .thinking-hints {
  animation-delay:80ms
}
body[data-view=app] .settings-actions, body[data-view=app] .session-status, body[data-view=app] .result-actions {
  animation:section-fade .4s ease-out both
}
@media(prefers-reduced-motion:reduce) {
  body[data-view=home] .home-modes,body[data-view=home] #home-catchphrase, body[data-view=app] .settings-section,body[data-view=app] .empty, body[data-view=app] .session-main,body[data-view=app] .thinking-hints, body[data-view=app] .settings-actions,body[data-view=app] .session-status, body[data-view=app] .result-actions,.timer-modal[open],#training-clear-toast[open] {
    animation:none
  }
}
/* Compact action feedback: icon and label stay aligned, without fading. */
:is(#generate-button,#copy-notion,#again,#clear-topic) {
  transition:transform .22s cubic-bezier(.22,1,.36,1);
  box-shadow:none
}
:is(#generate-button,#copy-notion):enabled:hover {
  background:var(--brand)
}
#again:hover {
  background:rgba(255,255,255,.72)
}
body[data-mode=training] #clear-topic:hover {
  background:#e3ecef
}
@media(hover:hover) and (pointer:fine) {
  :is(#generate-button,#copy-notion,#again,#clear-topic):enabled:hover {
    transform:none;
    box-shadow:none
  }
}
:is(#generate-button,#copy-notion,#again,#clear-topic):enabled:active {
  transform:translateY(0) scale(.985);
  transition-duration:.09s
}
:is(#generate-button,#copy-notion,#again,#clear-topic).action-confirming {
  animation:action-press .18s ease-out
}
@keyframes action-press {
  from {
    transform:translateY(0) scale(.985)
  }
  to {
    transform:translateY(0) scale(1)
  }
}
@media(prefers-reduced-motion:reduce) {
  :is(#generate-button,#copy-notion,#again,#clear-topic) {
    transition:none!important;
    animation:none!important;
    transform:none!important
  }
}
/* Copy feedback must not add a grid row and push the fixed actions upward. */
.result-actions #copy-status {
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  margin:0;
  max-height:180px;
  overflow:auto
}
/* Non-blocking confirmation, independent of the card's action layout. */
#notion-copy-toast {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:150;
  width:max-content;
  max-width:calc(100vw - 40px);
  padding:24px 28px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 32px #0002;
  text-align:center;
  font:500 15px/1.8 'Noto Sans JP',sans-serif;
  letter-spacing:var(--jp-tracking);
  pointer-events:none;
  animation:section-arrive .3s cubic-bezier(.22,1,.36,1) both
}
#notion-copy-toast[hidden] {
  display:none
}
@media(prefers-reduced-motion:reduce) {
  #notion-copy-toast {
    animation:none
  }
}
/* Subtle surface feedback, without shine or movement on hover. */
#notion-copy-toast {
  background:#fff
}
:is(#generate-button,#copy-notion,#again,#clear-topic) {
  transition:background-color .22s ease-out,transform .18s ease-out;
  box-shadow:none
}
@media(hover:hover) and (pointer:fine) {
  :is(#generate-button,#copy-notion):enabled:hover {
    background:color-mix(in srgb,var(--brand) 92%,white)
  }
  #again:enabled:hover {
    background:rgba(255,255,255,.94)
  }
  body[data-mode=training] #clear-topic:enabled:hover {
    background:#eef3f5
  }
}
@media(prefers-reduced-motion:reduce) {
  :is(#generate-button,#copy-notion,#again,#clear-topic) {
    transition:none
  }
}
/* Random logo reveal and a real typing cursor, independent of the marquee loop. */
body[data-view=home] #home-catchphrase {
  animation:none;
  min-height:38px
}
.home-logo {
  opacity:0;
  transition:opacity .16s ease-out
}
.home-logo.intro-logo-visible {
  opacity:1
}
.home-type-caret {
  display:inline-block;
  width:2px;
  height:1em;
  background:currentColor;
  margin-left:4px;
  vertical-align:-.12em;
  animation:home-caret-blink .75s steps(1,end) infinite
}
.home-type-caret[hidden] {
  display:none
}
@keyframes home-caret-blink {
  0%,49% {
    opacity:1
  }
  50%,100% {
    opacity:0
  }
}
@media(prefers-reduced-motion:reduce) {
  .home-logo {
    transition:none
  }
  .home-type-caret {
    animation:none
  }
}
/* Copy starts first; cards fade in near the end of typing. */
body[data-view=home] .home-modes {
  animation:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .65s ease-out
}
body[data-view=home] .home-modes.intro-buttons-visible {
  opacity:1;
  visibility:visible
}
.home-logo {
  transition:opacity .035s linear
}
@media(prefers-reduced-motion:reduce) {
  body[data-view=home] .home-modes,.home-logo {
    transition:none
  }
}
/* Cards enter immediately; logos pop into view in a tight burst. */
body[data-view=home] .home-modes {
  transition:none
}
body[data-view=home] .home-modes.intro-buttons-visible {
  animation:section-arrive .5s cubic-bezier(.22,1,.36,1) both
}
.home-logo {
  transition:none
}
@media(prefers-reduced-motion:reduce) {
  body[data-view=home] .home-modes.intro-buttons-visible {
    animation:none
  }
}
/* The top logo strip stays visible; speed variation is handled without position resets. */
.home-logo {
  opacity:1;
  transition:none
}
/* Right-to-left background wipe; copy changes at the center crossing. */
body[data-view=home] #home-screen {
  isolation:isolate;
  background:var(--page)
}
body[data-view=home] #home-screen::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--training-page);
  clip-path:inset(0 0 0 100%);
  animation:home-background-cycle 6s linear infinite
}
body[data-view=home] .home-content {
  z-index:1
}
body[data-view=home] #home-catchphrase {
  animation:home-copy-color 6s linear infinite
}
.home-typed {
  white-space:pre-wrap
}
@keyframes home-background-cycle {
  0% {
    clip-path:inset(0);
    animation-timing-function:cubic-bezier(.4,0,.2,1)
  }
  2.083333%,49.999% {
    clip-path:inset(0 100% 0 0)
  }
  50% {
    clip-path:inset(0 0 0 100%);
    animation-timing-function:cubic-bezier(.4,0,.2,1)
  }
  52.083333%,100% {
    clip-path:inset(0)
  }
}
@keyframes home-copy-color {
  0%,.72916% {
    color:#fff
  }
  .72917%,50.72916% {
    color:#222
  }
  50.72917%,100% {
    color:#fff
  }
}
@media(prefers-reduced-motion:reduce) {
  body[data-view=home] #home-screen::before {
    animation:none
  }
  body[data-view=home] #home-catchphrase {
    animation:none;
    color:#222
  }
}
/* Re-enter from the right with each background wipe, then continue the slow loop. */
.home-logo-group {
  gap:32px;
  padding-right:32px
}
.home-logo-track {
  animation-duration:100s
}
.home-logo-entry {
  width:100%
}
body[data-view=home] .home-logo-entry {
  animation:home-logo-wipe-cycle 6s linear infinite
}
@keyframes home-logo-wipe-cycle {
  0%,50% {
    transform:translateX(100vw);
    animation-timing-function:cubic-bezier(.4,0,.2,1)
  }
  2.083333%,49.999%,52.083333%,100% {
    transform:translateX(0)
  }
}
@media(max-width:720px) {
  .home-logo-group {
    gap:20px;
    padding-right:20px
  }
}
@media(prefers-reduced-motion:reduce) {
  body[data-view=home] .home-logo-entry {
    animation:none
  }
}
/* Reserve the caret slot so hiding it never recenters the finished copy. */
.home-type-caret[hidden] {
  display:inline-block!important;
  visibility:hidden;
  animation:none
}
/* Blue typing caret, one step heavier. */
.home-type-caret {
  width:3px;
  background:var(--brand)
}
/* Lift bottom actions as one unit on pointer hover; return to their fixed baseline. */
:is(#generate-button,#copy-notion,#again,#clear-topic) {
  transform:translateY(0);
  transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .22s ease-out
}
@media(hover:hover) and (pointer:fine) {
  :is(#generate-button,#copy-notion,#again,#clear-topic):enabled:hover {
    transform:translateY(-3px);
    box-shadow:none
  }
  :is(#generate-button,#copy-notion,#again,#clear-topic):enabled:active {
    transform:translateY(-1px) scale(.985)
  }
}
@media(prefers-reduced-motion:reduce) {
  :is(#generate-button,#copy-notion,#again,#clear-topic) {
    transform:none!important;
    transition:none!important
  }
}
/* Button-anchored copy confirmation, outside the card's clipping area. */
#notion-copy-toast {
  left:0;
  top:0;
  transform:none;
  max-width:calc(100vw - 24px);
  padding:14px 18px;
  border-radius:10px;
  box-shadow:0 4px 20px #0002;
  font-size:13px;
  line-height:1.7;
  animation:copy-bubble-in .18s ease-out both
}
#notion-copy-toast::after {
  content:"";
  position:absolute;
  left:var(--bubble-tip,50%);
  bottom:-7px;
  width:12px;
  height:12px;
  background:#fff;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  transform:translateX(-50%) rotate(45deg)
}
@keyframes copy-bubble-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
@media(prefers-reduced-motion:reduce) {
  #notion-copy-toast {
    animation:none
  }
}
/* More breathing room and a narrower speech-bubble pointer. */
#notion-copy-toast {
  padding:18px 24px
}
#notion-copy-toast::before,#notion-copy-toast::after {
  content:"";
  position:absolute;
  left:var(--bubble-tip,50%);
  width:12px;
  height:13px;
  transform:translateX(-50%);
  clip-path:polygon(0 0,100% 0,50% 100%);
  border:0
}
#notion-copy-toast::before {
  bottom:-13px;
  background:var(--border)
}
#notion-copy-toast::after {
  bottom:-11px;
  background:#fff
}
/* Tablet: retain two columns while giving the reading area room in portrait. */
@media (min-width:721px) and (max-width:1194px) {
  main {
    max-width:1000px;
    padding:24px max(20px,env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))
  }
  .workspace {
    grid-template-columns:clamp(216px,25vw,244px) minmax(0,1fr);
    gap:24px
  }
  .settings-scroll {
    padding-right:8px;
    overscroll-behavior-y:contain
  }
  .settings-actions {
    right:8px
  }
  .settings-section {
    margin-bottom:32px
  }
  .label {
    min-height:44px;
    padding:9px 10px;
    font-size:14px;
    line-height:22px
  }
  .participant-row input {
    height:44px;
    font-size:16px;
    padding-right:40px
  }
  .remove-member {
    top:0;
    right:0;
    width:40px;
    height:44px
  }
  .session-body {
    padding-left:24px;
    padding-right:24px;
    overscroll-behavior-y:contain
  }
  #topic-title {
    font-size:clamp(23px,2.8vw,25px);
    line-height:1.55;
    overflow-wrap:anywhere
  }
  .result-actions {
    left:24px;
    right:24px
  }
  .result-actions .primary,.result-actions .secondary {
    font-size:14px;
    gap:6px;
    padding-inline:6px
  }
  .session-status>span,.session-status>span:last-child {
    min-width:0;
    padding:10px 12px
  }
  .step {
    padding-right:8px;
    gap:10px
  }
  .session-body {
    --progress-indent:49px
  }
  .step h3 {
    font-size:15px;
    line-height:1.8
  }
  .reading small {
    overflow-wrap:anywhere
  }
}
/* iPadOS should not zoom the layout when a member field receives focus. */
@media (pointer:coarse) {
  .participant-row input {
    font-size:16px
  }
  .settings-scroll,.session-body {
    -webkit-overflow-scrolling:touch
  }
}
/* New top logo: retain the supplied aspect ratio at both responsive sizes. */
.home-logo img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  transform:none
}

.storage-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--secondary);
  margin-top: 12px;
}

/* Error feedback stays beside the visible action, including the mobile topic layer. */
.generation-error {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  padding: 12px;
  margin: 0 0 8px;
  max-height: 160px;
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px #0002;
  font-size: 13px;
  line-height: 1.7;
  pointer-events: auto;
}

/* Short landscape phones: prevent stacked entry cards from meeting the fixed logo. */
@media (max-width:720px) and (max-height:500px) and (orientation:landscape) {
  body[data-view=home] #home-screen {
    min-height:320px;
    height:100dvh;
    padding:16px 24px 96px;
  }
  .home-content { top:-8px; }
  .home-modes { flex-direction:row; gap:24px; }
  .home-mode { width:160px; height:160px; gap:14px; }
  #home-catchphrase { top:calc(100% + 12px); font-size:20px; line-height:30px; }
}

/* Translucent fixed actions: keep labels sharp while blurring content beneath. */
:is(#generate-button,#copy-notion,#again,#clear-topic) {
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
:is(#generate-button,#copy-notion):enabled {
  background:var(--brand);
}
#generate-button:disabled { background:rgba(214,216,218,.8); }
#again { background:rgba(255,255,255,.65); }
body[data-mode=training] #clear-topic { background:rgba(227,236,239,.65); }
/* Release the entry fade's compositing layer after it finishes. */
body[data-view=app] .settings-actions,
body[data-view=app] .result-actions { animation-fill-mode:backwards; }
@media (hover:hover) and (pointer:fine) {
  :is(#generate-button,#copy-notion):enabled:hover {
    background:var(--brand);
  }
  #again:enabled:hover { background:rgba(255,255,255,.65); }
  body[data-mode=training] #clear-topic:enabled:hover { background:rgba(227,236,239,.65); }
}

/* Solid brand blue matches the logo in both modes, including hover. */
:is(#generate-button,#copy-notion):enabled,
:is(#generate-button,#copy-notion):enabled:hover {
  position:relative;
  background:var(--brand);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
:is(#generate-button,#copy-notion):enabled::before,
:is(#generate-button,#copy-notion):enabled::after { content:none; }

/* Progression numbers: one weight lighter on desktop and mobile. */
.step-number { font-family:Orbitron,sans-serif; font-weight:400; }
@media(max-width:720px) { .step-number { font-weight:500; } }