:root{--paper:#f3f0e7;--paper-light:#fcfaf4;--forest:#29473b;--ink:#2d3d32;--muted:#7a8070;--gold:#a78649;--line:#dcdccd;--header:62px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%;overflow-x:hidden}body{background:var(--paper);color:var(--ink);font-size:14px;overflow:hidden}button,input,select,a{touch-action:manipulation}button,select,input{font:inherit}button,select{border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--paper-light)}button{min-height:38px;cursor:pointer;transition:background .15s,border-color .15s}button:hover{background:#eaece0;border-color:#b5baa4}button:active{transform:translateY(1px)}button[aria-pressed=true],button.active,button.selected{color:#f9f6e9;background:var(--forest);border-color:var(--forest)}button:disabled{cursor:wait;opacity:.5}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #b78e4c;outline-offset:3px}a{color:var(--forest);text-decoration:none}select{width:100%;height:40px;padding:0 11px;cursor:pointer;max-width:100%;min-width:0}input[type=checkbox]{accent-color:var(--forest);width:15px;height:15px;margin:0;flex:none}input[type=range]{accent-color:var(--gold);width:100%;height:16px;margin:3px 0 0;cursor:pointer}
.site-header{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 30px;border-bottom:1px solid var(--line);background:#f8f6ef;position:relative;z-index:2}.back-link{font-size:12px;white-space:nowrap;display:flex;gap:9px;align-items:center}.back-link span{font-size:18px}.brand{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--forest)}.brand i{font-style:normal;font-weight:400;letter-spacing:2px;margin-left:8px;color:var(--muted);font-size:9px}.collection-count{display:flex;gap:17px;white-space:nowrap;color:var(--muted);font-size:10px}.collection-count b{color:var(--forest);font-size:15px;margin-right:3px;font-weight:600}
main{display:grid;grid-template-columns:minmax(0,1fr) 350px;height:calc(100dvh - var(--header));max-width:1920px;margin:auto;min-width:0}.stage-panel{min-width:0;position:relative;overflow:hidden;border-right:1px solid var(--line);background:radial-gradient(ellipse at 50% 44%,#fdfaf1 0,#e7eadd 55%,#d9e1d2 100%)}.stage-title{position:absolute;top:28px;left:34px;right:20px;z-index:1;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--gold);margin:0;font-weight:600}.stage-title h1{font-size:clamp(22px,2.5vw,34px);font-weight:600;line-height:1.45;margin:7px 0 2px;color:var(--forest)}.stage-title>span{font-size:12px;color:#6f7b68}.stage-mark{position:absolute;top:27px;right:30px;color:#a3ae972c;font-size:70px;font-weight:600;letter-spacing:-3px;writing-mode:vertical-rl;pointer-events:none}#stage{position:absolute;inset:38px 0 133px;min-width:0;min-height:0}#stage canvas{display:block;width:100%;height:100%;touch-action:none}
.camera-toolbar{position:absolute;left:24px;right:24px;bottom:146px;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}#facing{color:#425a47;background:#f6f5eccf;border:1px solid #c5ceba99;border-radius:30px;font-size:11px;padding:7px 13px;backdrop-filter:blur(8px);max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-actions{display:flex;gap:4px;pointer-events:auto;flex:none}.camera-actions button{background:#f9f7f0dd;border-color:#cdd3c1;min-width:34px;min-height:33px;padding:4px 9px;font-size:12px;backdrop-filter:blur(8px)}.camera-actions button:first-child,.camera-actions button:last-child{font-size:19px;line-height:1}.stage-bottom{position:absolute;bottom:19px;left:24px;right:24px;padding:12px 15px 9px;background:#fbfaf4e8;border:1px solid #d8dece;border-radius:13px;box-shadow:0 5px 22px #354b3a07;backdrop-filter:blur(12px)}.playback-row{display:flex;align-items:center;gap:13px;min-width:0}.primary-button{background:var(--forest);border-color:var(--forest);color:#fcf8e8;padding:5px 13px;min-height:34px;white-space:nowrap;font-size:12px}.primary-button:hover{background:#3b5b49;border-color:#3b5b49}.primary-button span{margin-right:4px;font-size:16px}#phase{font-size:11px;color:#747f6c;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.speed-control{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;white-space:nowrap}#speed{width:63px;height:31px;padding:0 6px;font-size:11px}.scrub-label{display:flex;justify-content:space-between;color:#858b78;font-size:9px;margin-top:8px}.stage-caption{display:flex;justify-content:space-between;gap:10px;margin-top:1px;color:#88907e;font-size:10px}.stage-caption small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.control-panel{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c6cbb9 transparent;background:#f7f5ee;padding:23px 23px 16px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.edition{font-size:9px;color:#8c8d77;border:1px solid #dbddce;border-radius:20px;padding:3px 8px;white-space:nowrap}.field-label{display:block;font-size:11px;color:#737b69;margin-bottom:5px}.genders{display:flex;gap:7px;margin-top:8px}.genders button{flex:1;font-size:12px;min-height:34px}.control-section{padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.section-heading h2{font-size:12px;font-weight:600;margin:0;line-height:1.5}.section-heading>span{font-size:10px;color:#9b9e88}.directions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.directions button{padding:3px 2px 2px;min-height:0;border-color:#dce0d2;background:#edf0e5;overflow:hidden;border-radius:8px}.directions button[aria-pressed=true]{background:#d5decb;border-color:#75906b;box-shadow:inset 0 0 0 1px #7b9470;color:var(--forest)}.directions canvas,.directions img{display:block;width:100%;height:auto;max-height:57px;object-fit:contain;image-rendering:pixelated;margin:0 auto}.directions span{display:block;text-align:center;font-size:9px;color:#6e7a64;line-height:1.5;margin-top:1px}.compact-check{display:flex;align-items:center;gap:5px;font-size:10px;color:#7a826e;cursor:pointer}.compact-check input{width:13px;height:13px}#motion-mode{height:37px;font-size:12px}.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:8px}.skills:empty{display:none}.skills button{font-size:10px;line-height:1.45;padding:6px 8px;text-align:left;min-height:35px;overflow:hidden;overflow-wrap:anywhere}.skills button img{width:23px;height:23px;object-fit:contain;vertical-align:middle;margin-right:5px}.skills button span{max-width:100%}.skills button[aria-pressed=true]{background:#e9e4d3;color:#66532d;border-color:#ad965d}.skill-card{background:#eeeee3;border:1px solid #e0e2d3;border-radius:9px;padding:10px 11px;margin-top:9px;min-width:0}.skill-card h3{font-size:12px;color:#526042;margin:0 0 3px;font-weight:600}.skill-card p{font-size:11px;line-height:1.75;color:#7a816e;margin:0;overflow-wrap:anywhere}#environment{height:37px;font-size:12px}.options{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:11px}.options label{display:flex;align-items:center;gap:6px;font-size:10px;color:#77806c;min-height:25px;cursor:pointer}.note{display:flex;align-items:flex-start;gap:9px;color:#a28c55;padding-top:18px;margin-top:16px;border-top:1px solid var(--line)}.note>span{font-size:15px;line-height:1.5}.note p{font-size:10px;line-height:1.7;color:#77836e;margin:0}.note small{font-size:9px;color:#969d89}#status{font-size:10px;line-height:1.7;color:#849077;min-height:17px;margin:10px 0 0;overflow-wrap:anywhere}body.error #status{color:#a54b3b}.stage-panel:has([aria-busy=true]) .stage-title{opacity:.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1400px){main{grid-template-columns:minmax(0,1fr) 380px}.control-panel{padding:26px 28px}.directions canvas,.directions img{max-height:66px}.stage-title{left:46px;top:36px}.stage-bottom{left:40px;right:40px;bottom:25px}}
@media(max-width:1000px){.site-header{padding:0 20px}.brand{font-size:11px;letter-spacing:2px}.brand i{display:none}.collection-count{gap:11px}main{grid-template-columns:minmax(0,1fr) 320px}.control-panel{padding:18px}.stage-title{left:24px}.stage-mark{right:14px;font-size:55px}.stage-bottom{left:16px;right:16px}.camera-toolbar{left:16px;right:16px}}
@media(orientation:landscape) and (max-height:600px){:root{--header:44px}.site-header{padding:0 17px}.back-link{font-size:10px}.collection-count{font-size:9px;gap:11px}.collection-count b{font-size:12px}main{grid-template-columns:minmax(0,1fr) minmax(280px,36%)}.control-panel{padding:13px 16px}.stage-title{left:20px;top:13px}.stage-title h1{font-size:22px;margin-top:2px}.stage-title>span{font-size:10px}.stage-title .eyebrow{font-size:9px}.stage-mark{font-size:42px;top:14px}#stage{inset:8px 0 103px}.stage-bottom{left:14px;right:14px;bottom:9px;padding:8px 11px 6px;border-radius:10px}.camera-toolbar{bottom:111px;gap:7px}#facing{font-size:10px;padding:5px 10px}.camera-actions button{min-height:28px;min-width:29px;padding:3px 7px;font-size:10px}.camera-actions button:first-child,.camera-actions button:last-child{font-size:17px}.playback-row{gap:8px}.primary-button{min-height:29px;font-size:10px;padding:4px 9px}.primary-button span{font-size:14px}.speed-control{font-size:9px;gap:5px}#speed{height:27px;width:58px;font-size:10px}#phase{font-size:10px}.scrub-label{margin-top:5px;font-size:8px}input[type=range]{height:13px}.stage-caption small{font-size:8px}.stage-caption{margin-top:0;gap:5px}.panel-heading{margin-bottom:8px}.field-label{font-size:10px}#profession{height:34px;font-size:12px}.genders{margin-top:6px}.genders button{min-height:30px;font-size:11px}.control-section{margin-top:12px;padding-top:12px}.directions canvas,.directions img{max-height:43px}.directions span{font-size:8px}.section-heading{margin-bottom:7px}.section-heading h2{font-size:11px}.skills button{font-size:9px;min-height:32px}.skill-card{padding:8px 10px}.skill-card p{font-size:10px}.skill-card h3{font-size:11px}.note{padding-top:12px;margin-top:12px}}
@media(max-width:700px) and (orientation:portrait){body{overflow:auto}.site-header{height:58px;padding:0 16px;gap:8px}.brand{display:none}.collection-count{font-size:9px;gap:12px}.collection-count b{font-size:13px}.back-link{font-size:11px}main{display:block;height:auto}.stage-panel{height:65dvh;min-height:460px;border-right:0;border-bottom:1px solid var(--line)}.stage-title{top:22px;left:23px}.stage-title h1{font-size:27px}.stage-title>span{font-size:11px}.stage-mark{font-size:53px;right:18px}#stage{inset:40px 0 132px}.stage-bottom{bottom:14px;left:16px;right:16px;padding:11px 13px 8px}.camera-toolbar{bottom:141px;gap:7px}#facing{font-size:10px;padding:6px 9px}.camera-actions button{font-size:10px;padding:3px 7px;min-width:30px;min-height:30px}.primary-button{font-size:11px;padding:4px 9px}.playback-row{gap:8px}.speed-control{font-size:9px;gap:4px}#phase{font-size:10px}.stage-caption small{font-size:8px}.stage-caption{gap:5px}.control-panel{overflow:visible;padding:23px 23px 25px}.directions canvas,.directions img{max-height:75px}.skills button{font-size:11px;min-height:39px}.options label{font-size:11px}.note p{font-size:11px}.note small{font-size:10px}}
@media(orientation:landscape) and (max-height:360px){:root{--header:36px}.stage-title h1{font-size:19px}.stage-title>span{display:none}.stage-title .eyebrow{font-size:8px}.stage-bottom{bottom:7px}.camera-toolbar{bottom:107px}.stage-caption{display:none}.collection-count span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){button{transition:none}button:active{transform:none}}
.skills button{display:flex;align-items:center;gap:7px}.skills button strong{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:6px;background:#e4e7d7;color:#7c8b68;font-size:11px}.skills button strong.skill-art{background-repeat:no-repeat;background-color:#eee9d9;color:transparent;text-shadow:none;overflow:hidden}.skills button span{display:block;min-width:0}.skills button[aria-pressed=true] strong{box-shadow:0 0 0 1px #b39861}@media(orientation:landscape) and (max-height:600px){.skills button{gap:5px;padding:5px 6px}.skills button strong{flex-basis:24px;width:24px;height:24px}}
/* Keep the stage fixed to the viewport; only the control column scrolls. */
html{height:100%;overflow:hidden}body{height:100dvh;min-height:0}main{min-height:0}.stage-title h1{color:#f3e6c7;text-shadow:0 2px 12px #142b24b3}.stage-title>span{color:#d6dec7;text-shadow:0 1px 6px #20392dcc}.stage-title .eyebrow{color:#d3bb84;text-shadow:0 1px 6px #20392d99}.stage-mark{color:#dce5bf1a}
@media(max-width:700px) and (orientation:portrait){html{height:auto;overflow-y:auto}body{height:auto;min-height:100dvh}}
body{position:fixed;inset:0;overflow:clip}#stage{top:0}
@media(max-width:700px) and (orientation:portrait){body{position:static;overflow:auto}}