/* Coral, water, milk-white. Original light-and-water art; no external dependencies. */
:root{--ink:#2c2c2c;--paper:#fbfcfa;--cream:#f7e3e0;--muted:#555a58;--line:#b8b5af;--warm:#a53e32;--cool:#276961;--coral:#e1988b;--rose:#cda59f;--mint:#c9e7e2;--comfort-paper:#fbfcfa;--comfort-ink:#2c2c2c;--comfort-accent:#276961}
body{color:var(--ink);background:var(--paper)}
::selection{background:#276961;color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #276961;outline-offset:5px}
/* Keep reading surfaces quiet. Color belongs to the experience, not every card. */
.guide-page,.quiz-page{--cool:#e7f3f0}
.learn-hero,.profile-hero{background:linear-gradient(125deg,#f7e3e0aa,transparent 65%);border-radius:0}
.guide-card,.supplement-card{background:#fff;border-color:#bac9c3}
.guide-conclusion{background:#edf5f2}
#top.hero{background:#edd3cc;min-height:min(960px,100svh);padding-top:132px}
#top.hero::before{background:radial-gradient(ellipse at 83% 25%,#fbfcfae8 0,transparent 44%),radial-gradient(ellipse at 2% 90%,#e1988b9c 0,transparent 66%),linear-gradient(120deg,#e8c2bb 10%,#f7e3e0 75%,#d8ece6)}
#top .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);padding-block:35px 76px}
#top .hero-copy{z-index:2}
#top .hero-catch{font-weight:700;font-size:clamp(3.5rem,7.2vw,6.5rem);letter-spacing:-.065em;line-height:1.28}
#top .hero-catch b{font-weight:700}
#top .hero-first{font-weight:500}
#top .hero-kicker{font-weight:500;letter-spacing:.1em}
#top .hero-subject,#top .hero-definition{color:#363333}
#top .hero-visual{margin-top:32px;padding:32px 14px 26px;border:0;border-radius:48% 48% 18px 18px;background:linear-gradient(145deg,#ffffff78,#ffffff0a 58%,#d3ebe354);box-shadow:inset 0 1px 0 #ffffffe0,0 25px 70px #9e68651a;overflow:visible}
#top .hero-visual::before{inset:4% 12% 20%;border-radius:50%;background:radial-gradient(ellipse at 27% 20%,#ffffffc9,transparent 58%);transform:none;animation:none}
#top .visual-overline{text-align:center;font-weight:500;letter-spacing:.1em;font-size:.625rem}
#top .sensation-pair{gap:5px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);margin:35px 0 26px}
#top .sensation-token svg{background:transparent;overflow:visible;filter:drop-shadow(0 18px 12px #7957541b)}
#top .sensation-token:first-child svg>circle{fill:url(#sanrei-warm-glass);stroke:#a562575e;stroke-width:.8}
#top .sensation-token:last-child svg>circle{fill:url(#sanrei-cool-glass);stroke:#357a705e;stroke-width:.8}
#top .token-bubbles{fill:#ad5749;stroke:#fff8;stroke-width:.7}
#top .token-bubbles circle:nth-child(3n){fill:#fdfcf8;stroke:#a9665688}
#top .token-ripples{stroke:#32776c;stroke-width:1}
#top .pair-arrow{color:#535956;font-weight:400}
#top .sensation-token figcaption{font-weight:400;font-size:.875rem}
#top .sensation-token figcaption span{font-weight:700;font-size:clamp(1.05rem,1.6vw,1.5rem);letter-spacing:-.035em}
#top .visual-note{color:#55504f;font-size:.6875rem}
.hero-places.action-primary,.action-primary{background:#2c2c2c;border-color:#2c2c2c;color:#fff;border-radius:999px}
.action-secondary{border-color:#777d76;border-radius:999px}
.menu-button{background:#2c2c2c;border-color:#ffffff80;box-shadow:0 5px 20px #49373112}
.motion-toggle{border-color:#82736f;border-radius:999px;background:#ffffff30}
.everyday{background:linear-gradient(180deg,#fbfcfa,#fbfcfa 58%,#f7e3e070)}
.everyday h2,.about-copy h2,.try-section>h2,.hydration h2,.curiosity>h2,.places-heading h2,.invitation h2{font-weight:700;letter-spacing:-.045em}
.everyday-scenes>li,.everyday .rest-details{border-color:#bcb7b2}
.about-section{background:radial-gradient(ellipse at 90% 55%,#c9e7e25c,transparent 55%),linear-gradient(145deg,#f7e3e0 0%,#fbfcfa 74%)}
.about-grid{padding-right:0;gap:clamp(38px,6vw,90px);align-items:center}
.vertical-thought{display:none}
.experience-panel{margin-top:30px;padding:30px;border:1px solid #ffffffb3;border-radius:28px;box-shadow:0 24px 65px #73605712,inset 0 1px 0 #fff}
.experience-panel[data-mode='carbon']{background:linear-gradient(140deg,#fffaf6e8,#f0c9bfaa);border-color:#cda59f}
.experience-panel[data-mode='cold']{background:linear-gradient(140deg,#fbfffee8,#c9e7e2d9);border-color:#a0c4bc}
.experience-panel .chapter-word{font-weight:400;font-size:clamp(2.5rem,5vw,4.5rem);color:#8b6259;letter-spacing:-.055em}
.experience-panel[data-mode='cold'] .chapter-word{color:#34685f}
.body-fill,.experience-panel[data-mode='cold'] .body-fill{fill:url(#sanrei-body-glass)}
.body-outline{stroke:#8f6e6370;stroke-width:1.1}
.body-label-ground{fill:#fffdf8e6}
.body-label,.diagram-label{fill:#343936}
.outer-particles{fill:#aa5647}
.inner-particles{fill:#387b6f}
.inner-waves circle{stroke:#45887b;stroke-width:1.3}
.skin-label path{stroke:#73645f}.skin-label text{fill:#45413e}
.bath-button{border-color:#8d9086;border-radius:999px;font-weight:600}
.bath-button[aria-pressed='true']{background:#2c2c2c;color:#fff;border-color:#2c2c2c}
.bath-button .button-dot{background:currentColor}
.panel-top{border-color:#a8b1a5}.diagram-note,.interaction-hint{color:#4e5551}
.editorial-photo.parallax-ready,.parallax-ready figcaption{background:#fbfcfa}
.manifesto{background:#d7e9e2;color:#2c2c2c}
.manifesto-stage{background:linear-gradient(135deg,#edbeb5 0%,#f3dcd5 35%,#d4e9e2 72%,#c9e7e2)}
.manifesto-stage::before{background:radial-gradient(ellipse at 0 100%,#e1988b,transparent 65%);opacity:.42}
.manifesto-stage::after{background:radial-gradient(ellipse at 100% 0,#fff,transparent 65%);opacity:.75}
.manifesto-title{font-weight:700;text-shadow:0 2px 0 #ffffff50}
.manifesto-top,.manifesto-bottom{border-color:#7f9a906e}
.manifesto-top::after{background:#35766a}.manifesto-note{color:#535b54}
.try-section{background:#fbfcfa}
.ritual-warm{background:radial-gradient(circle,#efc1b5,transparent 72%)}
.ritual-warm i{background:#a95443}
.ritual-cold{background:radial-gradient(circle,#c9e7e2,transparent 72%)}
.ritual-cold i{border-color:#45887b}
.ritual-rest{background:radial-gradient(circle,#ece6db,transparent 72%)}
.hydration{background:linear-gradient(145deg,#dbeee8,#edf5ef 55%,#fbfcfa)}
.water-plan,.water-plan>div+div,.rest-details{border-color:#9fb4aa}
.water-plan>div::after{background:#45887b}
.supplement-card{border-radius:8px;box-shadow:0 9px 24px #54796908}
.places{background:#fbfcfa}
.place,.hall-card{border-color:#b7bdb4}
.place:hover,.place:focus-within{background:#edf5f0;border-color:#438475}
.places-swipe-button{background:#fbfcfa;color:#2c2c2c}
.invitation{background:#ecc2b7;color:#2c2c2c}
.invitation .action-primary{background:#2c2c2c;border-color:#2c2c2c;color:#fff}
.invitation .action-secondary{border-color:#776861}
.invitation::before{border-color:#fff9;box-shadow:0 0 0 7vw #ffffff1c,0 0 0 14vw #ffffff12}
.curiosity,.references{background:#fbfcfa}
footer,.site-footer{color:#2c2c2c;border-color:#c5d0c7;background:linear-gradient(110deg,#f7e3e0,#fbfcfa 55%,#e2f0ea)}
footer a,footer a:visited{color:inherit}
@media(max-width:900px){#top .hero-grid{gap:32px}#top .hero-visual{padding-inline:10px}.experience-panel{padding:24px}}
@media(max-width:740px){#top.hero{padding-top:116px;min-height:0}#top .hero-grid{display:block;padding-block:20px 40px}#top .hero-catch{font-size:clamp(3rem,13vw,5rem);line-height:1.28}#top .hero-visual{margin-top:48px;padding:32px 16px 24px;border-radius:42% 42% 20px 20px}#top .sensation-pair{margin-top:26px;gap:6px}#top .sensation-token figcaption span{font-size:clamp(1.125rem,4.8vw,1.5rem)}.about-grid{grid-template-columns:1fr;gap:40px}.experience-panel{margin-top:0;padding:24px 18px}.manifesto-title{font-weight:700}.action-primary,.action-secondary{padding-inline:22px}}
@media(prefers-reduced-motion:reduce){.experience-panel,.sensation-token svg{transition:none}#top .hero-visual::before{animation:none}}
:root[data-motion='paused'] .experience-panel,:root[data-motion='paused'] .sensation-token svg{transition:none}
@media print{#top.hero,.about-section,.hydration,.manifesto-stage,.invitation,footer{background:#fff;color:#000}.hero-visual,.experience-panel{box-shadow:none}.sensation-token svg{filter:none}}

/* Responsive finishing layer: preserve the editorial layout, let content reflow. */
.wrap{max-width:1200px;width:calc(100% - max(clamp(20px,4vw,56px),env(safe-area-inset-left)) - max(clamp(20px,4vw,56px),env(safe-area-inset-right)))}
.hero-grid>*,.profile-heading>*,.editorial-row>*,.bridge>*,.course-grid>*,.answer-option>*,.activity-list a>*,.work-list>div>*{min-width:0}
.hero-copy,.profile-heading,.editorial-row,.bridge,.question-title,.answer-option,.result-card,.site-footer,footer{overflow-wrap:anywhere}
.profile-heading h1{white-space:normal}
.global-nav a,.header-back,footer a,.footer-links a,.facility-table-scroll a{min-height:44px;display:inline-flex;align-items:center}
.global-nav,.footer-links{row-gap:8px}
.site-footer,footer{column-gap:24px;row-gap:12px}
.site-footer>*,footer>*{min-width:0;max-width:100%}
.site-footer,.site-footer a,footer>span,footer .footer-en{font-size:max(.75rem,12px);line-height:1.8}
.search-tools input,.search-tools select{font-size:1rem}
.search-tools label{min-width:min(190px,100%)}
.actions>.button,.quiz-controls .button,.action-primary,.action-secondary{max-width:100%;white-space:normal;text-align:center}
.result-score{flex-wrap:wrap}
#top.hero{padding-top:calc(132px + env(safe-area-inset-top))}
#top .sensation-token{min-width:0}
#top .sensation-token svg{max-width:100%;height:auto}
#top .sensation-token figcaption{overflow-wrap:anywhere}
/* Match the existing single-column breakpoint, including its higher-specificity theme rules. */
@media(max-width:899px){
 #top .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:600px;gap:40px;padding-block:20px 40px}
 #top .hero-catch{font-size:clamp(3rem,10vw,5rem)}
 #top .hero-visual{margin-top:0;max-width:540px;width:100%;justify-self:center}
 .learn-hero .hero-grid,.quiz-hero .hero-grid,.profile-heading{grid-template-columns:minmax(0,1fr);gap:32px}
 .quiz-number{font-size:6rem;display:flex;align-items:baseline;gap:12px;padding-top:0}
 .quiz-number small{font-size:.875rem}
}
@media(max-width:740px){
 #top.hero{padding-top:calc(116px + env(safe-area-inset-top))}
 #top .hero-catch{font-size:clamp(2.75rem,13vw,5rem)}
 #top .hero-visual{margin-top:8px}
 .site-header .brand{line-height:1.5}
}
@media(max-width:600px){
 .course-grid{grid-template-columns:minmax(0,1fr)}
 .course{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
 .course input,.course b{margin:0}
 .course small{grid-column:2 / 4;font-size:.75rem}
 .course strong{font-size:1rem}
 .answer-option{align-items:flex-start}
 .answer-key{margin-top:2px}
 .actions>.button,.quiz-controls .button{width:100%;min-width:0;justify-content:center}
 footer,.site-footer{flex-direction:column;align-items:flex-start}
 footer .footer-en{margin-left:0}
 .footer-links{width:100%;gap:4px 20px}
 .profile-heading h1{font-size:clamp(2.75rem,12vw,4.5rem)}
 .activity-list a{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
}
/* Short landscape screens should scroll naturally, not crop full-height scenes. */
@media(max-height:500px) and (orientation:landscape){
 #top.hero{min-height:0}
 #top .hero-grid{padding-bottom:32px}
 .manifesto.scroll-ready{height:auto;min-height:0}
 .manifesto.scroll-ready .manifesto-title{animation:none!important;transform:none!important}
 .manifesto.scroll-ready .manifesto-stage{position:relative;height:auto;min-height:100svh;padding-block:28px}
 .editorial-photo.parallax-ready{height:auto;min-height:0}
 .parallax-ready .photo-stage{position:relative;height:auto;min-height:0}
 .parallax-ready picture{height:auto}
 .parallax-ready img{height:auto;aspect-ratio:16/9;transform:none}
}
@media print{
 .wrap{width:100%;max-width:none}
}