:root{--navy:#10243a;--navy2:#183552;--orange:#ef6a3a;--paper:#f3efe6;--cream:#fbfaf7;--ink:#172331;--muted:#687481;--line:#ddd8cf;--white:#fff;--danger:#b64d36}
*{box-sizing:border-box}html{background:#e9e5de}body{margin:0;min-height:100vh;background:var(--cream);color:var(--ink);font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}img{max-width:100%}
.app-header{position:sticky;top:0;z-index:10;height:66px;display:flex;align-items:center;gap:12px;padding:0 max(18px,env(safe-area-inset-left));background:rgba(251,250,247,.95);border-bottom:1px solid #e7e2da;backdrop-filter:blur(12px)}.app-brand{display:flex;align-items:center;gap:9px;color:var(--navy);text-decoration:none;font:700 19px Georgia,"Songti SC",serif}.app-brand img{width:34px;height:34px;border-radius:9px}.web-badge{margin-left:auto;padding:4px 10px;border-radius:99px;background:var(--paper);color:var(--muted);font-size:12px}.back-button{width:36px;height:36px;border:0;background:transparent;color:var(--navy);font-size:35px;line-height:1}
.app-shell{width:min(720px,100%);min-height:calc(100vh - 66px);margin:0 auto;padding:38px 22px calc(48px + env(safe-area-inset-bottom))}.screen{display:none}.screen.active{display:block}.eyebrow{margin:0 0 8px;color:var(--orange);font-size:13px;font-weight:800;letter-spacing:2px}.screen>h1{margin:0;color:var(--navy);font:600 clamp(2rem,7vw,3.1rem)/1.25 Georgia,"Songti SC",serif;letter-spacing:-1px}.lead{margin:10px 0 30px;color:var(--muted)}
.loading-card{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.loading-card h1{font:600 28px Georgia,"Songti SC",serif}.loading-card p{color:var(--muted)}.loading-dot{width:18px;height:18px;border:3px solid #f4c8b8;border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.consent-card{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:16px;background:white}.consent-card>strong{display:block;color:var(--navy);font-size:20px}.consent-card>p{margin:8px 0 22px;color:var(--muted)}.consent-card label{display:flex;align-items:flex-start;gap:9px;margin-bottom:20px;font-size:14px}.consent-card input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--orange)}.consent-card a,.app-legal a{color:var(--navy)}
.book-summary{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;margin-bottom:18px;background:var(--navy);color:white;border-radius:14px}.book-summary div{display:flex;flex-direction:column}.book-summary span{font-size:12px;color:#b9c5d0}.book-summary strong{font-size:19px}.text-button{border:0;background:transparent;color:var(--orange);font-weight:700;padding:8px}
.mode-grid{display:grid;gap:12px}.mode-card{width:100%;min-height:112px;display:grid;grid-template-columns:54px 1fr 20px;align-items:center;gap:15px;padding:20px;border:1px solid var(--line);border-radius:16px;background:white;text-align:left;color:var(--ink);box-shadow:0 6px 20px #2d241612}.mode-card:active{transform:translateY(1px)}.mode-card strong,.mode-card small{display:block}.mode-card strong{font-size:21px}.mode-card small{margin-top:4px;color:var(--muted);font-size:14px}.mode-card>b{font-size:30px;color:#a3a9af}.mode-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;font-weight:800}.question .mode-icon{background:#e7eef4;color:var(--navy)}.photo .mode-icon{background:#f8ded4;color:var(--orange)}
.question-card,.form-card,.prompt-card,.recorder-card,.story-form,.notice{margin-top:20px;padding:22px;background:white;border:1px solid var(--line);border-radius:16px}.question-card-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}.question-card h2,.prompt-card h2{margin:13px 0 20px;font:600 24px/1.55 Georgia,"Songti SC",serif;color:var(--navy)}.primary-button,.secondary-button,.stop-button{min-height:52px;border-radius:12px;padding:12px 18px;font-weight:800}.primary-button{width:100%;border:0;background:var(--orange);color:white}.secondary-button{border:1px solid var(--navy);background:white;color:var(--navy)}.secondary-button.full{width:100%;margin-top:12px}.stop-button{border:0;background:var(--navy);color:white}.device-note,.submit-note{color:var(--muted);font-size:13px;text-align:center;margin:22px 8px}
.form-card label,.story-form label{display:block;font-weight:700;margin-bottom:20px}.form-card input,.story-form input,.story-form textarea{display:block;width:100%;margin-top:8px;padding:14px 15px;border:1px solid var(--line);border-radius:11px;background:#faf8f3;color:var(--ink);outline:none}.story-form textarea{resize:vertical;min-height:170px;line-height:1.75}.form-card input:focus,.story-form input:focus,.story-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ef6a3a18}.story-form label small{display:block;text-align:right;color:var(--muted);font-weight:400}fieldset{padding:0;margin:0 0 24px;border:0}legend{font-weight:700;margin-bottom:10px}.relation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.relation-grid input{position:absolute;opacity:0}.relation-grid span{display:block;padding:12px;border:1px solid var(--line);border-radius:10px;text-align:center}.relation-grid input:checked+span{color:var(--orange);border-color:var(--orange);background:#fff4ef}
.step-line{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 32px}.step-line span{padding:7px 4px;border-bottom:3px solid var(--line);color:#9a9fa5;font-size:13px;text-align:center}.step-line .active{border-color:var(--orange);color:var(--orange);font-weight:800}.prompt-card span{color:var(--orange);font-size:13px;font-weight:800}.prompt-card p{margin:0;color:var(--muted);font-size:14px}.photo-first{display:flex;align-items:center;gap:15px;padding:18px;margin-top:18px;border:1px solid #ecc8b9;border-radius:14px;background:#fff4ef}.photo-first-copy{display:flex;flex:1;flex-direction:column}.photo-first-copy span{color:var(--muted);font-size:13px}.file-button{position:relative;overflow:hidden;white-space:nowrap}.file-button input,.add-photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.recorder-card{text-align:center}.record-button{width:92px;height:92px;border:0;border-radius:50%;background:#fff0e9;box-shadow:0 0 0 10px #fff8f4;color:var(--orange)}.record-button span{font-size:45px;line-height:1}.record-button.recording{animation:pulse 1.4s ease-in-out infinite;background:var(--orange);color:white}@keyframes pulse{50%{box-shadow:0 0 0 18px #ef6a3a18}}.recorder-card h2{margin:18px 0 2px;font:600 22px Georgia,"Songti SC",serif}.recorder-card time{display:block;color:var(--orange);font:700 22px/1.5 ui-monospace,monospace}.recorder-card p{margin:4px 0 14px;color:var(--muted);font-size:13px}.record-actions{display:flex;justify-content:center;gap:10px}.recorder-card audio{width:100%;margin-top:16px}
.media-card{padding-top:18px;border-top:1px solid var(--line)}.media-card>div:first-child{display:flex;justify-content:space-between}.media-card>div span{color:var(--muted);font-size:13px}.add-photo{position:relative;display:grid;place-items:center;min-height:74px;margin-top:12px;border:1px dashed #c8c0b6;border-radius:11px;color:var(--orange);font-weight:800}.photo-grid{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.photo-item{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden}.photo-item img{width:100%;height:100%;object-fit:cover}.photo-item button{position:absolute;right:4px;top:4px;width:28px;height:28px;border:0;border-radius:50%;background:#10243acc;color:white}.notice{background:#f4f0e7}.notice strong{color:var(--navy)}.notice p{margin:6px 0 0;color:var(--muted);font-size:14px}.source-summary{padding:15px;margin:0 0 20px;border-radius:10px;background:var(--paper);color:var(--muted);font-size:14px}
.story-list{display:grid;gap:12px;margin:28px 0}.story-row{width:100%;display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:12px;padding:18px;border:1px solid var(--line);border-radius:13px;background:white;text-align:left}.story-row .index{color:var(--orange);font:italic 18px Georgia}.story-row strong,.story-row small{display:block}.story-row small{margin-top:3px;color:var(--muted)}.empty-card{padding:34px 22px;margin:28px 0;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted)}.story-date{color:var(--muted);font-size:14px}.story-content{margin:30px 0;padding:28px;background:white;border:1px solid var(--line);border-radius:14px;white-space:pre-wrap;font:18px/2 Georgia,"Songti SC",serif}.status-toast{position:fixed;left:50%;bottom:24px;z-index:30;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:8px;background:var(--navy);color:white;opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:.2s;text-align:center}.status-toast.show{opacity:1;transform:translate(-50%,0)}
.app-legal{display:flex;justify-content:center;gap:10px;padding:0 18px calc(28px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px}.app-legal a{text-decoration:none}
@media(min-width:760px){body{box-shadow:0 0 60px #3a312526}.app-header{width:720px;margin:auto}.app-shell{padding-left:40px;padding-right:40px}}
@media(max-width:480px){.app-shell{padding-top:28px}.mode-card{min-height:104px;padding:17px}.photo-first{align-items:stretch;flex-direction:column}.photo-first .secondary-button{text-align:center}.story-form,.form-card,.question-card,.prompt-card,.recorder-card{padding:18px}.relation-grid{grid-template-columns:1fr 1fr}.photo-grid{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}