:root{color-scheme:light;--body:#d7d3c6;--ink:#222229;--plum:#8e2e5d;--key:#323237;--bezel:#4a4951;--pad:clamp(16px,5vw,42px)}
*{box-sizing:border-box}
body{margin:0;background:var(--body);color:var(--ink);font:15px/1.4 system-ui,sans-serif}
button,select,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
:focus-visible{outline:3px solid #b74a83;outline-offset:4px}
.shell{min-height:100svh;display:grid;place-items:center;background:linear-gradient(115deg,#e7e3d9,var(--body) 68%,#c7c3b6);box-shadow:inset 0 1px 1px #fff,inset 0 -5px 12px #3e382c36}
.camera{width:min(100%,540px);min-height:100svh;display:grid;grid-template-rows:minmax(0,auto) 1fr auto;align-content:center;padding: max(var(--pad),env(safe-area-inset-top)) var(--pad) max(var(--pad),env(safe-area-inset-bottom));gap:clamp(22px,5vh,48px)}
.bezel{position:relative;display:grid;justify-items:center;align-items:center;background:var(--bezel);border-radius:15px 15px 40px 15px;padding:clamp(16px,4vw,30px);border:2px solid #393840;box-shadow:inset 0 2px 2px #ffffff35,0 4px 0 #77746c,0 7px 12px #44392c3b}
.bezel::before{content:"";position:absolute;top:9px;left:14px;right:14px;height:4px;background:linear-gradient(#a44c77 0 1px,transparent 1px 3px,#62648f 3px);border-radius:2px}
.screen-head{position:absolute;left:8px;top:30%;line-height:1}
.screen-head b{display:block;width:6px;height:6px;border-radius:50%;background:#262326;box-shadow:0 0 0 1px #74707a}
.screen-head b.live{background:#ff8987;box-shadow:0 0 8px #ff7e7b}
canvas{display:block;width:100%;max-width:min(400px,56svh);height:auto;aspect-ratio:8/7;background:#9bbc0f;image-rendering:pixelated;border:3px solid #24242a;box-shadow:0 0 0 1px #696771}
.status{position:absolute;left:14px;right:14px;bottom:10px;margin:0;padding:7px 9px;border-radius:6px;background:#24242af5;color:white;font-size:12px;text-align:center}
.status:empty{display:none}
.controls{align-self:center;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 clamp(0px,2vw,12px)}
.dpad{--unit:clamp(38px,10vw,49px);display:grid;grid-template:repeat(3,var(--unit))/repeat(3,var(--unit));filter:drop-shadow(0 3px 1px #0007)}
.key{padding:0;display:grid;place-items:center;color:#efede8;background:var(--key);border:0}
.key svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.key .knob{stroke-width:3}
.dpad button:disabled svg{opacity:.32}
.dpad #start{grid-area:1/2;border-radius:8px 8px 0 0}
.dpad #import{grid-area:2/1;border-radius:8px 0 0 8px}
.dpad #save{grid-area:2/3;border-radius:0 8px 8px 0}
.dpad #flip{grid-area:3/2;border-radius:0 0 8px 8px}
.dpad-center{grid-area:2/2;background:var(--key);display:grid;place-items:center}
.dpad-center::after{content:"";width:56%;aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,#26262c,#424148)}
.key.active{color:#ffacc6}
.round-keys{display:flex;gap:clamp(8px,3vw,18px);align-items:center;transform:rotate(-18deg);padding:9px;border-radius:99px;background:#c3bfb2;box-shadow:inset 0 1px 3px #3a302e45}
.round-keys button{transform:rotate(18deg);border-radius:50%;aspect-ratio:1;box-shadow:0 3px 0 #3e2030, inset 0 1px 2px #ffffff60}
.round-keys #settings{width:clamp(39px,10vw,51px);background:#65354f}
#shot{width:clamp(53px,14vw,69px);padding:8px;background:var(--plum);border:0;color:#f6b5ce}
#shot span{display:block;width:100%;height:100%;border:2px solid currentColor;border-radius:50%;background:#ffffff14}
#shot:disabled{color:#c67c9b}
button:not(:disabled):active{filter:brightness(.8)}
.speaker{justify-self:end;display:flex;gap:7px;transform:rotate(-19deg);padding:5px 10px 8px}
.speaker i{width:5px;height:34px;background:#87837b;border-radius:8px;box-shadow:inset 1px 2px 2px #252328aa,1px 1px #fff6}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.panel{width:min(410px,calc(100vw - 28px));max-height:calc(100dvh - 24px);overflow:auto;padding:15px;border:1px solid #8b8b7f;border-radius:14px;background:#f5f3eb;color:var(--ink)}
.panel::backdrop{background:#18161f9c}
.panel-head,.panel-head>div{display:flex;align-items:center;gap:7px}
.panel-head{justify-content:space-between;margin-bottom:10px}
.panel h2{font-size:17px;margin:0}
.panel button,.panel select{color:inherit;background:#fffdf6;border:1px solid #969687;border-radius:6px;min-height:40px}
.panel button{padding:5px 9px;font-size:13px}
#close-settings{min-width:40px;font-size:20px}
.panel label{font-weight:700;font-size:12px}
.panel select{display:block;width:100%;margin-top:4px;padding:5px;font-size:13px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:7px 0 10px}
.swatches input{width:100%;height:30px;padding:0;border:0;background:transparent;cursor:pointer}
.swatches input::-webkit-color-swatch-wrapper{padding:0}
.swatches input::-webkit-color-swatch{border:1px solid #747568;border-radius:4px}
.selects{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:9px}
.slider{margin:5px 0}
.slider div{display:flex;justify-content:space-between}
.slider output{font:700 12px ui-monospace,monospace;color:#71294e}
input[type=range]{width:100%;margin:2px 0 0;accent-color:#71294e;height:19px}
.toggles{display:flex;gap:15px;margin-top:8px}
.toggles label{display:flex;align-items:center;gap:4px}
.toggles input{accent-color:#71294e}
@media (orientation:landscape) and (max-height:620px){.camera{width:min(100%,920px);grid-template-columns:1fr auto;grid-template-rows:1fr auto;align-items:center;column-gap:26px;row-gap:0;padding:16px 26px}.bezel{grid-row:1/3}.controls{min-width:min(36vw,270px)}.speaker{grid-column:2}}
@media(max-width:350px){.controls{gap:4px;padding:0}.round-keys{gap:5px;padding:6px}}
@media(min-width:1000px){.panel{margin:auto 18px auto auto;width:min(350px,calc((100vw - 540px)/2 - 28px))}}
@media(max-width:680px) and (orientation:portrait){.panel{margin:auto auto 10px;max-height:52dvh}}