:root{color:#2c2926;background:#f7f4ef;font-family:ui-rounded,Hiragino Maru Gothic ProN,Yu Gothic,system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 70% 5%,#fffdf9 0,#f7f4ef 48%,#ebe7df)}button{font:inherit}.shell{width:min(100%,1040px);min-height:100svh;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:18px}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.stage-wrap{display:grid;place-items:center;flex:1;min-height:0}.stage{position:relative;width:min(90vw,460px);aspect-ratio:3 / 4;overflow:hidden;border-radius:30px;background:#ddd6cb;box-shadow:0 24px 60px #503f2d29}.aiko-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.camera-frame{position:absolute;right:14px;bottom:14px;width:26%;max-width:132px;aspect-ratio:3 / 4;overflow:hidden;border:2px solid rgba(255,255,255,.8);border-radius:16px;background:#292725;box-shadow:0 8px 18px #00000029}#camera-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-status{position:absolute;left:5px;right:5px;bottom:5px;border-radius:8px;padding:3px 4px;background:#0000008c;color:#fff;font-size:9px;text-align:center}.error-overlay{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:12px;background:#281e19cc;color:#fff;font-size:13px;line-height:1.5;text-align:center}.preview-panel{width:min(100%,700px);margin:0 auto;padding:18px;border:1px solid rgba(109,90,72,.14);border-radius:22px;background:#fff9}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.button,.preview-button,.close-button{min-height:44px;border-radius:999px;padding:0 18px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}.button:active,.preview-button:active,.close-button:active{transform:translateY(1px)}.button.primary{background:#2d2926;color:#fff}.button.text-button,.close-button{background:transparent;color:#776d64}.preview-heading h2{margin:0;font-size:16px}.preview-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.preview-button{background:#fff;border-color:#e0d8ce;color:#5c5149}.noscript-card{max-width:560px;margin:8vh auto;padding:24px;border-radius:18px;background:#fff}.noscript-card li{margin:8px 0}@media(min-width:800px){.shell{gap:22px}.stage-wrap{min-height:0}.stage{width:min(45vw,500px)}}@media(orientation:landscape)and (max-height:640px){.shell{display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,420px);grid-template-rows:1fr auto;align-items:center}.actions{margin:0}.stage{width:min(48vw,370px)}}
