:root{--color-brand-700:#2c6499;--color-brand-600:#3a77b5;--color-brand-500:#518fcc;--color-brand-400:#72a8d9;--color-brand-200:#a3c4e6;--color-brand-100:#c3d9ef;--color-brand-50:#e3eef8;--color-check-navy:#1e3054;--color-white:#fff;--color-gray-50:#f3f3f3;--color-gray-100:#f0f0f0;--color-gray-200:#e4e4e4;--color-gray-300:#d0d0d0;--color-gray-400:#b0b0b0;--color-ink-900:#121212;--color-ink-700:#555;--color-ink-500:#666;--color-ink-400:#717171;--color-ink-300:#767676;--color-ink-200:#bbb;--color-ink-100:#ccc;--color-success:#4a7c59;--color-success-bg:#eef5f1;--color-warning:#b5813b;--color-error:#b54040;--font-display:"Cormorant Garamond", Georgia, serif;--font-heading:"Noto Sans JP", "Helvetica Neue", Arial, sans-serif;--font-body:"Noto Sans JP", "Helvetica Neue", Arial, sans-serif;--font-ui:"Noto Sans JP", "Helvetica Neue", Arial, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:focus{outline:none}:focus-visible{outline:3px solid var(--color-brand-500);outline-offset:3px;border-radius:6px}html,body,#root{-webkit-font-smoothing:antialiased;height:100%}body{font-family:var(--font-body);background:#f0ede8;justify-content:center;align-items:center;min-height:100vh;display:flex}.ipad-shell{background:#fff;border-radius:16px;flex-direction:column;flex-shrink:0;width:768px;height:1024px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #00000014,0 2px 4px #0000000f,0 12px 40px #00000029,0 32px 80px #0000001f}.status-bar{z-index:100;background:0 0;flex-shrink:0;justify-content:space-between;align-items:center;height:32px;padding:0 28px;display:flex;position:absolute;top:0;left:0;right:0}.status-bar span{letter-spacing:.02em;opacity:.7;font-size:11px;font-weight:500}.status-bar .brand-name{letter-spacing:.08em;opacity:1;font-size:12px;font-weight:600}.prog-bar{background:#0000000f;flex-shrink:0;height:2px;margin-top:32px}.prog-fill{background:var(--color-brand-400);height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.screen{will-change:opacity, transform;flex-direction:column;flex:1;animation:.32s cubic-bezier(.4,0,.2,1) both slideIn;display:flex;position:relative;overflow:hidden}@keyframes slideIn{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}.t-eyebrow{font-family:var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-300);font-size:11px;font-weight:500}.t-heading{font-family:var(--font-heading);color:var(--color-ink-900);font-size:28px;font-weight:300;line-height:1.35}.t-body{font-family:var(--font-body);color:var(--color-ink-500);font-size:15px;font-weight:400;line-height:1.7}.t-caption{font-family:var(--font-ui);color:var(--color-ink-300);font-size:12px}.btn-primary{background:var(--color-brand-500);color:#fff;width:100%;height:68px;font-family:var(--font-ui);letter-spacing:.06em;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;font-size:18px;font-weight:500;transition:background .15s,transform .1s;display:flex}.btn-primary:active{background:var(--color-brand-700);transform:scale(.99)}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-ghost{width:100%;height:60px;color:var(--color-ink-400);border:1.5px solid var(--color-gray-200);font-family:var(--font-ui);cursor:pointer;background:0 0;border-radius:12px;justify-content:center;align-items:center;font-size:15px;font-weight:400;transition:border-color .15s,color .15s;display:flex}.btn-ghost:hover{border-color:var(--color-gray-300);color:var(--color-ink-700)}.input-wrap{border:1.5px solid var(--color-gray-200);background:#fff;border-radius:10px;align-items:center;gap:10px;height:64px;padding:0 20px;transition:border-color .2s,box-shadow .2s;display:flex}.input-wrap.focused{border-color:var(--color-brand-400);box-shadow:0 0 0 3px #518fcc1f}.input-wrap input{font-family:var(--font-ui);color:var(--color-ink-900);background:0 0;border:none;outline:none;flex:1;font-size:18px;font-weight:300}.photo-cell{cursor:pointer;background:var(--color-gray-50);border-radius:4px;transition:transform .15s;position:relative;overflow:hidden}.photo-cell:active{transform:scale(.97)}.photo-cell.selected{outline:3px solid var(--color-brand-500);outline-offset:2px}.photo-cell .check{background:var(--color-brand-500);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:13px;font-weight:700;display:flex;position:absolute;top:10px;right:10px;box-shadow:0 2px 8px #518fcc66}.frame-thumb{cursor:pointer;background:var(--color-gray-50);border:2px solid #0000;border-radius:4px;flex-shrink:0;width:110px;transition:border-color .15s,box-shadow .15s;overflow:hidden}.frame-thumb.selected{border-color:var(--color-brand-500);box-shadow:0 0 0 3px #518fcc26}.keyboard-ph{background:#d1d5db;flex-direction:column;flex-shrink:0;gap:8px;height:300px;padding:12px;display:flex}.kb-row{justify-content:center;gap:6px;display:flex}.kb-key{color:#222;background:#fff;border-radius:4px;justify-content:center;align-items:center;min-width:38px;height:44px;padding:0 6px;font-size:15px;font-weight:400;display:flex;box-shadow:0 1px #0000004d}.kb-key.wide{min-width:72px}.kb-key.space{flex:1;max-width:260px}.kb-key.dark{background:#adb5bd;font-size:12px}.kb-key.confirm{background:var(--color-brand-500);color:#fff}.qr-frame{border:1px solid var(--color-gray-200);background:#fff;border-radius:8px;padding:16px;display:inline-flex;box-shadow:0 2px 16px #00000012}.screen-nav{flex-wrap:wrap;justify-content:center;gap:6px;max-width:768px;display:flex}.screen-nav-btn{color:#888;font-family:var(--font-ui);cursor:pointer;background:#fff;border:1.5px solid #ddd;border-radius:99px;padding:5px 12px;font-size:11px;font-weight:400;transition:all .15s}.screen-nav-btn.active{border-color:var(--color-brand-500);background:var(--color-brand-500);color:#fff;font-weight:500}@keyframes shutterFlash{0%{background:#ffffffb3}to{background:#fff0}}@keyframes frameSwitch{0%{opacity:.5;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes countPop{0%{opacity:.6;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.frame-grid::-webkit-scrollbar{width:4px}.frame-grid::-webkit-scrollbar-track{background:0 0}.frame-grid::-webkit-scrollbar-thumb{background:var(--color-brand-200);border-radius:99px;transition:background .2s}.frame-grid::-webkit-scrollbar-thumb:hover{background:var(--color-brand-400)}.frame-grid{scrollbar-width:thin;scrollbar-color:var(--color-brand-200) transparent}@media (prefers-reduced-motion:reduce){@keyframes slideIn{0%{opacity:0}to{opacity:1}}@keyframes shutterFlash{0%{opacity:0}to{opacity:0}}@keyframes frameSwitch{0%{opacity:.85}to{opacity:1}}@keyframes countPop{0%{opacity:.7}to{opacity:1}}.screen{animation-duration:.15s}.btn-primary:active,.btn-ghost:active{transform:none}}