@import url("./generation-progress.css");
.ob{height:100%;display:grid;grid-template-rows:minmax(155px,1fr) auto;background:#30243b;overflow:hidden}.ob-scene{position:relative;min-height:0;overflow:hidden}.ob-scene canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-5px!important}.ob-dialogue{position:relative;z-index:2;display:grid;grid-template-columns:124px minmax(0,1fr);gap:24px;width:min(1010px,calc(100% - 48px));max-height:min(66%,540px);margin:-8px auto 24px;padding:24px;background:#f8f0dc;color:#30263d;border:3px solid #312338;outline:2px solid #b9a0d2;outline-offset:-7px;border-radius:6px;box-shadow:0 5px 0 #18121f,0 0 0 2px #6e557f,0 12px 30px #18122055}.ob .ob-dialogue{max-height:min(58svh,510px)}.ob-speaker{align-self:start;display:grid;gap:8px}.ob-portrait{background:#c7b5d9;border:2px solid #655077;box-shadow:inset 0 0 0 3px #e1d1e8;aspect-ratio:1;overflow:hidden;image-rendering:pixelated;width:100%;height:auto}.ob-speaker b{font-size:11px;letter-spacing:.5px;text-align:center;padding:9px 3px;background:#e8d9e6;border:1px solid #8e7099;border-radius:2px}.ob-main{min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 5px;scrollbar-color:#9983a3 transparent}.ob h1{font-size:21px;line-height:1.35;margin:0 0 10px;letter-spacing:-.6px;text-wrap:pretty}.ob-speech{font-size:14px;line-height:1.55;margin:0 0 14px;text-wrap:pretty}.ob-speech:empty{display:none}.ob-fields{font-size:13px;line-height:1.5;display:grid;gap:12px}.ob-fields:empty{display:none}.ob label{display:grid;gap:5px;font-size:12px}.ob input:not([type=range]),.ob textarea{width:100%;min-width:0;border:1px solid #a394a6;border-radius:3px;background:#fffaf0;color:#30263d;font-size:16px;padding:10px 12px;line-height:1.4}.ob textarea{min-height:88px;resize:vertical}.ob input[type=range]{width:100%;accent-color:#386e63;min-height:27px;margin:4px 0}.ob-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ob-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ob-choice{border:1px solid #b7a7bc;background:#fffaf0;color:#30263d;min-height:42px;padding:10px 12px;text-align:left;border-radius:3px;font-size:12px;line-height:1.4}.ob-choice[aria-pressed=true]{border-color:#2e7d6d;background:#d6ede2;box-shadow:inset 3px 0 #367e6d}.ob-choice[aria-pressed=true]:before{content:'✓ ';color:#276756}.ob small{color:#766479;font-size:11px;line-height:1.5}.ob-note{margin:0;font-size:11px;line-height:1.55;color:#766479}.ob-group-link{display:block;padding:12px;background:#d5eee1;border:1px solid #4c8b76;color:#285b4c;border-radius:3px;text-align:center;font-size:13px;font-weight:700}.ob-warning{padding:10px;background:#ffedb9;border:1px solid #b39451;color:#5b471e;font-size:12px;line-height:1.5;margin:0}.ob-level-label{display:flex;justify-content:space-between;gap:10px;font-size:12px}.ob-level-label output{font-size:11px;color:#736077}.ob-palette{display:grid;grid-template-columns:repeat(12,1fr);gap:7px}.ob-color{aspect-ratio:1;min-height:30px;border:1px solid #44334d66;border-radius:2px;box-shadow:inset 0 0 0 2px #ffffff30;position:relative}.ob-color[aria-pressed=true]{outline:2px solid #392546;outline-offset:2px}.ob-color[aria-pressed=true]:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:white;text-shadow:0 1px 3px #000,0 0 2px #000}.ob-genders{grid-template-columns:repeat(3,1fr)}.ob-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.ob-method{display:grid;justify-items:center;align-content:start;gap:7px;background:#fffaf0;color:#3e2a49;border:1px solid #b7a1c1;border-radius:3px;padding:10px 5px;font-size:11px;line-height:1.45;text-align:center}.ob-method svg{width:38px;height:38px;background:#e4d7ec;padding:7px;border:1px solid #bba5cb;border-radius:3px}.ob-method[aria-pressed=true]{background:#d8eee5;border:2px solid #367d6d;padding:9px 4px}.ob-method[aria-pressed=true] svg{background:#a8d5c6}.ob-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid #cbbbca}.ob-actions .ob-next{margin-left:auto;min-height:42px;background:#ffe078;color:#382d25;border:1px solid #715443;border-radius:3px;box-shadow:0 3px #715443;padding:11px 20px;font-size:12px;font-weight:700}.ob-back{background:none;border:0;text-decoration:underline;text-underline-offset:3px;font-size:11px;color:#79647c;padding:10px 0}.ob-error{font-size:12px;color:#a23939;line-height:1.45;margin:9px 0 0}.ob-error:empty{display:none}.ob-progress{display:flex;gap:4px;margin-bottom:14px}.ob-progress i{height:3px;width:15px;background:#c4b1c7}.ob-progress i.done{background:#418e7b}.ob-library{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:225px;overflow:auto;padding:3px}.ob-avatar{display:grid;justify-items:center;gap:5px;background:#ddd1e6;color:#392b46;border:1px solid #a895b7;padding:5px;border-radius:3px;font-size:10px;min-width:0}.ob-avatar canvas{width:64px;height:80px;image-rendering:pixelated;max-width:100%;object-fit:contain}.ob-avatar[aria-pressed=true]{background:#c4e8d8;border:2px solid #3b826b;padding:4px}.ob-photo{height:72px;width:72px;object-fit:cover;border:1px solid #9b8aac;border-radius:3px}.ob-generating{display:grid;gap:12px}.ob-generating progress{accent-color:#4d9b81;width:100%}.ob-generated{grid-template-columns:repeat(3,1fr);max-height:none}.ob-test{grid-template-rows:minmax(160px,1fr) auto}.ob-test .ob-dialogue{grid-template-columns:56px minmax(0,1fr);width:min(660px,calc(100% - 32px));padding:15px 19px;gap:15px}.ob-test .ob-speaker b,.ob-test .ob-progress{display:none}.ob-test h1{font-size:16px;margin-bottom:5px}.ob-test .ob-speech{margin:0;font-size:12px}.ob-review{font:inherit;border:0;padding:0;background:none;color:#76509f;text-decoration:underline;cursor:pointer}.ob-test .ob-actions{display:none}
@media(max-width:699px){.ob{grid-template-rows:minmax(145px,1fr) auto}.ob-dialogue{width:calc(100% - 20px);margin:0 auto 12px;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:17px 13px}.ob .ob-dialogue{max-height:58svh}.ob h1{font-size:17px;letter-spacing:-.5px;margin-bottom:8px}.ob-speech{font-size:12px;line-height:1.55;margin-bottom:12px}.ob-speaker b{font-size:8px;letter-spacing:0;padding:7px 2px}.ob-portrait{border-width:1px}.ob-progress{margin-bottom:10px;gap:3px}.ob-progress i{width:10px}.ob-choice-grid{grid-template-columns:1fr}.ob-choice{padding:9px 10px;font-size:11px;min-height:40px}.ob-columns{grid-template-columns:1fr;gap:10px}.ob label{font-size:11px}.ob-fields{gap:10px}.ob-palette{grid-template-columns:repeat(6,1fr);gap:6px}.ob-color{min-height:26px}.ob-genders{grid-template-columns:1fr}.ob-level-label{flex-wrap:wrap;gap:3px}.ob-level-label output{font-size:10px}.ob-methods{gap:5px}.ob-method{font-size:10px;padding:7px 3px}.ob-method[aria-pressed=true]{padding:6px 2px}.ob-method svg{width:32px;height:32px;padding:5px}.ob-library{grid-template-columns:repeat(3,1fr);gap:6px;max-height:210px}.ob-avatar canvas{width:46px;height:58px}.ob-avatar{font-size:9px}.ob-actions{gap:6px}.ob-actions .ob-next{font-size:10px;padding:10px 12px}.ob small,.ob-note{font-size:10px}.ob-test .ob-dialogue{grid-template-columns:50px 1fr;gap:12px;padding:15px}.ob-test .ob-speech{font-size:11px}}
@media(max-height:680px){.ob .ob-dialogue{max-height:53svh}.ob-dialogue{padding:17px;grid-template-columns:86px minmax(0,1fr);gap:15px;margin-bottom:14px}.ob h1{font-size:17px}.ob-speech{font-size:12px}.ob-progress{margin-bottom:7px}}
@media(max-width:699px){.ob-palette{grid-template-columns:repeat(6,minmax(24px,36px));max-width:246px}}
.ob .ob-dialogue{max-height:min(58svh,calc(100svh - 355px),510px)}
@media(max-width:699px){.ob .ob-dialogue{max-height:min(58svh,calc(100svh - 325px))}}
.ob-actions{position:sticky;bottom:-5px;z-index:2;background:#f8f0dc;box-shadow:0 -5px 0 5px #f8f0dc}