:root{font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif;color:#203d43;background:#edf4f3;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #203d43;--muted: #546c71;--teal: #14606a;--deep: #123e47;--pink: #b32e5d;--paper: #fffefa;--line: #dce5e2;--soft: #f1f6f4;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px}*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button,a,input{touch-action:manipulation}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #126e89;outline-offset:4px}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:disabled{cursor:default}a{color:inherit}h1,h2,h3,p{margin:0}h2{font-size:1.3rem;line-height:1.65;letter-spacing:.03em;font-weight:600}h3{font-size:1rem}p{line-height:1.9}.icon{flex:0 0 auto;vertical-align:middle}.topbar{min-height:66px;max-width:1160px;padding:max(8px,env(safe-area-inset-top)) 24px 8px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.wordmark{font-family:Georgia,serif;font-size:1.4375rem;text-decoration:none;min-height:44px;display:flex;align-items:center;gap:8px}.wordmark span{font-size:1rem;font-style:italic;color:var(--teal)}.icon-button{width:44px;height:44px;background:transparent;display:grid;place-items:center;border-radius:50%}.game-shell{max-width:1100px;margin:10px auto 24px;border-radius:24px;background:var(--paper);display:grid;grid-template-columns:1fr 1fr;overflow:clip;box-shadow:0 14px 64px #20424a13;border:1px solid #ffffff}.visual-column{background:var(--deep);position:relative;min-width:0}.portrait{position:relative;min-height:690px;height:100%;background-image:linear-gradient(180deg,#0e2e331a 0%,transparent 48%,#0b3035ed 100%),var(--scene);background-size:cover,300% auto;background-position:center,var(--position) 28%;background-repeat:no-repeat;isolation:isolate}.location-label{position:absolute;top:23px;left:24px;right:24px;display:flex;align-items:center;gap:7px;color:#fff;padding:10px 13px;background:#10363fdd;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #ffffff33;border-radius:var(--radius-sm);font-size:.875rem}.location-label .icon{width:17px;height:17px}.location-time{margin-left:auto;font-family:Arial,sans-serif;font-size:.8125rem;letter-spacing:.07em}.cover-title{position:absolute;bottom:45px;left:37px;right:20px;color:#fff}.eyebrow{font-family:Arial,sans-serif;font-size:.75rem;letter-spacing:.14em;color:#eafaff}.cover-title h1{font-family:Georgia,Times New Roman,serif;font-weight:400;font-size:clamp(3.8rem,6vw,5.4rem);line-height:.95;letter-spacing:-.045em;margin:18px 0;text-shadow:0 3px 22px #03282e55}.cover-title h1 em{display:inline-block;font-size:.53em;font-weight:400;letter-spacing:-.04em;color:#ffc0d1}.cover-title p{font-size:.9375rem;letter-spacing:.03em}.desktop-note{position:absolute;bottom:0;width:100%;padding:13px 24px;display:flex;justify-content:space-between;gap:12px;color:#d5eceb;font-size:.75rem;background:var(--deep)}.desktop-note span:first-child{font-family:Arial,sans-serif;letter-spacing:.08em}.start-content{padding:70px 44px 36px;display:flex;flex-direction:column}.chapter-kicker{display:flex;align-items:center;gap:15px;font-size:.8125rem;color:var(--muted)}.day-label{display:inline-flex;align-items:center;font-family:Arial,sans-serif;color:var(--teal);font-size:.75rem;font-weight:700;letter-spacing:.1em;white-space:nowrap}.chapter-kicker .day-label{padding:7px 9px;background:#e6f1ee;border-radius:5px}.start-content h2{font-weight:500;font-size:clamp(1.8rem,3vw,2.1rem);line-height:1.65;margin:27px 0 18px;letter-spacing:.06em}.intro-copy{font-size:.9375rem;color:var(--muted);line-height:2}.day-route{display:flex;align-items:center;gap:9px;margin:26px 0 32px;color:var(--teal);font-size:.875rem}.day-route i{height:1px;background:#96bdbd;flex:1;max-width:34px}.primary,.secondary{width:100%;min-height:56px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;padding:14px 18px;line-height:1.6}.primary{background:var(--pink);color:#fff;box-shadow:0 6px 20px #b32e5d18}.primary .icon{margin-left:auto}.primary:not(:has(.icon)){text-align:center}.secondary{background:#eaf2ef;color:var(--teal);margin-top:12px}.resume-info{font-size:.75rem;text-align:center;margin:9px 0 0;color:var(--muted)}.start-foot{margin-top:26px;color:var(--muted);font-size:.8125rem}.start-foot>span{display:flex;align-items:center;gap:5px;margin-bottom:14px}.start-foot .icon{width:17px;height:17px;color:var(--teal)}.start-foot p{font-size:.875rem}.page-footer{text-align:center;font-size:.75rem;padding:0 16px 24px;color:var(--muted)}.conversation-column{display:flex;flex-direction:column;min-width:0}.journey{display:flex;align-items:center;gap:15px;margin:24px 28px 0}.journey-track{height:3px;flex:1;background:#d9e6e1;border-radius:9px;overflow:hidden}.journey-track>span{display:block;height:100%;background:var(--teal);transition:width .3s}.progress-number{font-size:.75rem;font-family:Arial,sans-serif;color:var(--muted)}.stats{display:flex;align-items:center;gap:15px;font-size:.75rem;padding:18px 28px;border-bottom:1px solid var(--line)}.stats>span{display:flex;align-items:center;gap:6px}.stats .icon{width:16px;height:16px;color:var(--teal)}.stats .affinity-stat .icon{color:var(--pink)}.stats strong{font-family:Arial,sans-serif;font-size:1rem;margin-left:2px}.stats small{color:var(--muted);font-size:.75rem}.stats .saved-indicator{margin-left:auto;font-size:.75rem;color:var(--muted)}.conversation-body{padding:28px;flex:1}.tiny-label{font:.75rem/1.5 Arial,sans-serif;letter-spacing:.12em;color:var(--teal)}.scene-heading{margin-bottom:26px}.scene-heading h2{margin-top:7px;font-size:1.0625rem}#dialogue-title:focus{outline:none}.dialogue{padding:20px;border:1px solid var(--line);border-radius:0 var(--radius-lg) var(--radius-lg);background:var(--soft)}.dialogue.narration{padding:6px 0;background:transparent;border:0}.speaker{font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:6px;color:var(--teal);margin-bottom:10px}.speaker>span:last-child{margin-left:auto;font-size:.75rem;color:var(--muted);font-weight:400}.speaker-dot{width:6px;height:6px;border-radius:100%;background:var(--pink)}.dialogue p{font-size:1rem;line-height:1.95;letter-spacing:.02em;overflow-wrap:anywhere}.narration p{color:#425f65}.portrait-caption{position:absolute;bottom:66px;left:32px;right:24px;color:#fff;display:flex;flex-direction:column}.chapter-label{font-family:Arial,sans-serif;font-size:.75rem;letter-spacing:.13em;color:#d4efed}.may-name{font-family:Georgia,serif;font-size:3.625rem;margin:12px 0 2px;line-height:1.2}.may-name small{font-family:Hiragino Kaku Gothic ProN,sans-serif;font-size:.8125rem;margin-left:13px;vertical-align:middle}.mood-label{font-size:.875rem;color:#f5ebee}.lesson{margin-top:20px}.lesson-label{font-size:.8125rem;color:var(--teal);display:flex;align-items:center;gap:8px;margin-bottom:10px}.lesson-label .icon{width:17px;height:17px}.phrase-card{display:flex;align-items:center;gap:9px;background:#edf5f2;padding:14px 12px 14px 17px;border-radius:var(--radius-md);border:1px solid #d4e5de}.phrase-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-align:left}.thai{font-family:Thonburi,Noto Sans Thai,Tahoma,sans-serif;font-size:1.4375rem;line-height:1.6;color:var(--teal);overflow-wrap:anywhere}.reading{font-size:.75rem;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}.translation{font-size:.875rem;line-height:1.6;color:var(--ink)}.audio-button{width:44px;min-height:44px;flex:0 0 44px;align-self:center;color:var(--teal);background:#e0eee9;border:1px solid #c7ddd5;border-radius:50%;display:grid;place-items:center}.audio-button .icon{width:20px;height:20px}.choice-area{margin-top:22px}.choice-prompt{font-size:.875rem;margin-bottom:11px;font-weight:600}.choices{display:grid;gap:10px}.choice-row{display:flex;border:1px solid #c2d4ce;border-radius:var(--radius-md);background:#fff;padding-right:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s}.choice-row:has(.choice:hover),.choice-row:has(.choice:focus-visible){border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);background:#f2f8f5}.choice{display:flex;flex:1;min-width:0;align-items:center;gap:12px;padding:11px 8px 12px 15px;text-align:left;background:transparent}.choice-number{font:.75rem Arial,sans-serif;color:var(--teal);flex:0 0 auto}.choice .thai{font-size:1.3125rem}.choice-hint{font-size:.75rem;color:var(--muted);margin-top:9px}.next-area{margin-top:28px}.beat-indicator{display:block;font:.75rem Arial,sans-serif;text-align:center;color:var(--muted);margin-top:12px}.selected-phrase{margin-bottom:18px}.selected-phrase>p{font-size:.75rem;color:var(--muted);margin-bottom:7px}.compact{padding-top:8px;padding-bottom:8px}.compact .thai{font-size:1.25rem}.reaction{color:var(--pink);font-size:.8125rem;line-height:1.8;margin-top:16px}.reaction .icon{height:16px;width:16px;margin-right:4px}.reaction>span{display:block;font-size:.75rem;color:var(--muted);padding-left:23px}.bottom-nav{display:flex;border-top:1px solid var(--line);padding:7px 10px max(7px,env(safe-area-inset-bottom));background:var(--paper)}.bottom-nav button{display:flex;min-height:48px;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:3px;background:transparent;font-size:.75rem;color:var(--muted);border-radius:var(--radius-sm)}.bottom-nav .icon{height:20px;width:20px}.bottom-nav b{font-size:.75rem;color:var(--teal)}.storage-warning{background:#fff2d8;border-radius:var(--radius-sm);font-size:.8125rem;line-height:1.75;padding:12px;color:#784710;margin:15px 0}#toast{position:fixed;z-index:100;left:50%;bottom:max(85px,calc(80px + env(safe-area-inset-bottom)));transform:translate(-50%,15px);opacity:0;pointer-events:none;max-width:430px;width:calc(100% - 32px);background:#143d46;color:#fff;border:1px solid #779296;border-radius:var(--radius-md);box-shadow:0 5px 25px #09293026;padding:14px 18px;font-size:.875rem;line-height:1.7;transition:opacity .15s,transform .15s}#toast.visible{opacity:1;transform:translate(-50%)}dialog{color:var(--ink);border:0;border-radius:22px;padding:0;width:min(520px,calc(100vw - 32px));max-height:85dvh;background:var(--paper);box-shadow:0 20px 80px #09292d55;overscroll-behavior:contain}dialog::backdrop{background:#0a293b80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}body:has(dialog[open]){overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 12px 23px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:1}.panel-header h2{font-size:1.0625rem}.panel-content{padding:22px;padding-bottom:max(28px,env(safe-area-inset-bottom))}.panel-intro{font-size:.875rem;color:var(--muted);margin-bottom:20px}.word-entry,.history-entry{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.word-entry>p,.history-reply{font-size:.875rem;margin-top:10px}.word-memory{display:block;margin-top:10px;font-size:.75rem;color:var(--teal)}.history-entry>.tiny-label{display:block;margin-bottom:10px}.history-gain{font-size:.75rem;color:var(--pink);margin-top:8px}.empty-state{padding:40px 15px;border:1px dashed #bbcfc9;border-radius:var(--radius-md);font-size:.875rem;line-height:1.9;text-align:center}fieldset{border:0;margin:0;padding:0}legend{font-weight:600;margin-bottom:12px}.radio-row{display:flex;gap:12px;align-items:center;min-height:68px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);margin-top:10px;cursor:pointer;font-size:.875rem}.radio-row:has(input:checked){border-color:var(--teal);background:#ecf5f1}.radio-row input{accent-color:var(--teal);width:20px;height:20px;flex-shrink:0}.radio-row small{display:block;font-size:.75rem;color:var(--muted);margin-top:4px}.settings-audio,.settings-save{border-top:1px solid var(--line);margin-top:26px;padding-top:24px}.settings-audio>p,.settings-save>p{font-size:.875rem;color:var(--muted);margin:12px 0}.small-print{font-size:.75rem!important;color:var(--muted);line-height:1.85;margin-top:16px}.text-button{width:100%;min-height:48px;text-decoration:underline;background:transparent;font-size:.875rem;color:var(--muted);margin-top:10px}.summary>h2{font-size:1.4375rem;margin-top:12px}.ending-label{font-size:.875rem;color:var(--pink);margin-top:8px}.keepsake{border:1px solid #d8e7df;background:#eff5f1;padding:22px;margin:24px 0;border-radius:var(--radius-md);text-align:center}.keepsake .icon{color:var(--pink);display:block;margin:0 auto 9px}.keepsake>span{font-size:.75rem;color:var(--teal)}.keepsake p{font-size:1rem;margin-top:9px}.summary-stats{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin:20px 0}.summary-stats>div+div{border-left:1px solid var(--line)}.summary-stats strong{display:block;font:2.125rem Georgia,serif;color:var(--teal)}.summary-stats span{display:block;font-size:.75rem;margin-top:7px;color:var(--muted)}.summary-note{font-size:.875rem;color:var(--muted);margin:20px 0}.demo-end{font-size:.75rem;color:var(--muted);margin-top:18px}@media(min-width:741px){.play-shell .visual-column{min-height:780px}.play-shell .portrait{position:sticky;top:0;height:min(850px,100svh);min-height:650px}.play-shell .desktop-note{position:sticky;bottom:0}.bottom-nav{margin-top:auto}.conversation-body{min-height:590px}}@media(max-width:1100px)and (min-width:741px){.game-shell{margin:8px 20px 24px;grid-template-columns:46% 54%}.start-content{padding:44px 30px 32px}.cover-title{left:26px}.cover-title h1{font-size:4.2rem}.portrait{min-height:680px;background-size:cover,auto 100%,cover}.conversation-body{padding:24px}.stats{padding:16px 24px;gap:10px}.stats .saved-indicator{display:none}}@media(max-width:740px){.topbar{min-height:60px;padding:max(6px,env(safe-area-inset-top)) 18px 6px;background:var(--paper)}.wordmark{font-size:1.3125rem;gap:7px}.wordmark span{font-size:.9375rem}.game-shell{display:block;border:0;border-radius:0;margin:0;box-shadow:none}.portrait{height:340px;min-height:0;background-size:cover,300% auto,cover;background-position:center,var(--position) 24%,center 12%}.home-portrait{height:clamp(360px,52svh,470px);min-height:24rem;background-position:center,var(--position) 14%,center 8%}.home-portrait:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#4dc9c0,#e78ca7)}.location-label{top:16px;left:18px;right:18px;padding:8px 10px;font-size:.75rem}.location-time{font-size:.75rem}.cover-title{left:24px;bottom:24px}.cover-title h1{font-size:clamp(3rem,15vw,3.7rem);margin:12px 0 14px}.eyebrow{font-size:.75rem;letter-spacing:.13em}.cover-title p{font-size:.8125rem}.desktop-note{display:none}.start-content{padding:26px 24px 25px}.start-content h2{font-size:1.4375rem;line-height:1.55;margin:19px 0 12px}.start-content h2 br{display:none}.intro-copy{font-size:.875rem}.intro-copy br{display:none}.day-route{margin:20px 0 24px}.start-actions{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:2}.start-foot{margin-top:20px}.start-foot>span{margin-bottom:7px}.start-foot p{font-size:.75rem}.page-footer{background:var(--paper);padding-bottom:max(24px,env(safe-area-inset-bottom))}.portrait-caption{bottom:24px;left:23px}.chapter-label{display:none}.may-name{font-size:2.6875rem;margin:0 0 3px}.may-name small,.mood-label{font-size:.75rem}.conversation-column{border-radius:20px 20px 0 0;margin-top:-13px;position:relative;background:var(--paper);min-height:45svh}.journey{margin:19px 23px 0}.stats{padding:13px 23px 14px;gap:14px;font-size:.75rem}.stats strong{font-size:.9375rem}.stats small,.stats .saved-indicator{font-size:.75rem}.conversation-body{padding:20px 22px 24px}.scene-heading{margin-bottom:17px}.scene-heading h2{font-size:1rem;margin-top:5px}.tiny-label{font-size:.75rem}.dialogue{padding:16px;border-radius:0 16px 16px}.dialogue p{font-size:1rem;line-height:1.85}.speaker{font-size:.8125rem}.speaker>span:last-child{font-size:.75rem}.next-area{margin-top:22px}.next-button{min-height:54px}.bottom-nav{position:sticky;bottom:0;z-index:5;box-shadow:0 -5px 18px #123e4706}.choice{padding:10px 8px 10px 12px;gap:10px}.choice .thai{font-size:1.25rem}.choice .translation{font-size:.8125rem}.choice-row{padding-right:9px}.choice .reading{font-size:.75rem}.choices{gap:9px}.choice-area{margin-top:19px}.choice-prompt{font-size:.8125rem}.choice-hint{font-size:.75rem}.lesson{margin-top:18px}.phrase-card{padding:11px 10px 11px 14px}.thai{font-size:1.375rem}.reading,.reaction{font-size:.75rem}.selected-phrase{margin-bottom:16px}dialog{width:100%;max-height:88dvh;margin:auto 0 0;border-radius:22px 22px 0 0}.panel-content{padding:22px;padding-bottom:max(30px,env(safe-area-inset-bottom))}}@media(max-width:360px){.topbar{padding-left:14px;padding-right:10px}.wordmark{font-size:1.25rem}.wordmark span{font-size:.8125rem}.conversation-body{padding-left:16px;padding-right:16px}.stats{padding-left:17px;padding-right:17px;gap:9px}.stats .saved-indicator{display:none}.start-content{padding-left:20px;padding-right:20px}.cover-title h1{font-size:3.3rem}.portrait{height:310px}.home-portrait{height:380px}.speaker>span:last-child{font-size:.75rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.icon-button{flex-shrink:0}.stats,.chapter-kicker,.speaker{flex-wrap:wrap}.cover-title{overflow-wrap:anywhere}