@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Zen+Old+Mincho:wght@500;600&display=swap');
:root{--navy:#102950;--blue:#4d9cdb;--ink:#173455;--muted:#8194aa;--paper:#f4f8fc;--line:#e4edf5;--pink:#f5a9bb}*{box-sizing:border-box}body{margin:0;background:#eaf1f8;color:var(--ink);font-family:'Noto Sans JP',sans-serif}.app-shell{max-width:430px;min-height:100svh;margin:auto;background:var(--paper);position:relative;box-shadow:0 0 48px #25466b20;padding-bottom:84px}.topbar{height:58px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid #edf2f7}.brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}.brand-mark{font-family:'Zen Old Mincho',serif;font-style:italic;font-size:24px;color:#3987c5}.icon-btn{border:0;background:none;color:var(--ink);font-size:26px;width:38px;height:38px}.hero{min-height:350px;padding:30px 24px 24px;color:white;position:relative;overflow:hidden;background:linear-gradient(180deg,#297ebd44,#112955aa),linear-gradient(155deg,#3fa2df 0%,#a9d7ef 38%,#f3ad91 62%,#153b6b 100%);display:flex;flex-direction:column;justify-content:space-between}.hero:before{content:'';position:absolute;inset:40% -10% -15%;background:linear-gradient(180deg,#f5d3be00,#11284f88 42%),radial-gradient(ellipse at 20% 70%,#24476b 0 12%,transparent 13%),radial-gradient(ellipse at 78% 74%,#1d3a5e 0 18%,transparent 19%);opacity:.92}.hero:after{content:'✦     · ｡ﾟ      ✦';position:absolute;right:18px;top:22px;color:#fff9;letter-spacing:12px}.hero>*{position:relative;z-index:1}.eyebrow{font-size:11px;letter-spacing:.18em;opacity:.86}.hero-logo{font-family:'Zen Old Mincho',serif;font-size:68px;font-style:italic;line-height:1;text-shadow:0 4px 14px #143a6280;margin:34px 0 8px}.hero h1{font-family:'Zen Old Mincho',serif;font-size:20px;font-weight:500;line-height:1.8;margin:0}.hero p{font-size:12px;line-height:1.9;opacity:.9;max-width:260px}.primary,.secondary,.soft-button{border:0;border-radius:999px;padding:13px 20px;font:600 13px inherit;cursor:pointer}.primary{background:linear-gradient(110deg,#68b9eb,#398bd0);color:white;box-shadow:0 8px 18px #347fb54a}.secondary{background:var(--navy);color:white}.soft-button{background:#fff;color:#397cb2;border:1px solid #dceaf5}.hero .primary{width:100%;margin-top:8px}.section{padding:22px 18px 2px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:13px}.section-head h2{font-size:16px;margin:0}.section-head small,.muted{color:var(--muted);font-size:11px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.feature{background:white;border:1px solid var(--line);border-radius:18px;padding:15px 14px;min-height:112px;box-shadow:0 4px 12px #24405a08}.feature .glyph{font-size:21px;color:#4a9bd4}.feature b{display:block;font-size:13px;margin:7px 0 4px}.feature p{margin:0;font-size:10px;color:var(--muted);line-height:1.6}.memory-card{background:#fff;border-radius:18px;padding:12px;display:flex;gap:13px;align-items:center;box-shadow:0 4px 14px #24405a0c}.photo{border-radius:14px;background:linear-gradient(150deg,#6db1db,#f5c19b 54%,#244b79);position:relative;overflow:hidden}.photo:after{content:'✦';position:absolute;right:12px;top:8px;color:#fff9}.memory-card .photo{width:94px;height:86px;flex:none}.memory-card b{font-size:13px}.memory-card p{font-size:10px;color:var(--muted);margin:5px 0}.page{padding:20px 18px}.page h1{font-size:21px;margin:2px 0 6px}.intro{color:var(--muted);font-size:12px;line-height:1.8;margin:0 0 20px}.camera-preview{height:410px;border-radius:24px;background:linear-gradient(180deg,#203e6390,#17325233),linear-gradient(155deg,#4c9fd1,#f4be9b 50%,#243e64);position:relative;display:flex;align-items:flex-end;justify-content:center;padding:22px;overflow:hidden}.camera-preview:before{content:'◦  •  ✦';color:#fff9;position:absolute;top:30px;left:25px;letter-spacing:20px}.camera-preview .horizon{position:absolute;left:0;right:0;bottom:90px;height:95px;background:linear-gradient(180deg,transparent,#183556aa);clip-path:polygon(0 38%,18% 22%,29% 42%,45% 8%,60% 28%,80% 18%,100% 40%,100% 100%,0 100%)}.cam-label{position:absolute;top:20px;left:20px;background:#10295070;color:white;padding:7px 11px;border-radius:99px;font-size:10px}.shutter-row{display:flex;align-items:center;gap:24px;z-index:1;color:white}.shutter{width:68px;height:68px;border:5px solid #fff;border-radius:50%;background:#ffffff35}.cam-action{border:0;background:#ffffff30;border-radius:50%;width:42px;height:42px;color:white;font-size:18px}.capture-options{display:flex;gap:8px;margin:15px 0}.capture-options button{flex:1;padding:11px;border:1px solid var(--line);background:white;border-radius:13px;color:var(--ink);font-size:12px}.capture-options .chosen{background:#e4f3fe;border-color:#76b8e5;color:#2877b6}.info-row{display:flex;gap:8px;flex-wrap:wrap}.chip{background:white;border:1px solid var(--line);border-radius:99px;padding:8px 11px;color:#53718e;font-size:10px}.album-cover{height:185px;border-radius:22px;padding:18px;color:white;background:linear-gradient(150deg,#73b8dc,#f3c0a1 48%,#234a75);position:relative;overflow:hidden}.album-cover:after{content:'BEST FRIENDS ♡';position:absolute;right:14px;bottom:16px;font:italic 17px 'Zen Old Mincho',serif}.album-cover strong{font:22px 'Zen Old Mincho',serif}.album-cover small{display:block;margin-top:6px}.album-list{display:grid;gap:13px;margin-top:15px}.spread{background:#fff;border-radius:17px;padding:12px;box-shadow:0 4px 14px #24405a0b}.spread-top{display:flex;justify-content:space-between;font-size:11px;color:#738ca4;margin-bottom:9px}.spread-photos{display:grid;grid-template-columns:1fr 1fr;gap:9px}.spread .photo{height:140px;border:5px solid white;box-shadow:0 3px 10px #172a421c;transform:rotate(-2deg)}.spread .photo:nth-child(2){transform:rotate(2deg)}.caption{margin:12px 3px 2px;font-family:'Zen Old Mincho',serif;font-size:13px;color:#586f83}.tool-row{display:flex;gap:8px;margin-top:12px}.tool-row button{background:#f1f7fc;border:0;border-radius:10px;padding:9px;color:#4b79a0;font-size:11px}.friend-card,.white-card{background:white;border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 0}.qr{width:142px;height:142px;margin:12px auto;background:repeating-conic-gradient(#17395f 0 25%,#fff 0 50%) 0/16px 16px;border:9px solid white;box-shadow:0 0 0 1px var(--line);position:relative}.qr:after{content:'ai';position:absolute;inset:43px;background:white;color:#397fb1;display:grid;place-items:center;border-radius:8px;font:italic 23px 'Zen Old Mincho',serif}.center{text-align:center}.friend-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#91c8e9,#f7c9ad);color:#fff;font-size:13px}.friend-row b{font-size:12px}.friend-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.friend-row .right{margin-left:auto;color:#4d9bce;font-size:11px}.capsule-hero{height:355px;border-radius:22px;background:radial-gradient(circle at 50% 44%,#8acdf333,transparent 31%),linear-gradient(165deg,#183a66,#0e2042);color:white;display:grid;place-items:center;text-align:center;padding:24px;position:relative;overflow:hidden}.capsule-hero:before{content:'✧  ·    ✦    ·  ✧';position:absolute;top:20%;letter-spacing:15px;color:#bddfff88}.capsule-icon{font-size:56px;color:#b9e0ff}.capsule-hero h2{font:20px 'Zen Old Mincho',serif}.capsule-hero p{font-size:11px;line-height:1.8;color:#d1e3f4}.capsule-hero .primary{background:white;color:#183b65}.form-row{margin:13px 0}.form-row label{display:block;font-size:11px;font-weight:600;margin-bottom:7px}.form-row input,.form-row select{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);font:13px inherit}.profile-head{display:flex;align-items:center;gap:14px;background:white;padding:17px;border-radius:18px}.profile-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,#7ab5dd,#f3c6a7);display:grid;place-items:center;color:white;font-size:24px}.profile-head input{border:0;border-bottom:1px solid var(--line);padding:8px 0;font:15px inherit;color:var(--ink)}.profile-head small{color:var(--muted);font-size:10px}.empty{padding:25px;text-align:center;color:var(--muted);font-size:12px}.tabbar{height:75px;position:fixed;bottom:0;width:min(430px,100%);background:#ffffffed;backdrop-filter:blur(16px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:7px 5px max(7px,env(safe-area-inset-bottom));z-index:6}.tabbar button{border:0;background:none;color:#8da0b4;font:10px inherit;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:54px}.tabbar button span{font-size:21px;line-height:1.2}.tabbar button.active{color:#3489c7;font-weight:700}#toast{position:fixed;left:50%;bottom:94px;transform:translate(-50%,15px);background:#102950;color:white;padding:11px 17px;border-radius:99px;font-size:11px;opacity:0;transition:.25s;z-index:20;pointer-events:none;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:600px){body{padding:25px 0}.app-shell{border-radius:28px;overflow:hidden;min-height:calc(100svh - 50px)}.tabbar{bottom:25px;border-radius:0 0 28px 28px}}
.auth-switch{display:flex;gap:8px;margin:12px 0}.auth-switch button{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px;color:var(--ink);font-size:12px}.auth-switch button.active{background:#e5f3fc;color:#2877b6;border-color:#83bfe6}.social-buttons{display:grid;gap:9px;margin:12px 0}.social-buttons button{width:100%;background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;text-align:left;color:var(--ink);font-size:12px}.social-buttons button:after{content:'設定待ち';float:right;color:#8799aa;font-size:10px}.auth-note{background:#edf5fb;border-radius:13px;padding:12px;color:#607b94;font-size:10px;line-height:1.75;margin:12px 0}.qr-wrap{min-height:176px;display:grid;place-items:center}.qr-real{background:#fff;padding:8px;border:1px solid var(--line);border-radius:10px;min-height:150px;min-width:150px}.qr-code-label{font:600 14px monospace;letter-spacing:.16em;color:#3c7ca8}.form-row input[type=password]{letter-spacing:.08em}

[hidden]{display:none!important}
.share-history{padding:12px 0;border-bottom:1px solid var(--line)}.share-history b{display:block;font-size:12px}.share-history small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.modal-backdrop{position:fixed;inset:0;z-index:30;background:#0e2547a8;display:grid;place-items:center;padding:18px}.share-modal{position:relative;width:min(100%,390px);max-height:85svh;overflow:auto;background:var(--paper);border-radius:22px;padding:22px 18px;box-shadow:0 20px 60px #07172b55}.share-modal h2{font-size:18px;margin:2px 0 5px}.modal-close{position:absolute;right:14px;top:12px;border:0;background:none;font-size:26px;color:var(--muted)}.recipient-list{margin:15px 0}.recipient{display:flex;align-items:center;gap:11px;background:#fff;padding:11px;border-bottom:1px solid var(--line)}.recipient input{width:18px;height:18px;accent-color:#398bd0}.recipient b{font-size:12px}.recipient small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.auth-switch+.white-card{margin-top:0}.auth-note{overflow-wrap:anywhere}.white-card .primary,.white-card .soft-button{font:600 13px inherit}
.live-camera{background:#07172c;padding:0;align-items:flex-end}.live-camera:before{display:none}.live-camera>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.camera-message{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;color:white;background:#07172cbb;font-size:13px;line-height:1.8;z-index:1}.camera-message .soft-button{margin-top:12px}.live-camera .cam-label{z-index:2}.live-camera .shutter-row{position:relative;z-index:2;margin-bottom:0}.shutter.recording{background:#e34c66;border-color:white;box-shadow:inset 0 0 0 8px #fff}.media-slot{display:grid;place-items:center;background:#edf3f8}.media-slot:after{display:none}.media-slot img,.media-slot video{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}