.terrace-story{position:relative;height:620svh;min-height:3400px;background:#18221c;color:#f2eee3;isolation:isolate;margin:0 0 60px}
.terrace-story [hidden]{display:none!important}
.terrace-stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:#18221c;isolation:isolate}
.terrace-backdrop{position:absolute;inset:-30px;background-position:center;background-size:cover;filter:blur(28px) brightness(.48);transform:scale(1.1);opacity:.6;z-index:-1;pointer-events:none}
.terrace-visual{position:absolute;inset:0}
.terrace-visual .terrace-canvas,.terrace-visual .terrace-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;max-width:none;filter:none;transform:none}
.terrace-wash{position:absolute;inset:0;background:linear-gradient(90deg,#101c17c4,#101c1729 70%),linear-gradient(0deg,#101c17ed,transparent 40%,#101c172e);pointer-events:none}
.terrace-caption{position:absolute;top:11%;left:clamp(24px,5.5vw,96px);right:30px;max-width:570px;pointer-events:none;text-shadow:0 2px 25px #0b160e70}
.terrace-story .terrace-label{margin:0 0 18px;font-size:10px;letter-spacing:.2em;line-height:1.6;font-weight:600;color:#e4d3ac}
.terrace-story .terrace-title{margin:0 0 24px;font-size:clamp(40px,5.8vw,82px);font-weight:500;line-height:1.01;letter-spacing:-.05em;color:#fff8e8;text-wrap:balance}
.terrace-story .terrace-detail{max-width:355px;margin:0;color:#f0eee3;font-size:14px;line-height:1.75}
.terrace-screen{position:absolute;left:clamp(24px,5.5vw,96px);bottom:156px;max-width:calc(100% - 48px);border:1px solid #eadfbd;background:#e9dfc8;color:#1d3022;border-radius:30px;padding:14px 23px;font:inherit;font-size:12px;font-weight:600;line-height:1.5;box-shadow:0 6px 30px #15251a45;cursor:pointer}
.terrace-screen:hover{background:#faf0d9}
.terrace-instruction{position:absolute;bottom:105px;left:clamp(24px,5.5vw,96px);right:24px;max-width:590px;margin:0;color:#dedfd2;font-size:11px;line-height:1.6}
.terrace-controls{position:absolute;bottom:28px;left:clamp(24px,5.5vw,96px);right:clamp(24px,5.5vw,96px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.terrace-controls nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.terrace-controls button{padding:10px 14px;border-radius:30px;border:1px solid #ffffff66;background:#193025b8;color:#f2efdf;font:inherit;font-size:11px;font-weight:500;line-height:1.3;cursor:pointer}
.terrace-controls button[aria-current=step]{background:#e5d7b6;border-color:#e5d7b6;color:#1c2b20}
.terrace-controls button:disabled{opacity:.45;cursor:wait}
.terrace-controls a{flex:none;font-size:11px;line-height:1.5;color:#f2efdf;text-decoration:none;border-bottom:1px solid #ccb88d;padding-bottom:5px}
.terrace-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#dbc494;transform:scaleX(0);transform-origin:left;pointer-events:none}
.terrace-feedback{position:absolute;top:20px;right:25px;max-width:min(360px,calc(100% - 48px));display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.terrace-status{font-size:10px;line-height:1.5;color:#f2efdf;background:#17251dcc;padding:4px 10px;border-radius:15px}
.terrace-status:empty{display:none}
.terrace-retry{padding:5px 9px;border:1px solid #c5d0bda8;border-radius:15px;background:#20372be8;color:#f2efdf;font-size:10px;cursor:pointer}
.terrace-note{position:absolute;top:auto;bottom:140px;right:clamp(24px,5.5vw,96px);font-size:9px;letter-spacing:.07em;color:#d7dfd0;pointer-events:none}
.terrace-story button:focus-visible,.terrace-story a:focus-visible{outline:3px solid #f5e1af;outline-offset:5px}
.terrace-story .terrace-screen:disabled{opacity:.6;cursor:wait}
@media(max-width:1000px){.terrace-controls{display:block}.terrace-controls a{display:inline-block;margin-top:16px}.terrace-instruction{bottom:145px}.terrace-screen{bottom:192px}.terrace-note{bottom:188px}}
@media(max-width:700px){.terrace-story{height:610svh;min-height:3400px;margin-bottom:40px}.terrace-stage{display:flex;flex-direction:column;height:100svh;min-height:0;padding:12px 0 20px}.terrace-visual{position:relative;inset:auto;flex:none;width:100%;height:min(56.25vw,34svh);aspect-ratio:auto}.terrace-visual .terrace-canvas,.terrace-visual .terrace-poster{object-fit:contain}.terrace-wash{display:none}.terrace-caption{position:relative;inset:auto;flex:1;min-height:0;max-width:none;margin:15px 22px 9px;text-shadow:none}.terrace-story .terrace-label{font-size:8px;margin-bottom:8px}.terrace-story .terrace-title{font-size:clamp(29px,7.5vw,40px);max-width:420px;margin-bottom:9px;line-height:1.03}.terrace-story .terrace-detail{font-size:11px;line-height:1.55;max-width:440px}.terrace-screen{position:relative;inset:auto;align-self:flex-start;flex:none;margin:0 22px 10px;padding:9px 15px;font-size:11px}.terrace-instruction{position:relative;inset:auto;flex:none;max-width:440px;margin:0 22px 12px;font-size:10px;line-height:1.5}.terrace-controls{position:relative;inset:auto;flex:none;margin:0 22px}.terrace-controls nav{gap:6px;max-width:600px}.terrace-controls button{padding:8px 10px;font-size:9px}.terrace-controls a{font-size:10px;margin-top:10px}.terrace-feedback{top:14px;right:18px;max-width:calc(100% - 36px)}.terrace-status{font-size:9px}.terrace-note{display:none}}
@media(max-width:700px) and (max-height:730px){.terrace-visual{height:min(56.25vw,29svh)}.terrace-caption{margin-top:10px;margin-bottom:6px}.terrace-story .terrace-title{font-size:29px;max-width:350px;margin-bottom:7px}.terrace-story .terrace-detail{font-size:10px;line-height:1.5}.terrace-instruction{font-size:9px;margin-bottom:10px}.terrace-stage{padding-bottom:16px}}
@media(max-height:580px) and (min-width:701px){.terrace-stage{min-height:0}.terrace-caption{top:9%;max-width:440px}.terrace-story .terrace-title{font-size:40px;margin-bottom:12px}.terrace-story .terrace-detail{font-size:12px;max-width:360px}.terrace-story .terrace-label{margin-bottom:10px}.terrace-controls{display:flex;bottom:22px}.terrace-controls a{margin-top:0}.terrace-instruction{bottom:85px;font-size:10px}.terrace-screen{bottom:127px;padding:10px 18px}.terrace-note{bottom:130px}}
@media(prefers-reduced-motion:reduce){.terrace-backdrop{transform:none}.terrace-progress{transition:none}.terrace-story{scroll-behavior:auto}}

@media(max-width:700px) and (max-height:600px){.terrace-stage{overflow-y:auto;overflow-x:hidden}.terrace-caption{flex:none}}
