/* UI and headlines stay still. Only the light behind them changes. */
:root{--night:#0c1524;--paper:#fff8eb;--muted:#bcc4cf;--amber:#f29441;--glow:#fcebba;--line:#fff0cf26;--sans:"Zen Kaku Gothic New","Yu Gothic",sans-serif;--side:clamp(24px,6vw,100px)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);color:var(--paper);font-family:var(--sans);scroll-behavior:smooth;scroll-padding-top:96px}
body{-webkit-font-smoothing:antialiased}
::selection{background:var(--glow);color:var(--night)}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}ul{list-style:none}button{font:inherit}
h1,h2,h3{font-weight:500;letter-spacing:.015em;text-wrap:balance}
/* Short copy breaks only at punctuation, spaces and <wbr>; anywhere is kept as a guard against overflow. */
h1,h2,h3,summary,dt,blockquote,.feature-label{word-break:keep-all;overflow-wrap:anywhere}
/* Body text avoids a short last line; site.js also keeps each sentence's last five characters together, so no lone "す。". */
p,dd,li{text-wrap:pretty}.nowrap{white-space:nowrap}
a:focus-visible,button:focus-visible{outline:2px solid var(--glow);outline-offset:6px}
.skip-link{position:fixed;top:12px;left:12px;z-index:100;padding:12px 20px;background:var(--paper);color:var(--night);transform:translateY(-180%)}
.skip-link:focus{transform:none}
.site-header{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--side)}
.site-header{isolation:isolate}
.brand{display:flex;align-items:center;min-height:44px}.brand-wordmark{width:148px}
.header-nav{display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500;text-shadow:0 1px 8px #030812}
.header-nav>a:not(.nav-download){color:var(--paper)}
.nav-download{display:flex;align-items:center;gap:22px;border-bottom:1px solid #fcebba77;padding:10px 0}
.nav-download:hover,.text-link:hover{color:var(--glow);border-color:var(--glow)}

.eyebrow{display:flex;align-items:center;gap:10px;color:var(--glow);font-size:12px;font-weight:500;letter-spacing:.1em;line-height:1.8}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:116px var(--side) 0}
.hero-room{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#0c1524 5%,#0c1524ef 35%,#0c1524b3 73%,#0c152499),linear-gradient(0deg,#0c1524,transparent 45%),url('images/home-with-time.webp') center/cover}

.hero-inner{max-width:1240px;margin:auto;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:55px;align-items:center;padding-bottom:45px}
.hero-copy{grid-column:1;grid-row:2}
h1{margin-top:0;font-size:clamp(42px,3.65vw,56px);line-height:1.5;letter-spacing:.01em}h1 em{font-style:normal;color:var(--glow);white-space:nowrap}.mobile-break{display:none}
.hero-core{font-size:17px;margin-top:30px;line-height:1.9}.hero-description{color:var(--muted);font-size:14px;line-height:2;margin-top:16px}
/* The phone fits under the fixed header on common laptop heights; the copy centers on it. */
.hero-product{grid-column:2;grid-row:1/5;justify-self:center;width:clamp(280px,calc((100svh - 160px) / 2.1),390px);max-width:100%}
/* Every capture is the bare screen; one thin frame without a camera is drawn around it, so no phone model is implied.
   The frame sits in the margin, so a figure keeps its width; overlays are placed in the screen's own proportions. */
.hero-product,.app-capture{container-type:inline-size}
.screen-image{position:relative;display:block;margin:2.6cqw;border-radius:10.5cqw;overflow:hidden;background:#0a1626;box-shadow:0 0 0 2.6cqw #070b12,0 0 0 calc(2.6cqw + 1px) #e8eef724,0 24px 34px 2.6cqw #02070f59}
.screen-image img{display:block;width:100%;height:auto}
.hero-product figcaption,.app-capture figcaption{font-size:12px;text-align:center;margin-top:20px;line-height:1.8;color:#d4d9df}
.hero-product figcaption small,.app-capture figcaption span{display:block;font-size:10px;color:#a9b3c2;margin-top:5px}
.hero-actions{grid-column:1;grid-row:3}
.store-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.store-btn{display:flex;align-items:center;gap:10px;border:1px solid #fff8e86b;background:#0b1321;border-radius:9px;padding:11px 18px;min-width:168px;transition:background .2s,border-color .2s}
.store-btn:hover{border-color:var(--glow);background:#223046}.store-btn svg{width:26px;height:30px;fill:var(--paper);flex:none}.store-btn span{display:flex;flex-direction:column}
.store-btn small{font-size:8px;letter-spacing:.07em;line-height:1.4}.store-btn b{font-family:Arial,sans-serif;font-size:20px;line-height:1.3;font-weight:500}
.store-note{color:var(--muted);font-size:11px;margin-top:12px;letter-spacing:.06em}
.hero-bottom{max-width:1240px;margin:auto;border-top:1px solid var(--line);padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:11px;color:var(--muted);letter-spacing:.06em}
.hero-bottom a{display:flex;align-items:center;gap:28px;color:var(--paper)}
.section-shell{padding-inline:var(--side);max-width:1440px;margin-inline:auto}
.features{padding-top:100px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;max-width:1240px;margin:auto;padding-inline:var(--side)}
h2{font-size:clamp(36px,3.6vw,52px);line-height:1.5}.section-heading h2{margin-top:16px}
.section-heading>p{color:var(--muted);font-size:14px;line-height:2;padding-bottom:7px}
.feature-index{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;max-width:1240px;margin:42px auto 0;padding:23px var(--side);border-block:1px solid var(--line)}
.feature-index a{display:flex;align-items:center;gap:12px;font-size:12px;padding-block:7px}.feature-index a>span:first-child{color:var(--amber);font:10px Arial,sans-serif}.feature-index a:hover{color:var(--glow)}
.screens-note{max-width:1240px;padding-inline:var(--side);margin:15px auto 32px;font-size:10px;line-height:1.8;color:var(--muted)}
.feature{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:90px;padding:80px max(var(--side),calc((100vw - 1120px)/2));border-bottom:1px solid #fff0cf12}

.feature-art{position:relative;display:flex;justify-content:center}

.app-capture{width:390px;max-width:100%;position:relative}.feature-copy{min-width:0}
.feature-label{display:flex;align-items:center;gap:16px;color:var(--glow);font-size:13px;letter-spacing:.1em;margin-bottom:24px}
.feature-label span{color:#eea96a;font:11px Arial,sans-serif;padding-right:16px;border-right:1px solid var(--line)}
h3{font-size:clamp(32px,3.15vw,45px);line-height:1.55}
.feature-copy>p:not(.feature-label):not(.release-note){color:var(--muted);font-size:15px;line-height:2.1;margin-top:25px}
.feature-footnote{color:#c8cfd8;font-size:12px;line-height:1.9;padding-top:22px;margin-top:28px;border-top:1px solid var(--line)}.feature-footnote>span{color:var(--amber);margin-right:8px}
.text-link{display:inline-flex;align-items:center;gap:25px;font-size:12px;line-height:1.7;padding-block:10px;border-bottom:1px solid #fcebba55}.detail-link{margin-top:20px}
.feature-copy blockquote{font-size:20px;line-height:1.9;color:var(--glow);margin-top:32px}
.feature-reverse .feature-copy{grid-column:2;grid-row:1}.feature-reverse .feature-art{grid-column:1;grid-row:1}

.feature-living::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;background:linear-gradient(90deg,#0c1524 8%,#0c1524e6 45%,#0c1524bf 75%),url('images/home-with-time.webp') center/cover}


.release-note{display:inline-block;margin-bottom:20px;padding-bottom:7px;border-bottom:1px solid #f2944160;color:var(--glow);font-size:11px;line-height:1.7}
.world{position:relative;isolation:isolate;overflow:hidden;min-height:660px;display:flex;align-items:center}
.world>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;z-index:-3}
.world::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0c152414 10%,#0c1524c9 55%,#0c1524f5),linear-gradient(0deg,#0c1524,transparent 25%,transparent 85%,#0c152480)}

.world-copy{width:53%;margin-left:47%;padding:90px var(--side) 90px 20px}.world-copy h2{margin-top:24px;font-size:clamp(30px,2.8vw,41px);line-height:1.7}
.world-copy>p:not(.eyebrow){font-size:15px;line-height:2.2;color:#d1d6dd;margin-top:26px}.world-signature{display:block;font-size:12px;letter-spacing:.1em;color:var(--glow);margin-top:35px}
/* The last invitation stands in a lit entrance: copy sits over the shaded shoe cabinet, the hallway leads on to its right. */
.cta{position:relative;isolation:isolate;overflow:hidden;max-width:none;min-height:640px;display:flex;align-items:center;padding:150px max(var(--side),calc((100vw - 1120px)/2)) 130px}
.cta-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:-3;filter:brightness(1.32) saturate(1.05);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 180px);mask-image:linear-gradient(to bottom,transparent,#000 180px)}
.cta::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#0c1524c7 0%,#0c152480 32%,#0c15241a 54%,transparent 66%),linear-gradient(0deg,#0c1524,transparent 26%)}
.cta::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:66%;top:45%;width:760px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,#ffc57a24,transparent)}
.cta-content{max-width:640px;text-shadow:0 2px 14px #07102099}.cta h2{margin-top:0;word-break:keep-all;overflow-wrap:anywhere}.cta-content>p:not(.eyebrow):not(.store-note){margin-top:24px;color:#d7dce3;font-size:15px;line-height:2}
footer{border-top:1px solid var(--line);max-width:1440px;margin:auto;padding:42px var(--side) 32px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start}
/* Brand on the left; subpage links above the legal links on the right; copyright last. */
.footer-brand{grid-row:1/3}.footer-links{justify-content:flex-end}.footer-site .footer-links{color:var(--paper)}.copyright{grid-column:1/-1}.footer-links a:hover{color:var(--glow)}
.footer-brand .brand-wordmark{width:130px}.footer-links{display:flex;flex-wrap:wrap;gap:24px;color:var(--muted);font-size:11px}.copyright,.footer-note{color:var(--muted);font-size:10px;letter-spacing:.05em}.footer-note{text-align:right}
.page-hidden *,.page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
@media(min-width:1600px){.hero-room{background-position:center 58%}}
@media(max-width:1100px){
  .hero-inner{column-gap:35px;grid-template-columns:1.12fr 1fr}h1{font-size:45px}.hero-product{width:clamp(280px,calc((100svh - 160px) / 2.1),370px)}.hero-core{font-size:15px}.hero-description{font-size:13px}
  .store-btn{min-width:146px;padding-inline:12px}.store-btn b{font-size:18px}.feature{gap:45px}h3{font-size:clamp(28px,3.9vw,32px)}.feature-copy>p:not(.feature-label):not(.release-note){font-size:14px}.section-heading>p{font-size:12px}
}
@media(max-width:760px){
  :root{--side:24px}html{scroll-padding-top:84px}.site-header{padding:12px var(--side);gap:16px}.brand-wordmark{width:118px}.header-nav>a:not(.nav-download){display:none}.nav-download{font-size:11px;gap:12px}
  .hero{padding-top:124px}.hero-room{background:linear-gradient(#0c1524f5 10%,#0c1524cb 35%,#0c152480 60%,#0c1524 98%),url('images/home-with-time.webp') 62% center/cover}
  .hero-inner{display:flex;flex-direction:column;gap:30px;padding-bottom:36px}.hero-copy{width:100%}.eyebrow{font-size:10px;letter-spacing:.075em}
  h1{margin-top:0;font-size:clamp(29px,8.2vw,44px);line-height:1.5;letter-spacing:0}h1>br:first-child{display:none}.mobile-break{display:block}
  .hero-core{margin-top:18px;font-size:13px}.hero-description{display:none}.hero-product{width:360px;order:1}.hero-product figcaption{margin-top:14px}.hero-actions{align-self:center;text-align:center}.hero-actions .store-row{margin-top:0}
  .store-row{gap:10px}.store-btn{min-width:0;padding:10px 13px;gap:8px}.store-btn svg{width:23px;height:28px}.store-btn b{font-size:18px}.store-btn small{font-size:7px}.store-note{font-size:10px}
  .hero-bottom{padding-block:21px;font-size:10px;letter-spacing:0}.hero-bottom a{gap:10px}.features{padding-top:65px}.section-heading{display:block}h2{font-size:32px}.section-heading>p{font-size:13px;margin-top:22px}
  .feature-index{justify-content:flex-start;gap:8px 23px;padding-block:16px;margin-top:30px}.feature-index a{font-size:11px;gap:8px}.screens-note{font-size:9px;margin-bottom:10px}
  .feature{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:60px var(--side)}
  .feature-living::before{background:linear-gradient(#0c1524f5 12%,#0c1524c2 50%,#0c1524e0),url('images/home-with-time.webp') 65% center/cover}.feature-copy,.feature-art{width:100%}.feature-label{font-size:12px;margin-bottom:18px}
  .feature-copy,.feature-reverse .feature-copy{display:contents}.feature-art,.feature-reverse .feature-art{grid-column:1;grid-row:3;margin-block:30px 12px}.feature-label{grid-row:1}.feature h3{grid-row:2}.feature .detail-link{justify-self:start}
  h3{font-size:clamp(29px,7.5vw,40px);line-height:1.55}.feature-copy>p:not(.feature-label):not(.release-note){font-size:14px;margin-top:19px}.feature-footnote{margin-top:24px;padding-top:18px;font-size:11px}.feature-copy blockquote{font-size:18px;margin-top:24px}
  .detail-link{font-size:11px;margin-top:16px}.app-capture{width:340px}.app-capture figcaption{margin-top:18px;font-size:11px}.app-capture figcaption span{font-size:9px}.release-note{font-size:10px;margin-bottom:17px}
  .world{min-height:670px;align-items:flex-end}.world>img{object-position:28% center}.world::before{background:linear-gradient(0deg,#0c1524 0%,#0c1524f0 25%,#0c1524b3 50%,#0c152420 85%,#0c152477)}.world-copy{margin:0;width:100%;padding:260px var(--side) 55px}
  .world-copy h2{font-size:clamp(25px,6.8vw,36px);margin-top:18px}.world-copy>p:not(.eyebrow){font-size:13px;margin-top:20px}.world-signature{font-size:11px;margin-top:26px}
  .cta{min-height:0;display:block;text-align:center;padding:150px var(--side) 120px}.cta-photo{object-position:62% center;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 90px,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 90px,#000 calc(100% - 90px),transparent)}.cta::before{background:radial-gradient(ellipse 75% 45% at 50% 48%,#0c1524a6,transparent 75%),linear-gradient(0deg,#0c1524 0%,transparent 25%)}.cta::after{left:60%;top:30%;width:420px;height:340px}.cta-content{text-shadow:0 2px 12px #071020e6,0 0 28px #07102099}.cta-content{margin-inline:auto}.cta .store-row{justify-content:center}.cta h2{font-size:clamp(25px,7vw,34px);letter-spacing:0}.cta-content>p:not(.eyebrow):not(.store-note){font-size:13px}footer{grid-template-columns:1fr;gap:24px;padding-top:32px}.footer-brand{grid-row:auto}.footer-links{justify-content:flex-start}.footer-links{font-size:10px;gap:18px}.footer-note{display:none}
}
@media(max-width:360px){:root{--side:20px}.hero-core{font-size:12px}.store-btn{padding-inline:10px;gap:6px}.store-btn b{font-size:16px}.store-btn svg{width:21px}h3{font-size:26px}.feature-copy>p:not(.feature-label):not(.release-note),.cycle-copy>p:not(.eyebrow){font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* The two supplied references retain their own composition. */
:root{--serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif}



.cycle{position:relative;isolation:isolate;overflow:hidden;padding:56px clamp(24px,6.9vw,120px) 34px;background:linear-gradient(180deg,var(--night),#101e30 52%,var(--night))}
.cycle::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 77% 34%,#537b9b2b,transparent 48%),radial-gradient(ellipse at 25% 80%,#f2944110,transparent 43%);pointer-events:none}
.cycle-glass{position:relative;isolation:isolate;max-width:1520px;margin-inline:auto;padding:clamp(36px,4.8vw,72px);overflow:hidden;border:1px solid #dceaf338;border-radius:4px;background:linear-gradient(125deg,#d7e9f20d,#bacdd807 45%,#c4d8e80c);box-shadow:0 24px 80px #0c152440,inset 0 1px 0 #fcebba26}
.cycle-glass::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(118deg,transparent 35%,#e7f4ff05 49%,#e7f4ff0a 49.1%,transparent 64%);pointer-events:none}
.cycle-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:60px;max-width:1400px;margin:auto}
.cycle-head .eyebrow{text-transform:uppercase;letter-spacing:.24em;font:12px/1.8 var(--sans)}
.cycle-head .eyebrow::before{content:"";width:28px;height:1px;background:#fcebba80;margin-right:5px}
.cycle-head h2{font-size:44px;line-height:1.8;margin-top:28px}
.cycle-head>.lead{font-size:15px;line-height:2.25;letter-spacing:.045em;color:#b5c1cd;margin-top:26px}
.cycle .world-statement{font:22px/1.9 var(--serif);letter-spacing:.05em;color:var(--glow);margin-top:26px;word-break:keep-all;overflow-wrap:anywhere}
.cycle-figure{width:100%;max-width:440px;margin:auto;min-width:0}
.cycle-svg{width:100%;height:auto;display:block;overflow:visible}
.cycle-svg .arc{fill:none;stroke:#f294418c;stroke-width:1}
.cycle-svg .arrow{fill:none;stroke:#f2bc83;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
/* Opaque nodes let the orbiting light pass behind each word instead of over it. */
.cycle-svg .node circle{fill:#1f3043;stroke:#dceaf342;stroke-width:1}
.cycle-svg .node text{font:18px var(--serif);letter-spacing:.06em;fill:var(--paper)}
.cycle-svg .orbit{transform-origin:200px 200px;animation:orbit 30s linear infinite}
.cycle-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin:60px auto 0;max-width:1400px;border-top:1px solid #dceaf324;padding-top:38px;counter-reset:cycle}
.cycle-notes>div{counter-increment:cycle}
.cycle-notes dt{display:flex;align-items:center;gap:20px;font:22px var(--serif);letter-spacing:.1em}
.cycle-notes dt::before{content:"0" counter(cycle);font:12px var(--sans);color:var(--amber)}
.cycle-notes dd{margin-top:20px;font-size:15px;line-height:2;color:#b5c1cd}
@keyframes orbit{to{transform:rotate(360deg)}}

/* Each pair tells one sequence, with both screens kept completely visible. */
.feature-pair{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:50px;padding-inline:max(var(--side),calc((100vw - 1440px)/2))}
.feature-pair h3{font-size:clamp(28px,2.65vw,42px)}
.screen-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px}
.screen-pair .app-capture{width:100%;max-width:350px;justify-self:center}
.screen-pair figcaption{font-size:12px;margin-top:16px;line-height:1.8}

/* Let the room read as a warm, lived-in place. Shade is concentrated under copy. */
.hero-room{background:linear-gradient(90deg,#0c1524e8 0%,#0c1524b3 38%,#0c152433 73%,#0c152426),linear-gradient(0deg,#0c1524,transparent 27%),url('images/home-with-time.webp') center/cover}
.feature-living::before{background:linear-gradient(90deg,#0c1524eb 0%,#0c1524c2 30%,#0c15244d 64%,#0c152426),linear-gradient(0deg,#0c1524b3,transparent 35%),url('images/home-with-time.webp') center/cover}
.world::before{z-index:-2;background:linear-gradient(90deg,transparent 15%,#0c152482 57%,#0c1524b3),linear-gradient(0deg,#0c1524,transparent 24%,transparent 88%,#0c152426)}
.world-copy{text-shadow:0 2px 15px #071020b3}

/* Small, soft lights rise behind the content; neither text nor UI moves. */
.rising-lights{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.rising-lights i{position:absolute;left:var(--x);bottom:-32px;width:var(--size,6px);height:var(--size,6px);border-radius:50%;background:#ffedc5;box-shadow:0 0 10px 3px #ffd49b70,0 0 25px 8px #ffce8438;opacity:0;animation:light-rise var(--duration,14s) linear infinite;animation-delay:var(--delay,0s)}
.rising-lights i:nth-child(1){--x:6%;--duration:15s;--delay:-8s;--drift:30px}
.rising-lights i:nth-child(2){--x:18%;--size:4px;--duration:19s;--delay:-2s;--drift:-15px}
.rising-lights i:nth-child(3){--x:32%;--size:7px;--duration:17s;--delay:-12s;--drift:24px}
.rising-lights i:nth-child(4){--x:45%;--size:4px;--duration:13s;--delay:-5s;--drift:-25px}
.rising-lights i:nth-child(5){--x:58%;--duration:16s;--delay:-10s;--drift:18px}
.rising-lights i:nth-child(6){--x:71%;--size:5px;--duration:20s;--delay:-4s;--drift:-20px}
.rising-lights i:nth-child(7){--x:83%;--size:7px;--duration:14s;--delay:-11s;--drift:28px}
.rising-lights i:nth-child(8){--x:94%;--size:4px;--duration:18s;--delay:-7s;--drift:-30px}
.rising-lights i:nth-child(9){--x:52%;--size:3px;--duration:21s;--delay:-16s;--drift:35px}
@keyframes light-rise{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:.7}75%{opacity:.45}100%{opacity:0;transform:translate3d(var(--drift),-1100px,0)}}
html:not(.motion-ready) .rising-lights i,html:not(.motion-ready) .cycle-svg .orbit{animation:none}
.motion-ready .hero:not(.is-in-view) .rising-lights i,.motion-ready .feature:not(.is-in-view) .rising-lights i,.motion-ready .world:not(.is-in-view) .rising-lights i,.motion-ready .cycle:not(.is-in-view) .orbit{animation-play-state:paused}
@media(max-width:1100px){

  .feature-pair{gap:30px;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr)}.screen-pair{gap:16px}.feature-pair h3{font-size:28px}
  .cycle-layout{gap:30px}.cycle-head h2{font-size:36px}.cycle .world-statement{font-size:19px}.cycle-notes{gap:30px}.cycle-notes dd{font-size:14px}
}
@media(max-width:900px){
  .feature-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .feature-pair .feature-copy{display:contents}.feature-pair .feature-label{grid-row:1}.feature-pair h3{grid-row:2}
  .feature-pair .feature-art{grid-column:1;grid-row:3;margin-block:30px 8px;max-width:710px;justify-self:center}
}
@media(max-width:760px){


  .screen-pair{gap:12px}.screen-pair figcaption{font-size:10px;margin-top:12px}.feature-pair h3{font-size:clamp(26px,7.5vw,40px)}
  .cycle{padding:40px 18px}.cycle-glass{padding:32px 22px}.cycle-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .cycle-head h2{font-size:30px;line-height:1.7;margin-top:22px}.cycle-head .eyebrow{font-size:10px}.cycle-head>.lead{font-size:13px;line-height:2.1}
  .cycle .world-statement{font-size:18px;line-height:1.9}.cycle-figure{max-width:330px}.cycle-notes{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:30px;padding-top:28px}
  .cycle-notes dt{font-size:20px}.cycle-notes dd{font-size:13px;margin-top:12px}.cycle-notes dd br{display:none}
  .hero-room{background:linear-gradient(#0c1524de 8%,#0c152473 29%,#0c152426 60%,#0c1524 98%),url('images/home-with-time.webp') 62% center/cover}
  .hero-copy{text-shadow:0 2px 14px #07102090}
  .feature-living::before{background:linear-gradient(#0c1524d9 5%,#0c15244d 40%,#0c152459 70%,#0c1524d9),url('images/home-with-time.webp') 65% center/cover}
  .world::before{background:linear-gradient(0deg,#0c1524 0%,#0c1524cc 22%,#0c152480 47%,transparent 82%,#0c152426)}
}
@media(prefers-reduced-motion:reduce){.rising-lights i,.cycle-svg .orbit{animation:none!important}.rising-lights{display:none}}

/* A shared night background makes the room emerge and recede without a hard edge. */
.feature{border-bottom:0}

.feature-living{padding-block:150px}
.feature-living::before{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 220px,#000 calc(100% - 220px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 220px,#000 calc(100% - 220px),transparent)}
.cycle{padding-bottom:110px}
.cycle-head h2{margin-top:0}
.world{min-height:720px}
.world>img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 190px,#000 calc(100% - 100px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 190px,#000 calc(100% - 100px),transparent)}
.feature-footnote{font-size:14px}.detail-link{font-size:14px}
.feature-index a{font-size:14px}.feature-label{font-size:14px}
.footer-links{font-size:12px}.copyright{font-size:12px}
@media(max-width:760px){
  .feature-living{padding-block:100px}
  .feature-living::before{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 160px,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 160px,#000 calc(100% - 160px),transparent)}
  .cycle{padding-bottom:75px}.world>img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 140px,#000 calc(100% - 80px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 140px,#000 calc(100% - 80px),transparent)}
  .feature-label,.feature-index a{font-size:13px}.feature-footnote,.detail-link{font-size:13px}
  .feature-index{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:4px 12px}
}

/* After the room, each scene keeps the night but changes its light: a lamp for memories, the blue before dawn for plans, a starry sky for the day's card. Edges fade so no band starts abruptly. */
.feature-album::before,.feature-calendar::before,.feature-tarot::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 200px,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 200px,#000 calc(100% - 200px),transparent)}
.feature-album::before{background:radial-gradient(ellipse calc(36% * var(--bloom)) calc(60% * var(--bloom)) at 26% 50%,#f2944140,transparent 70%),radial-gradient(ellipse calc(42% * var(--bloom)) calc(48% * var(--bloom)) at 74% 50%,#fcebba17,transparent 70%),linear-gradient(90deg,#221c24,#1a1a26 55%,#121827)}
.feature-calendar::before{background:radial-gradient(ellipse calc(55% * var(--bloom)) calc(60% * var(--bloom)) at 70% 38%,#4f86b830,transparent 70%),radial-gradient(ellipse calc(35% * var(--bloom)) calc(45% * var(--bloom)) at 12% 70%,#7fb2d414,transparent 70%),linear-gradient(180deg,#0f1c2e,#132a42 55%,#0f1c2e)}
.feature-tarot::before{background:radial-gradient(circle 1.4px at 8% 14%,#fff8ebd9 60%,transparent),radial-gradient(circle 1px at 17% 31%,#fff8eb99 60%,transparent),radial-gradient(circle 1.6px at 29% 9%,#fcebbacc 60%,transparent),radial-gradient(circle 1px at 38% 24%,#fff8eb80 60%,transparent),radial-gradient(circle 1.2px at 45% 78%,#fff8eb99 60%,transparent),radial-gradient(circle 1px at 6% 62%,#fff8eb80 60%,transparent),radial-gradient(circle 1.5px at 22% 88%,#fcebbab3 60%,transparent),radial-gradient(circle 1px at 51% 12%,#fff8eb99 60%,transparent),radial-gradient(circle 1.3px at 90% 11%,#fff8ebb3 60%,transparent),radial-gradient(circle 1px at 95% 44%,#fff8eb80 60%,transparent),radial-gradient(circle 1.6px at 88% 84%,#fcebbacc 60%,transparent),radial-gradient(circle 1px at 58% 91%,#fff8eb80 60%,transparent),radial-gradient(circle 1.2px at 34% 54%,#fff8eb66 60%,transparent),radial-gradient(ellipse calc(34% * var(--bloom)) calc(52% * var(--bloom)) at 71% 50%,#8e7bd62e,transparent 70%),radial-gradient(ellipse calc(40% * var(--bloom)) calc(40% * var(--bloom)) at 22% 30%,#4f6fb81c,transparent 70%),linear-gradient(180deg,#0e1428,#131a3a 55%,#0e1428)}
/* Where scrolling can drive it, the light seeps in as a scene arrives and thins out as it leaves.
   The timeline is named on the section: its overflow:hidden would otherwise make view() track the section, not the page. */
@property --bloom{syntax:"<number>";inherits:false;initial-value:1}
@keyframes scene-bloom{0%{opacity:0;--bloom:.35}40%,62%{opacity:1;--bloom:1}100%{opacity:0;--bloom:1.25}}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.feature-album,.feature-calendar,.feature-tarot{view-timeline:--scene block}.feature-album::before,.feature-calendar::before,.feature-tarot::before{animation:scene-bloom linear both;animation-timeline:--scene;animation-range:cover 0% cover 100%}}}

@media(max-width:760px){.nav-download{font-size:13px}.hero{padding-top:104px}}

/* On phones a pair becomes one screen at a time. The next screen peeks in and the
   numbered steps above name the order, so the row reads as swipeable before it is touched. */
.pair-art{flex-direction:column;align-items:stretch;min-width:0}
.pair-steps{display:none}
@media(max-width:760px){
  .pair-steps{display:flex;align-items:center;gap:8px;margin-bottom:16px}
  .pair-steps button{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font-size:12px;letter-spacing:.04em;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
  .pair-steps button span{font:10px Arial,sans-serif;color:inherit}
  .pair-steps button[aria-pressed="true"]{color:var(--glow);border-color:#fcebba80;background:#fcebba0f}
  .pair-steps button[aria-pressed="true"] span{color:var(--amber)}
  .pair-steps i{font-style:normal;font-size:11px;color:#fcebba66}
  .pair-art .screen-pair{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--side)*-1);padding-inline:var(--side);scroll-padding-inline:var(--side)}
  .pair-art .screen-pair::-webkit-scrollbar{display:none}
  .pair-art .screen-pair .app-capture{flex:0 0 min(80%,300px);max-width:none;scroll-snap-align:start}
  .pair-art .screen-pair .app-capture:last-child{scroll-snap-align:end}
}

/* 今日の一枚 can be drawn on the page. The app's own choice screen is the frame; the screen area
   below its title is live, laid out in the app's proportions and sized to the phone (cqw). */
.tarot-phone{position:relative}
.tarot-screen{position:absolute;left:0;width:100%;top:14.609%;height:79.444%;container-type:inline-size;background:linear-gradient(#0d1f3c,#10294e 36.6%,#13305e 61%,#1a3d73)}
.tarot-deck{position:absolute;inset:0;perspective:1400px}
.tarot-card{position:absolute;top:24%;width:27%;aspect-ratio:2/3;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:left .8s cubic-bezier(.2,.7,.2,1),top .8s cubic-bezier(.2,.7,.2,1),width .8s cubic-bezier(.2,.7,.2,1),opacity .5s,translate .3s}
/* Before the draw, the three cards sit a little larger and lower than in the app, so the waiting screen is not half empty. */
.tarot-card:nth-child(1){left:5.5%}.tarot-card:nth-child(2){left:36.5%}.tarot-card:nth-child(3){left:67.5%}
.tarot-card:focus-visible{outline:2px solid var(--glow);outline-offset:4px;border-radius:6px}
.tarot-demo:not(.is-drawn) .tarot-card:hover,.tarot-demo:not(.is-drawn) .tarot-card:focus-visible{translate:0 -4%}
.tarot-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s .15s cubic-bezier(.3,.6,.2,1)}
.tarot-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4%;overflow:hidden;box-shadow:0 8px 20px #02070f66}
.tarot-face img{width:100%;height:100%;object-fit:cover}
.tarot-front{transform:rotateY(180deg)}
.tarot-card.is-picked{left:28%;top:1%;width:44%;cursor:default}
.tarot-card.is-picked .tarot-flip{transform:rotateY(180deg)}
.is-drawn .tarot-card:not(.is-picked){opacity:0;translate:0 6%;pointer-events:none}
.tarot-hint{position:absolute;top:58%;inset-inline:0;text-align:center;font-size:3.3cqw;letter-spacing:.08em;color:#d6dce6;transition:opacity .4s}
.is-drawn .tarot-hint{opacity:0}
.tarot-reading{position:absolute;top:41.5%;inset-inline:0;padding-inline:6.5%;text-align:center}
.tarot-name{font-size:5.4cqw;letter-spacing:.08em;color:var(--paper)}
.tarot-meaning{margin-top:2.6cqw;font-size:3.3cqw;line-height:1.85;letter-spacing:.04em;color:#c3cad6}
.tarot-comment{display:grid;grid-template-columns:12cqw minmax(0,1fr);column-gap:3.4cqw;margin-top:6cqw;text-align:left}
.tarot-avatar{grid-row:1/3;width:12cqw;height:12cqw;border-radius:50%}
.tarot-speaker{font-size:2.9cqw;color:#8f9bb0;letter-spacing:.06em}
.tarot-line{margin-top:1.6cqw;padding-left:3.4cqw;border-left:.7cqw solid;border-image:linear-gradient(#f29441,#f2944133) 1;font-size:3.5cqw;line-height:1.9;letter-spacing:.03em;color:var(--paper)}
.tarot-name,.tarot-meaning,.tarot-comment{opacity:0;translate:0 1.5cqw;transition:opacity .6s,translate .6s}
.show-card .tarot-name,.show-card .tarot-meaning,.show-line .tarot-comment{opacity:1;translate:none}
.show-card .tarot-meaning{transition-delay:.15s}
.tarot-demo .demo-controls{display:flex;justify-content:center;margin-top:16px;min-height:44px}
.tarot-note,.album-note{font-size:12px;line-height:1.9;color:var(--muted)}
.tarot-again{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;border-bottom:1px solid #fcebba55;background:none;color:var(--paper);font-size:14px;letter-spacing:.06em;cursor:pointer}
.tarot-again:hover{color:var(--glow);border-color:var(--glow)}
.tarot-again[hidden],.tarot-note[hidden]{display:none}
@media(max-width:760px){.tarot-note,.album-note{font-size:11px}}

/* The hero conversation replays once: a night's talk, then the next morning's reply that remembers it.
   The list is laid over the screenshot's message area in the app's proportions (cqw of the screen),
   and new messages push the log up as they would in the app. It ends on the screenshot's view. */
.hero-product .screen-image{position:relative}
.chat-live{display:none;position:absolute;left:0;width:100%;top:9.301%;height:73.795%;overflow-y:auto;scrollbar-width:none;user-select:none;-webkit-user-select:none;cursor:grab;container-type:inline-size;background:linear-gradient(#0a1626,#0d1f38 37%,#132d4f 74%,#16355f)}
.chat-ready .chat-live{display:block}
.chat-live::-webkit-scrollbar{display:none}.chat-live.is-dragging{cursor:grabbing}
.chat-log{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;padding:2cqw 0 .3cqw}
.msg p{font-size:3.47cqw;line-height:1.82;color:#eef1f6}
.msg.ai{position:relative;margin-top:5.1cqw;padding-left:8.53cqw}.msg.ai p{max-width:23.2em}
.msg.ai::before{content:"";position:absolute;left:4.12cqw;width:.74cqw;top:-1.2cqw;bottom:3cqw;background:linear-gradient(#f29441,#f294411f)}
.msg.me{align-self:flex-end;max-width:64cqw;margin:3.7cqw 2.8cqw 0 0;padding:2.76cqw 3.6cqw;border-radius:2.9cqw;background:#1c3d6a}
.chat-day{display:flex;align-items:center;gap:3cqw;align-self:center;margin-top:5.1cqw;font-size:2.9cqw;letter-spacing:.3em;color:#9aa6b8}
.chat-day::before,.chat-day::after{content:"";width:9cqw;height:1px;background:#9aa6b855}
.chat-log mark{background:none;color:inherit}
.is-remembered .chat-log mark{font-weight:700}
.chat-live [data-step]:not(.is-shown){display:none}
.chat-live [data-step].is-shown{animation:msg-in .45s ease-out}
@keyframes msg-in{from{opacity:0}}
.chat-typing{display:flex;gap:1.3cqw;height:6.3cqw;align-items:center}
.chat-typing::before{bottom:0}
.chat-typing i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#c3cad6;animation:typing 1.2s infinite ease-in-out}
.chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* The album can be browsed on the page. The list screenshot keeps the header, tabs and avatars;
   the cards and the detail sheet are live, measured from the app's screens (cqw of the screen).
   Hiding a memory greys the card's stripe and ribbon and dims its title; the sheet keeps its colour. */
.album-demo .screen-image{position:relative}
.album-screen{display:none;position:absolute;left:0;width:100%;top:.459%;height:94.426%;overflow:hidden;container-type:inline-size;border-radius:5cqw 5cqw 0 0}
.album-demo.is-ready .album-screen{display:block}
.album-list{position:absolute;top:50.07cqw;left:15.79cqw;right:0;bottom:0;overflow-y:auto;scrollbar-width:none;padding-bottom:2cqw;user-select:none;-webkit-user-select:none;background:linear-gradient(#071a30,#09213b 37%,#0b2541 55%,#0e2947 74%,#0d2a4c)}
.album-list::-webkit-scrollbar{display:none}.album-list.is-dragging{cursor:grabbing}
.album-card{--tc:var(--type);position:relative;height:21.5cqw;margin:1.83cqw 2.28cqw 0 2.56cqw;border-top:1.3cqw solid var(--tc);border-radius:3.3cqw;overflow:hidden;background:linear-gradient(135deg,#ffffff12,#ffffff05);transition:border-color .3s}
.album-card:first-child{margin-top:2.28cqw}
.album-card.is-hidden{--tc:#94a3b8}
.album-open{position:absolute;inset:0;display:flex;align-items:flex-start;padding:4.55cqw 12cqw 0 3.84cqw;border:0;background:none;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.album-open span{font-size:3.4cqw;line-height:1.5;letter-spacing:.06em;color:#ffffffe0;transition:color .3s}
.album-card.is-hidden .album-open span{color:#ffffff99}
.album-open:active{background:#ffffff08}
.album-open:focus-visible,.album-eye:focus-visible,.album-sheet button:focus-visible{outline:2px solid var(--glow);outline-offset:-3px}
.album-ribbon{position:absolute;top:1.9cqw;right:-9.2cqw;width:30cqw;line-height:6.4cqw;rotate:45deg;background:color-mix(in srgb,var(--tc) 88%,transparent);color:#000000c7;font-size:2.6cqw;font-weight:500;letter-spacing:.05em;text-align:center;pointer-events:none;transition:background-color .3s}
.album-eye{position:absolute;right:2cqw;bottom:2.1cqw;display:grid;place-items:center;width:8cqw;height:8cqw;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.album-eye svg,.album-sheet-toggle svg{width:4.4cqw;height:4.4cqw;fill:#94a3b8}
.album-card.is-hidden .album-eye svg,.album-sheet-toggle[aria-pressed="true"] svg{fill:#ffffffe0}
.album-scrim{position:absolute;inset:0;background:#02060ea6;opacity:0;pointer-events:none;transition:opacity .3s}
.album-sheet{position:absolute;inset:auto 0 0;max-height:72%;overflow-y:auto;scrollbar-width:none;padding:0 5.25cqw 2.9cqw;border-top:.9cqw solid var(--tc);border-radius:2.5cqw 2.5cqw 0 0;background:#060e1c;translate:0 105%;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.album-sheet .album-ribbon{top:1.2cqw;right:-9.3cqw}
.is-open .album-scrim{opacity:1;pointer-events:auto}
.is-open .album-sheet{translate:none}
.album-sheet-handle{display:block;width:20cqw;height:5.3cqw;margin:1.6cqw auto 0;padding:0;border:0;background:none;cursor:pointer}
.album-sheet-handle::before{content:"";display:block;width:9.9cqw;height:.9cqw;margin:auto;border-radius:1cqw;background:#404753}
.album-sheet-title{margin-top:1.6cqw;padding-right:10cqw;font-size:4.4cqw;line-height:1.5;letter-spacing:.04em;color:#ffffffe0}
.album-sheet-body{margin-top:3.4cqw;font-size:3.2cqw;line-height:1.86;letter-spacing:.1em;color:#ffffffb3}
.album-sheet-toggle{display:flex;align-items:center;gap:2.8cqw;height:8.5cqw;margin:2.2cqw 0 0 auto;padding:0 3.6cqw 0 3.4cqw;border:1px solid #ffffff2e;border-radius:999px;background:#ffffff0f;color:#ffffffe0;font-size:2.9cqw;letter-spacing:.06em;cursor:pointer}
.app-capture .demo-guide{display:flex;justify-content:center;align-items:center;min-height:32px;margin:0 0 16px;text-align:center}
.app-capture .demo-guide span{font-size:13px;line-height:1.8;color:var(--glow);margin:0}
.demo-guide span::before{content:"✧";margin-right:8px;color:var(--amber)}
.album-demo:not(.is-ready) .demo-guide,.tarot-demo:not(.is-ready) .demo-guide{visibility:hidden}

.faq{padding-block:65px 25px}
.faq-inner{max-width:850px;margin:auto}
.faq h2{font-size:32px;margin-bottom:30px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:24px 38px 24px 0;font-size:16px;line-height:1.8;color:var(--paper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:24px;color:var(--glow);font-size:22px;line-height:1.3}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:2px solid var(--glow);outline-offset:4px}
.faq-answer{padding:0 28px 26px 0;font-size:14px;line-height:2;color:var(--muted)}
.faq-answer p+p{margin-top:12px}
@media(max-width:760px){
  .faq{padding-block:45px 10px}.faq h2{font-size:28px;margin-bottom:24px}
  .faq summary{font-size:15px;padding-block:22px}.faq summary::after{top:22px}
  .faq-answer{padding-right:0;font-size:14px}
}
.faq-answer a{color:var(--paper);text-decoration:underline;text-decoration-color:#fcebba66;text-underline-offset:4px}
.faq-answer a:hover{color:var(--glow)}