@font-face{font-family:Afterword;src:url("../fonts/SourceHanSansLite.ttf") format("truetype");font-display:swap}*{box-sizing:border-box}body{margin:0;color:#eae1d2;background:#201b28;font:16px/1.65 Afterword,system-ui,sans-serif}header,main{max-width:1240px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;border-bottom:1px solid #3e4351;font-size:12px;letter-spacing:.14em}a{color:#d5b58b}h1{font:clamp(46px,7vw,88px)/1.02 Georgia,serif;letter-spacing:-.05em;margin:20px 0}h2{font:36px Georgia,serif}.intro{padding:48px 0 24px}.eyebrow{color:#cfa6a0;letter-spacing:.18em;font-size:12px}button,select,textarea{font:inherit;color:inherit;background:#44384a;border:1px solid #82735e;border-radius:3px;padding:10px 18px}button{cursor:pointer}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f7d79e;outline-offset:3px}button:disabled{cursor:default;color:#9297a4}nav{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}nav button{font-size:13px;padding:8px 16px}nav button[aria-pressed=true]{color:#302936;background:#cfa6a0}.stage{position:relative;min-height:540px;aspect-ratio:16/9;background:radial-gradient(ellipse at 70% 10%,#b79caa,#665469 55%,#3b3041);padding:42px;display:flex;flex-direction:column;justify-content:center;overflow:auto;border:1px solid #4a4e5c}.stage:before{content:'AFTERWORD / UI STUDY';position:absolute;top:16px;left:24px;font-size:10px;letter-spacing:.2em;color:#b6a891}.stage.portrait{aspect-ratio:9/16;max-width:480px;margin:auto;padding:24px;min-height:760px}.stage.standard{aspect-ratio:4/3}.scene-title{font:clamp(34px,5vw,70px)/1.1 Georgia,serif;margin:0 0 12px;color:#f4e9de}.subtle{color:#aeb4c3;font-size:13px}.menu-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:36px}.menu-buttons{display:grid;gap:10px;max-width:320px}.skin{border:24px solid transparent;border-image-slice:24 28 24 28 fill;border-image-width:24px 28px;border-image-repeat:stretch;background:transparent;border-radius:0;position:relative}.skin.button{padding:0 12px;min-height:60px;text-align:left;font-size:16px}.skin.quick{min-height:40px;font-size:12px;padding:0 8px;border-width:12px}.dialogue{margin-top:auto;padding:0 12px;min-height:170px}.dialogue p{margin:8px 0;line-height:1.8;overflow-wrap:anywhere}.nameplate{display:inline-block;min-width:200px;padding:0 12px;margin:0 0 -8px 20px;color:#dfba8d;z-index:1}.quick-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-top:14px}.choices{display:grid;gap:12px;max-width:580px;width:100%;margin:30px auto}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.slot{min-height:148px!important}.window{padding:12px;max-height:410px;overflow:auto}.history-row{padding:0 12px;margin:8px 0}.controls{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:24px 0}.controls label{display:block}.controls textarea{width:100%;margin-top:8px}.controls button,.controls select{margin:8px}.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.asset{padding:14px;background:#242c3c;overflow:hidden}.asset img{width:100%;height:110px;object-fit:contain;background:repeating-conic-gradient(#3d4659 0 25%,#31394b 0 50%) 0/16px 16px}.asset code{display:block;font-size:11px;overflow-wrap:anywhere}footer{padding:50px 0;font-size:13px}input[type=range]{width:100%;accent-color:#cfa6a0}.portrait .menu-layout{grid-template-columns:1fr}.portrait .grid{grid-template-columns:1fr 1fr}.portrait .scene-title{font-size:38px}@media(max-width:650px){header,main{padding:16px}.intro{padding-top:20px}.stage{padding:38px 14px 18px;aspect-ratio:auto;min-height:650px}.menu-layout,.controls{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.scene-title{font-size:40px}.skin.button{font-size:14px}.dialogue{padding:0;min-height:210px}.quick-row{justify-content:flex-start}.skin.quick{font-size:11px}.assets{grid-template-columns:1fr 1fr}}

.nameplate{align-self:flex-start;flex:none;max-width:100%;margin-bottom:-8px}.skin.quick{min-height:44px;padding:0 4px}.skin.dialogue{padding:0 4px}.stage>.dialogue{margin-top:0}.stage>.nameplate{margin-top:auto}.skin.button{line-height:1.3}.stage .nameplate{min-width:220px}