.key-story, .playground-worktable { color: #172326; }
.key-story { margin-bottom: 30px; border: 2px solid #172326; background: #fffaf0; box-shadow: 9px 9px 0 #d9caa8; }
.key-story-heading { position: relative; overflow: hidden; padding: clamp(25px, 4vw, 48px); border-bottom: 2px solid #172326; background: #eacb9b; }
.key-story-heading::after { position: absolute; top: 19px; right: 6%; width: clamp(75px, 13vw, 160px); height: clamp(75px, 13vw, 160px); border: clamp(14px, 2.2vw, 26px) solid #b75331; border-radius: 50%; box-shadow: 35px 50px 0 -24px #b75331; content: ""; transform: rotate(-26deg); opacity: 0.45; pointer-events: none; }
.key-story-heading > p:first-child, .key-story-heading > span, .key-room-top, .playground-worktable-heading > p:first-child, .worktable-piece > span { margin: 0; font: 800 0.69rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; }
.key-story-heading h1 { position: relative; z-index: 1; max-width: 850px; margin: 20px 0 16px; font-size: clamp(2.75rem, 7.2vw, 6.7rem); line-height: 0.95; letter-spacing: -0.075em; text-wrap: balance; }
.key-story-heading h1 em { color: #90422b; font-style: normal; }
.key-story-heading > p:nth-of-type(2) { position: relative; z-index: 1; max-width: 53ch; margin: 0 0 22px; font-size: clamp(0.95rem, 1.5vw, 1.12rem); line-height: 1.5; }
.key-story-heading > span { display: inline-block; padding: 7px 10px; border: 1px solid #172326; background: #fffaf0; }
.key-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.key-room { display: flex; min-width: 0; flex-direction: column; background: #fbf7e9; }
.key-room + .key-room { border-left: 2px solid #172326; }
.key-room-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 2px solid #172326; background: #dae3df; }
.key-room-workshop .key-room-top { background: #efe1ce; }
.key-room-top span:last-child { font-size: 1.15rem; }
.key-room-scene { position: relative; min-height: clamp(190px, 23vw, 285px); overflow: hidden; border-bottom: 2px solid #172326; background: repeating-linear-gradient(0deg, transparent 0 28px, rgb(23 35 38 / 6%) 29px 30px), #bdcbc2; }
.key-room-workshop .key-room-scene { background: repeating-linear-gradient(90deg, transparent 0 44px, rgb(23 35 38 / 6%) 45px 46px), #dfc7aa; }
.key-room-scene::before { position: absolute; right: 0; bottom: 0; left: 0; height: 30%; border-top: 3px solid #314740; background: #a5a292; content: ""; }
.key-room-workshop .key-room-scene::before { border-color: #805742; background: #b28c6f; }
.key-archive-shelf { position: absolute; top: 21%; left: 12%; display: flex; width: 76%; height: 57%; align-items: end; gap: 2%; padding: 10px; border: 8px solid #674e3e; background: #af8c66; box-shadow: 9px 9px 0 rgb(23 35 38 / 17%); }
.key-archive-shelf i { display: grid; flex: 1; height: 79%; place-items: center; border: 2px solid #214a4a; background: #e5dcbc; font: 800 clamp(0.62rem, 1.4vw, 0.9rem)/1 ui-monospace, monospace; font-style: normal; }
.key-archive-shelf i:nth-child(2) { height: 90%; background: #d0ddca; }
.key-archive-shelf i:nth-child(3) { height: 73%; background: #b6c7bc; }
.key-archive-shelf .key-archive-gap { border-style: dashed; color: #fffaf0; background: #4f675d; }
.key-archive-page { position: absolute; right: 16%; bottom: 4%; display: grid; width: 58px; height: 72px; place-items: center; transform: translate(65px, 25px) rotate(18deg); border: 2px solid #314740; background: #f8e5b6; box-shadow: 5px 5px 0 rgb(23 35 38 / 20%); opacity: 0; transition: transform 550ms cubic-bezier(.2,.8,.2,1), opacity 350ms ease; }
.key-archive-page span { align-self: end; font-weight: 900; font-size: 1.1rem; }
.key-archive-page small { align-self: start; font: 800 0.55rem/1 ui-monospace, monospace; }
.key-archive-notice { position: absolute; right: 9%; bottom: 10%; display: grid; width: 69px; height: 74px; place-items: center; transform: translateY(35px) rotate(10deg); border: 2px solid #792f2a; background: #f6d0b2; color: #792f2a; box-shadow: 4px 4px 0 rgb(23 35 38 / 16%); font: 900 0.67rem/1.15 ui-monospace, monospace; text-align: center; opacity: 0; transition: transform 450ms ease, opacity 350ms ease; }
.key-room-archive[data-active="true"] .key-archive-page { transform: translate(0, 0) rotate(-8deg); opacity: 1; }
.key-room-archive[data-active="true"] .key-archive-gap { background: #f8e5b6; color: #214a4a; border-style: solid; }
.key-room-archive[data-outcome="keep"] .key-archive-notice { transform: translateY(0) rotate(-6deg); opacity: 1; }
.key-room-archive[data-outcome="keep"] .key-archive-gap { border-color: #792f2a; background: #f6d0b2; color: #792f2a; }
.key-workshop-shelf { position: absolute; top: 18%; left: 17%; width: 65%; height: 56%; transform: rotate(-7deg); transform-origin: bottom right; transition: transform 550ms cubic-bezier(.2,.8,.2,1); }
.key-workshop-shelf::before, .key-workshop-shelf::after { position: absolute; top: 0; height: 100%; width: 11px; border: 2px solid #3d3630; background: #a26945; content: ""; }
.key-workshop-shelf::before { left: 0; }
.key-workshop-shelf::after { right: 0; }
.key-workshop-shelf i { position: absolute; left: 0; width: 100%; height: 18px; border: 2px solid #3d3630; background: #ae7247; }
.key-workshop-shelf i:first-child { top: 0; }
.key-workshop-shelf i:nth-child(2) { top: 49%; }
.key-workshop-shelf b { position: absolute; top: 24%; left: 31%; padding: 7px 10px; transform: rotate(6deg); border: 1px solid #76432d; background: #fff1c7; color: #76432d; font: 800 0.7rem/1 ui-monospace, monospace; }
.key-workshop-brace { position: absolute; right: 17%; bottom: 16%; display: grid; width: 46px; height: 50px; place-items: center; transform: translateY(40px) rotate(-35deg); border: 3px solid #395650; border-radius: 50% 50% 3px 3px; color: #395650; background: #eccb70; font-size: 1.4rem; opacity: 0; transition: transform 550ms ease, opacity 350ms ease; }
.key-workshop-tag { position: absolute; right: 15%; bottom: 11%; display: grid; width: 66px; height: 50px; place-items: center; transform: translateY(30px) rotate(12deg); border: 2px solid #76432d; background: #fff1c7; color: #76432d; box-shadow: 4px 4px 0 rgb(23 35 38 / 16%); font: 900 0.62rem/1.1 ui-monospace, monospace; text-align: center; opacity: 0; transition: transform 450ms ease, opacity 350ms ease; }
.key-room-workshop[data-active="true"] .key-workshop-shelf { transform: rotate(0); }
.key-room-workshop[data-active="true"] .key-workshop-shelf b { background: #d5e7cd; color: #245643; }
.key-room-workshop[data-active="true"] .key-workshop-shelf b::after { content: " ✓"; }
.key-room-workshop[data-active="true"] .key-workshop-brace { transform: translateY(0) rotate(0); opacity: 1; }
.key-room-workshop[data-outcome="keep"] .key-workshop-shelf { transform: rotate(-2deg); }
.key-room-workshop[data-outcome="keep"] .key-workshop-tag { transform: translateY(0) rotate(-8deg); opacity: 1; }
.key-room-body { flex: 1; padding: clamp(18px, 2.6vw, 30px); }
.key-room-body h2 { margin: 0 0 10px; font-size: clamp(1.65rem, 2.7vw, 2.45rem); letter-spacing: -0.055em; line-height: 1.05; }
.key-room-body > p { max-width: 44ch; min-height: 3em; margin: 0 0 20px; color: #40504d; font-size: 0.86rem; line-height: 1.5; }
.key-room-body button { display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 2px solid #172326; color: #fffaf0; background: #172326; font: 800 0.83rem/1.2 Inter, ui-sans-serif, sans-serif; text-align: left; cursor: pointer; }
.key-room-body button:hover { background: #315d40; }
.key-room-workshop .key-room-body button:hover { background: #8e4d34; }
.key-room-body button[aria-pressed="true"] { color: #172326; background: #eccb70; }
.key-room-result { margin-top: 15px; padding: 16px; border-left: 5px solid #315d40; background: #dfeadd; }
.key-room-workshop .key-room-result { border-color: #9b5636; background: #f1dfcc; }
.key-room-result[hidden] { display: none; }
.key-room-result strong { display: block; margin-bottom: 5px; font-size: 1rem; }
.key-room-result p { margin: 0; font-size: 0.82rem; line-height: 1.5; }
.key-room-result:focus { outline: 3px solid #28748a; outline-offset: 4px; }
.key-room-next { display: none; width: fit-content; min-height: 40px; align-items: center; gap: 12px; margin-top: 12px; padding: 8px 10px; border: 1px solid currentColor; font-size: 0.77rem; font-weight: 800; text-decoration: none; }
.key-room[data-outcome="first"] .key-room-next { display: inline-flex; }
.key-room-next:hover { background: #fffaf0; }
.key-followup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.85fr); gap: 18px 28px; padding: clamp(20px, 3vw, 32px); border-top: 2px solid #172326; background: #e8e2d0; }
.key-followup[hidden] { display: none; }
.key-followup-heading > span { font: 800 0.69rem/1.4 ui-monospace, monospace; letter-spacing: 0.08em; }
.key-followup h2 { margin: 8px 0 12px; font-size: clamp(1.45rem, 3vw, 2.35rem); line-height: 1.1; letter-spacing: -0.05em; }
.key-followup p { max-width: 55ch; margin: 7px 0 0; font-size: 0.84rem; line-height: 1.5; }
.key-followup-actions { display: grid; align-content: center; gap: 10px; }
.key-followup-actions button { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border: 2px solid #172326; color: #172326; background: #fffaf0; font: 800 0.85rem/1.2 Inter, ui-sans-serif, sans-serif; text-align: left; cursor: pointer; }
.key-followup-actions button:hover { background: #d5e7cd; }
.key-followup-actions button[aria-pressed="true"] { color: #fffaf0; background: #24433e; }
.key-followup .key-followup-status { grid-column: 1 / -1; max-width: none; margin: 0; padding: 10px 12px; border-left: 4px solid #9b5636; background: #fffaf0; font-weight: 700; }
.key-save-note { margin: 0; padding: 12px clamp(18px, 3vw, 30px); border-top: 2px solid #172326; background: #e6e0d2; font-size: 0.78rem; font-weight: 700; line-height: 1.4; }
.playground-worktable { margin: 0 0 30px; padding: clamp(20px, 3vw, 34px); border: 2px solid #172326; background: #24433e; box-shadow: 9px 9px 0 #d9caa8; color: #fffaf0; }
.playground-worktable-heading > p:first-child { color: #e9c676; }
.playground-worktable-heading h2 { margin: 9px 0 5px; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.06em; line-height: 1; }
.playground-worktable-heading > p:last-child { margin: 0; color: #e0e8df; font-size: 0.83rem; line-height: 1.45; }
.key-return-trace { display: flex; gap: 17px; align-items: start; margin-top: 22px; padding: 13px 17px; border: 1px solid #e9c676; color: #172326; background: #e9c676; }
.key-return-trace[hidden] { display: none; }
.key-return-trace span { font-size: 1.5rem; line-height: 1; }
.key-return-trace p { margin: 0; font-size: 0.85rem; font-weight: 700; line-height: 1.45; }
.playground-worktable-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 23px; }
.worktable-piece { display: flex; min-width: 0; min-height: 145px; flex-direction: column; align-items: start; padding: 17px; border: 2px solid #fffaf0; color: #172326; background: #f8edcf; text-align: left; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.worktable-ficus { background: #dce9d9; }
.worktable-piece:hover { transform: translateY(-4px); box-shadow: 4px 4px 0 #b6b6a6; }
.worktable-piece > span { color: #7b482f; }
.worktable-piece strong { margin-top: 10px; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -0.035em; line-height: 1.2; }
.worktable-piece small { margin-top: auto; padding-top: 13px; font-size: 0.72rem; font-weight: 800; }
.key-story :is(button):focus-visible, .playground-worktable button:focus-visible { outline: 3px solid #28748a; outline-offset: 4px; }
@media (max-width: 700px) {
  .key-story, .playground-worktable { box-shadow: 5px 5px 0 #d9caa8; }
  .key-story-heading::after { right: -35px; top: 55px; }
  .key-rooms, .key-followup, .playground-worktable-pieces { grid-template-columns: minmax(0, 1fr); }
  .key-room + .key-room { border-left: 0; border-top: 2px solid #172326; }
  .key-room-scene { min-height: 195px; }
  .key-room-body > p { min-height: 0; }
  .worktable-piece { min-height: 115px; }
}
@media (prefers-reduced-motion: reduce) {
  .key-archive-page, .key-archive-notice, .key-workshop-shelf, .key-workshop-brace, .key-workshop-tag, .worktable-piece { transition: none; }
}