:root{color-scheme:light;font-family:Arial,Helvetica Neue,Segoe UI,sans-serif;--bg: #f7f7f3;--bg-soft: rgba(255, 255, 255, .82);--panel: rgba(255, 255, 255, .9);--panel-strong: rgba(255, 255, 255, .98);--panel-border: rgba(34, 35, 40, .08);--text: #20242e;--text-dark: #20242e;--text-muted: rgba(32, 36, 46, .68);--accent-orange: #ff6b00;--accent-violet: #7257f5;--accent-cyan: #16c8f4;--accent-yellow: #ffca1b;--accent-green: #75db1b;--accent-red: #ff553d;--shadow: 0 24px 64px rgba(33, 37, 48, .12);--radius-lg: 30px;--radius-md: 22px;--radius-sm: 16px;--transition-base: .18s ease}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 10% 15%,rgba(22,200,244,.18),transparent 20%),radial-gradient(circle at 85% 12%,rgba(114,87,245,.16),transparent 22%),radial-gradient(circle at 78% 82%,rgba(255,202,27,.22),transparent 18%),linear-gradient(180deg,#fbfbf8,#f4f6fa);color:var(--text)}body{overflow:hidden}button,input,textarea,select{font:inherit}#app{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 12% 14%,rgba(22,200,244,.18),transparent 18%),radial-gradient(circle at 84% 18%,rgba(114,87,245,.15),transparent 20%),linear-gradient(180deg,#fff,#eef4ff);z-index:1}#app>canvas,#app>video{position:absolute;top:0;right:0;bottom:0;left:0}#app>video{z-index:-1}#ui{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}#ui button{pointer-events:auto}.hidden{display:none!important}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:999px;min-height:52px;padding:.9rem 1.25rem;cursor:pointer;color:var(--text-dark);background:#ffffffe0;box-shadow:0 10px 24px #21253014;transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base),background var(--transition-base)}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:wait}.btn-primary{background:linear-gradient(135deg,var(--accent-orange),var(--accent-yellow));color:#fff;box-shadow:0 12px 28px #ff6b0038}.btn-secondary{background:#ffffffeb}.btn-accent{background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));color:#fff}.btn-ghost{background:#ffffffb8;color:var(--text);border:1px solid rgba(34,35,40,.08)}.eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .75rem;border-radius:999px;background:linear-gradient(135deg,#ff6b001f,#7257f51f);color:#20242eb8;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}.splash-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;display:flex;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));transition:opacity .22s ease,visibility .22s ease;overflow:hidden}body[data-app-state=camera] .splash-screen,body[data-app-state=result] .splash-screen,body[data-app-state=loading] .splash-screen{opacity:0;visibility:hidden}body[data-app-state=permission] .splash-copy-block{opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none}.splash-shell{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:center;padding:2rem 0}.splash-background{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0}.splash-dim{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(255,255,255,.12),transparent 24%),linear-gradient(180deg,#f8f9fc33,#ebf0f86b)}.splash-copy-block,.hud-card,.share-dialog{border:1px solid var(--panel-border);border-radius:var(--radius-lg);background:var(--bg-soft);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.splash-copy-block{width:min(92vw,820px);max-width:min(calc(100vw - 36px),820px);min-width:0;padding:clamp(1.6rem,3.4vw,3rem);position:relative;overflow:hidden;background:#ffffffd6;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);text-align:left}.splash-copy-block:after{content:"";position:absolute;right:-34px;top:-34px;width:156px;height:156px;border-radius:42px;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet) 48%,var(--accent-yellow));opacity:.12;transform:rotate(12deg)}.splash-title,.result-title,.share-title{margin:0;font-family:Arial,Helvetica Neue,Segoe UI,sans-serif;line-height:.92}.splash-logo{margin-top:.9rem;width:min(100%,800px);display:block;margin-left:auto;margin-right:auto}.splash-copy{width:100%;margin:1rem 0 1.5rem;font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.58;color:var(--text-muted);text-wrap:pretty}.splash-copy-block .btn{max-width:100%;white-space:normal}.character-preview-grid{--preview-gap: clamp(.8rem, 1.4vw, 1.2rem);position:absolute;top:-6vh;right:-4vw;bottom:-6vh;left:-4vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(150px,16vw,240px),1fr));gap:var(--preview-gap);align-items:stretch;transform:none}.character-column{position:relative;overflow:hidden;min-height:112vh;background:transparent}.character-column-track{display:flex;flex-direction:column;gap:var(--preview-gap);will-change:transform;background:transparent}.character-column.is-up .character-column-track{animation:character-column-up var(--column-duration, 28s) linear infinite}.character-column.is-down .character-column-track{animation:character-column-down var(--column-duration, 28s) linear infinite}.preview-card{aspect-ratio:1 / 1;padding:0;border-radius:14px;overflow:hidden;background:transparent;border:0;box-shadow:none}.preview-card-image{width:100%;height:100%;display:block;object-fit:cover;border-radius:14px}.hud-shell{position:fixed;top:0;right:0;bottom:0;left:0;display:none;pointer-events:none;z-index:1}body[data-app-state=permission] .hud-shell,body[data-app-state=camera] .hud-shell,body[data-app-state=result] .hud-shell,body[data-app-state=loading] .hud-shell{display:block}.hud-card{padding:1rem}.result-badge{display:inline-flex;padding:.4rem .7rem;border-radius:999px;background:linear-gradient(135deg,#ff6b0024,#7257f524);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}.result-badge:empty{display:none}.result-title{margin-top:.85rem;font-size:clamp(1.8rem,4vw,2.7rem)}.result-text,.face-hint{margin:.75rem 0 0;line-height:1.55}.permission-card,.camera-card,.result-card,.result-actions{position:fixed;left:50%;transform:translate(-50%);pointer-events:auto}.permission-card{bottom:max(18px,env(safe-area-inset-bottom));width:min(70vw,calc(100vw - 36px));padding:1.35rem 1.4rem;display:none;background:#fffffff0}.permission-title{margin:0;font-family:Arial,Helvetica Neue,Segoe UI,sans-serif;font-size:clamp(1.65rem,4.8vw,2.4rem);line-height:1}.permission-text{margin:.9rem 0 0;color:var(--text-muted);line-height:1.58}.camera-card,.result-card{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 78px);width:min(calc(100vw - 36px),560px);display:none;padding:.72rem 1.05rem;text-align:center}.camera-card{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 136px);width:min(calc(100vw - 36px),430px);padding:.85rem 1.1rem .9rem}.camera-actions,.result-actions{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);display:none;align-items:center;justify-content:center;gap:.8rem;pointer-events:auto}.result-actions{width:min(calc(100vw - 36px),420px)}body[data-app-state=permission] .permission-card,body[data-app-state=camera] .camera-card{display:block}body[data-app-state=camera] .camera-actions{display:flex}body[data-app-state=result] .result-card{display:block}body[data-app-state=result] .result-actions{display:flex}body[data-share-open=true] .result-card,body[data-share-open=true] .result-actions,body[data-capture-active=true] .hud-shell{display:none}.face-hint{margin:0;font-size:clamp(.92rem,2.2vw,1.08rem);line-height:1.16;color:var(--text-dark)}.icon-control-btn{width:68px;height:68px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#fffffff0;color:var(--text-dark);box-shadow:0 14px 32px #2125301f;font-size:2rem;cursor:pointer;transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base),background var(--transition-base)}.icon-control-svg{width:28px;height:28px;display:block}.icon-control-btn:hover{transform:translateY(-1px)}.icon-control-btn:disabled{opacity:.5;cursor:wait}.icon-control-btn--play{background:linear-gradient(135deg,var(--accent-orange),var(--accent-yellow));color:#fff}.icon-control-btn--rotate{background:#ffffffeb}.result-card .result-title{margin-top:0;color:#8f2631;font-family:Arial,Helvetica Neue,Segoe UI,sans-serif;font-size:clamp(.9rem,2.1vw,1.02rem);font-weight:400;line-height:1.08}.result-card .result-text{margin-top:.45rem;display:grid;gap:.2rem;text-align:center}.result-character-name{display:block;color:#1f345d;font-family:Arial,Helvetica Neue,Segoe UI,sans-serif;font-size:clamp(1.18rem,3.8vw,1.7rem);font-weight:700;line-height:1}.result-character-copy{display:block;color:var(--text-muted);font-size:clamp(.88rem,1.8vw,.94rem);line-height:1.32}.result-actions .btn{flex:1 1 0}.photo-countdown{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:12}.photo-countdown.is-visible{display:flex}.photo-countdown-digit{min-width:1.5em;text-align:center;font-family:Arial Rounded MT Bold,Avenir Next,Trebuchet MS,sans-serif;font-size:clamp(5rem,24vw,9rem);line-height:.9;color:#ff7a00;text-shadow:0 16px 40px rgba(0,0,0,.18),0 0 28px rgba(255,255,255,.46);animation:countdown-pop .9s ease both}.photo-countdown-digit[data-tone="3"]{color:#ff7a00}.photo-countdown-digit[data-tone="2"]{color:#00bcd4}.photo-countdown-digit[data-tone="1"]{color:#7c4dff}.head-mask{position:fixed;left:0;top:0;width:140px;height:140px;opacity:0;pointer-events:none;transform-style:preserve-3d;transition:opacity .16s ease}.head-mask.is-visible{opacity:1}.head-mask-image{width:100%;height:100%;display:block;border-radius:24px;backface-visibility:hidden;box-shadow:0 18px 44px #21253038}.head-mask.is-spinning .head-mask-image{filter:blur(10px) saturate(1.1)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#ffffff6b}.overlay.active{display:flex}.loading-chip{display:inline-flex;align-items:center;gap:.8rem;padding:1rem 1.25rem;border-radius:999px;background:#fffffff5;color:var(--text-dark);box-shadow:var(--shadow)}.spinner{width:18px;height:18px;border-radius:999px;border:3px solid rgba(31,52,93,.2);border-top-color:var(--accent-orange);animation:spin .8s linear infinite}.share-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;padding:20px;pointer-events:none}.share-modal.is-open{display:flex;pointer-events:auto}.share-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffffa3}.share-dialog{position:relative;width:min(560px,100%);padding:1.2rem;background:var(--panel-strong);color:var(--text-dark)}.share-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.share-title{margin-top:.55rem;font-size:2.2rem}.icon-btn{width:42px;height:42px;border:0;border-radius:999px;background:#20242e0f;color:var(--text-dark);font-size:1.8rem;cursor:pointer}.share-preview{width:100%;margin-top:1.15rem;border-radius:24px;display:block}.share-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.15rem}.share-action-btn{min-height:78px;padding:.95rem 1.1rem;border:0;border-radius:24px;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;background:#fffffff0;color:var(--text-dark);box-shadow:0 14px 32px #2125301f;cursor:pointer;transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base),background var(--transition-base)}.share-action-btn:hover{transform:translateY(-1px)}.share-action-btn:disabled{opacity:.45;cursor:default}.share-icon{width:28px;height:28px;display:block}.share-action-label{font-size:1.04rem;line-height:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes countdown-pop{0%{transform:scale(.72);opacity:0}22%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}@keyframes character-column-up{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - (var(--preview-gap) / 2)))}}@keyframes character-column-down{0%{transform:translateY(calc(-50% - (var(--preview-gap) / 2)))}to{transform:translateY(0)}}@media (max-width: 720px){.splash-copy-block{width:min(92vw,560px);padding:1.35rem}.splash-title{font-size:clamp(1.32rem,7.1vw,2.45rem)}.splash-copy{max-width:none}.share-actions{grid-template-columns:1fr;gap:.75rem}.permission-card,.camera-card,.result-card,.result-actions{width:min(calc(100vw - 24px),560px)}.camera-card,.result-card{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 72px)}.camera-card{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 128px)}.camera-actions,.result-actions{bottom:max(10px,env(safe-area-inset-bottom))}.result-actions{gap:.6rem}.result-actions .btn{min-height:50px}}