:root {
  color-scheme: light;
  font-family: ui-sans-serif, system-ui, sans-serif;
  --room-canvas: #f7f4ed;
  --room-text: #1e293b;
  --room-muted: #526173;
  --room-panel: #ffffff;
  --room-panel-hover: #eef2f7;
  --room-border: #1e293b;
  --room-subtle-border: #cbd5e1;
  --room-selected: #334155;
  --room-selected-text: #f8fafc;
  --room-focus: #2563eb;
  --room-disabled: #94a3b8;
}

:root[data-ink-skin="black"] {
  color-scheme: dark;
  --room-canvas: #101820;
  --room-text: #edf4fa;
  --room-muted: #c0d1df;
  --room-panel: #182633;
  --room-panel-hover: #23384a;
  --room-border: #d7e4ee;
  --room-subtle-border: #4b6377;
  --room-selected: #b9d8ef;
  --room-selected-text: #102131;
  --room-focus: #8fc8ff;
  --room-disabled: #91a6b7;
}

* { box-sizing: border-box; }

body { margin: 0; background: var(--room-canvas); color: var(--room-text); }

#clean-your-room {
  width: min(100%, 42rem);
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.1;
}

.skin-change { flex: 0 0 auto; min-width: 0; padding: .42rem .62rem; border: 1px solid var(--room-subtle-border); border-radius: .3rem; background: transparent; color: var(--room-text); font-size: .76rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.skin-change:hover { border-color: var(--room-selected); background: var(--room-panel-hover); color: var(--room-text); }
.skin-change:disabled { border-color: var(--room-disabled); color: var(--room-disabled); }

@media (max-width: 30rem) {
  .title-row { display: grid; gap: .55rem; }
  .skin-change { justify-self: end; }
}

#story p { line-height: 1.55; }

#story button {
  display: block;
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--room-border);
  border-radius: 0.35rem;
  background: var(--room-panel);
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

#story button:hover { background: var(--room-panel-hover); }
#story button:disabled { border-color: var(--room-disabled); color: var(--room-disabled); cursor: not-allowed; }
#story button:focus-visible { outline: 3px solid var(--room-focus); outline-offset: 2px; }

@media (forced-colors: active) {
  .skin-change,
  #story button { border-color: ButtonText; background: Canvas; color: CanvasText; }
  #story button:focus-visible { outline-color: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}