.onboarding{position:relative;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}.onboarding__logo{position:fixed;top:1rem;left:50%;transform:translate(-50%);font-size:1.5rem;font-weight:700;color:#e0e0e0;letter-spacing:.2em;z-index:10;animation:fadeIn .5s ease-out}.onboarding__name{position:fixed;top:1rem;left:1.5rem;font-size:1rem;color:#7dd3fc;z-index:10;animation:fadeIn .4s ease-out}.onboarding__doll{position:fixed;top:50%;right:1.5rem;transform:translateY(-50%);width:120px;height:160px;border-radius:8px;overflow:hidden;background:#252525;border:1px solid #404040;z-index:10;animation:slideInRight .5s ease-out}.onboarding__doll img{width:100%;height:100%;object-fit:cover}.onboarding__doll-placeholder{display:none;width:100%;height:100%;align-items:center;justify-content:center;color:#6b7280;font-size:.75rem}.onboarding__doll-placeholder.visible{display:flex}.onboarding__stage{width:100%;max-width:36rem;min-height:20rem;background:#2d2d2d;border-radius:8px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.onboarding__step{text-align:center;width:100%}.onboarding__title{margin:0 0 1.5rem;font-size:1.75rem;color:#e0e0e0;letter-spacing:.15em}.onboarding__prompt{margin:0 0 1rem;color:#d1d5db;font-size:.9375rem}.onboarding__btn{padding:.5rem 1.5rem;font-size:1rem;background:#404040;color:#e0e0e0;border:1px solid #525252;border-radius:6px;cursor:pointer}.onboarding__btn:hover{background:#525252}.onboarding__input{display:block;width:100%;max-width:20rem;margin:0 auto .75rem;padding:.5rem .75rem;font-size:1rem;background:#252525;color:#e0e0e0;border:1px solid #404040;border-radius:6px}.onboarding__character-option{display:block;width:100px;height:130px;margin:0 auto;padding:0;background:#252525;border:2px solid #404040;border-radius:8px;cursor:pointer;overflow:hidden}.onboarding__character-option:hover{border-color:#7dd3fc}.onboarding__character-option img{width:100%;height:100%;object-fit:cover}.onboarding__character-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#6b7280;font-size:.75rem}.onboarding__narration-options{display:flex;flex-direction:column;gap:.75rem;max-width:24rem;margin:0 auto 1rem}.onboarding__narration-opt{text-align:left;padding:.75rem 1rem;background:#252525;border:1px solid #404040;border-radius:6px;color:#e0e0e0;cursor:pointer}.onboarding__narration-opt:hover{border-color:#525252}.onboarding__narration-opt.selected,.onboarding__narration-opt:focus{border-color:#7dd3fc;outline:none}.onboarding__narration-opt strong{display:block;margin-bottom:.25rem}.onboarding__narration-opt span{font-size:.875rem;color:#9ca3af}.onboarding__error{color:#f87171;font-size:.875rem;margin:.5rem 0 0}.onboarding__loading{color:#9ca3af;font-size:.875rem;margin:.5rem 0 0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{opacity:0;transform:translateY(-50%) translate(1rem)}to{opacity:1;transform:translateY(-50%) translate(0)}}.prompt-window{width:100%;max-width:36rem;min-height:20rem;background:#2d2d2d;border-radius:8px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden}.prompt-window__output{flex:1;padding:1rem 1.25rem;overflow-y:auto;max-height:16rem;font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,monospace;font-size:.9375rem;line-height:1.5;color:#e0e0e0}.prompt-window__line{word-break:break-word}.prompt-window__line--input{color:#7dd3fc;margin-bottom:.25rem}.prompt-window__line--output{color:#d1d5db;margin-bottom:.5rem}.prompt-window__line--error{color:#f87171}.prompt-window__form{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:#252525;border-top:1px solid #404040}.prompt-window__prompt{color:#7dd3fc;font-family:ui-monospace,Menlo,monospace;font-size:.9375rem;-webkit-user-select:none;user-select:none}.prompt-window__input{flex:1;background:transparent;border:none;color:#e0e0e0;font-family:inherit;font-size:.9375rem;outline:none}.prompt-window__input::placeholder{color:#6b7280}.game-view{min-height:100%;display:grid;grid-template-areas:"logo logo doll" "name prompt prompt";grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;gap:.5rem 1rem;align-items:start;justify-items:start;padding:1rem;max-width:56rem;margin:0 auto}.game-view__logo{grid-area:logo;justify-self:center;font-size:1.25rem;font-weight:700;color:#e0e0e0;letter-spacing:.2em}.game-view__name{grid-area:name;font-size:.9375rem;color:#7dd3fc}.game-view__doll{grid-area:doll;width:100px;height:140px;border-radius:8px;overflow:hidden;background:#252525;border:1px solid #404040}.game-view__doll img{width:100%;height:100%;object-fit:cover}.game-view__doll-placeholder{display:none;width:100%;height:100%;align-items:center;justify-content:center;color:#6b7280;font-size:.75rem}.game-view__doll-placeholder.visible{display:flex}.game-view__prompt-wrap{grid-area:prompt;width:100%;min-width:0}.app{min-height:100%;background:#4a4a4a;display:flex;align-items:center;justify-content:center;padding:1rem}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:#4a4a4a;color:#e0e0e0}