/* 見えないもの — a pop-up picture book on a desk at night.
   Bound along the top: board pages turn upward, and paper planets stand up from the lower page.
   The scene is drawn at 1440 × 900 (640 × 1140 on tall screens) and scaled to fit. */
:root{
  --en:'EB Garamond',Georgia,serif;
  --display:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --jp:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --hand:'Klee One','Shippori Mincho',serif;
  --brush:'Yuji Syuku','Shippori Mincho',serif;
  --ink:#2A2218; --gold:#D9B867; --gold-hi:#F2DA98; --navy:#141B3A;
  --pw:900px; --ph:470px; --tilt:52deg;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .08' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 1.4 -1'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)'/%3E%3C/svg%3E");
}
.port{--pw:600px;--ph:660px;--tilt:60deg}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#0D0A08;color:var(--gold-hi);font-family:var(--en);-webkit-font-smoothing:antialiased}
html[lang=ja] .en,html:not([lang=ja]) .ja{display:none!important}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ═════════ the desk, at night, under a lamp ═════════ */
.desk{position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 46% 46%,rgba(255,196,120,.30),rgba(255,170,90,.10) 45%,transparent 75%),
    repeating-linear-gradient(92deg,rgba(0,0,0,.18) 0 2px,transparent 2px 9px,rgba(255,255,255,.025) 9px 10px,transparent 10px 23px),
    linear-gradient(180deg,#1B130D,#2A1C12 40%,#1A120C);
}
.desk::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.7}
.desk__lamp{position:absolute;left:46%;top:-30%;width:70vmax;height:70vmax;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,214,150,.16),transparent 60%);animation:lamp 7s ease-in-out infinite}
@keyframes lamp{50%{opacity:.82}}
.desk__dust{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,230,190,.5) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(255,230,190,.35) 0 1px,transparent 1.5px);background-size:190px 230px,270px 310px;background-position:0 0,60px 90px;animation:dust 60s linear infinite;opacity:.6}
@keyframes dust{to{background-position:40px -460px,-20px -620px}}

.chrome{position:fixed;z-index:30;top:0;left:0;right:0;height:58px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(14px,3vw,40px);font-family:var(--jp);font-size:15px;letter-spacing:.08em;color:rgba(242,218,152,.88)}
.chrome a,.chrome button{white-space:nowrap}
.chrome a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.chrome__mark b{font-family:var(--brush);font-weight:400;font-size:25px;color:var(--gold-hi);margin-right:10px}
.chrome__nav{display:flex;align-items:center;gap:20px}
.lang-toggle{min-height:36px;min-width:44px;padding:0 12px;cursor:pointer;background:transparent;color:inherit;border:1px solid rgba(242,218,152,.5);border-radius:999px;font-family:var(--jp);font-size:14px}
.lang-toggle:hover{background:rgba(242,218,152,.1)}
.pager{position:fixed;z-index:20;left:0;right:0;top:20px;margin:0;text-align:center;font-family:var(--jp);font-size:14px;letter-spacing:.24em;color:rgba(242,218,152,.7);pointer-events:none}
.hint{position:fixed;z-index:20;left:0;right:0;bottom:6px;transition:opacity .6s;margin:0;text-align:center;font-size:13px;letter-spacing:.08em;color:rgba(242,218,152,.5);pointer-events:none}
html[lang=ja] .hint{font-family:var(--jp)}

/* ═════════ the book ═════════ */
.room{position:fixed;inset:0;touch-action:none;-webkit-user-select:none;user-select:none}
.stage{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform-origin:0 0;perspective:3200px;perspective-origin:50% 30%}
.port .stage{width:640px;height:1140px;perspective-origin:50% 5%}
.book{position:absolute;left:calc(50% - var(--pw) / 2);top:500px;width:var(--pw);height:0;transform-style:preserve-3d;transform:rotateX(var(--tilt))}
.port .book{top:690px}
.leaf{position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);transform-origin:50% 0;transform-style:preserve-3d;transform:translateZ(var(--z,0px)) rotateX(var(--a,0deg))}
.leaf[hidden]{display:none}
.face{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px 2px 6px 6px;overflow:visible}
.face--back{transform:rotateX(180deg);border-radius:6px 6px 2px 2px}
.face__in{position:absolute;inset:0;border-radius:inherit}
.scene{transform-style:preserve-3d}
.face *{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* light: a face darkens as it turns away from the lamp */
.face::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#000;opacity:var(--dim,0);pointer-events:none}
.face--front .cast{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 70%,transparent);opacity:var(--cast,0)}
/* board edges */
.face--front{box-shadow:0 0 0 1px rgba(0,0,0,.25)}

/* the paper block under the open page, and the book's lower edge */
.block--low{position:absolute;left:0;top:var(--ph);width:var(--pw);height:var(--tl,24px);transform-origin:50% 0;transform:rotateX(-90deg);
  background:repeating-linear-gradient(180deg,#EFE6D2 0 2px,#CDBF9F 2px 3px);border-radius:0 0 4px 4px;box-shadow:inset 0 -2px 0 #1E2547,inset 2px 0 0 #1E2547,inset -2px 0 0 #1E2547}
.block--up{display:none}

/* pull-tabs */
.tab{position:absolute;z-index:3;min-width:110px;height:42px;padding:0 18px;border:0;border-radius:0 0 10px 10px;cursor:pointer;
  font-family:var(--jp);font-size:16px;letter-spacing:.2em;color:#FBF3DD;background:#C2361F;box-shadow:0 3px 6px rgba(0,0,0,.35)}
.tab--next{top:100%;right:7%;height:34px;transform-origin:50% 0;transform:rotateX(-90deg) translateZ(1.5px)}
/* the pull-tab hangs over the paper edge, so nothing crosses it; only the page you can turn shows one */
.face:not(.is-here) > .tab{visibility:hidden}
.tab--prev{top:-34px;left:7%;border-radius:10px 10px 0 0;background:#2A3260}
.tab:hover{filter:brightness(1.12)}
html:not([lang=ja]) .tab{font-family:var(--en);letter-spacing:.06em;font-size:17px}

/* ═════════ the cover and end-paper ═════════ */
.cover{background:var(--navy);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  box-shadow:inset 0 0 0 10px #10162F,inset 0 0 0 12px rgba(217,184,103,.6),inset 0 0 60px rgba(0,0,0,.6)}
.cover__art{position:absolute;left:50%;top:50%;width:46%;transform:translate(-62%,-50%);opacity:.95}
.cover__k{position:absolute;right:9%;top:12%;margin:0;writing-mode:vertical-rl;font-family:var(--brush);font-weight:400;font-size:62px;letter-spacing:.08em;color:var(--gold-hi);text-shadow:0 0 18px rgba(242,218,152,.35)}
.cover__en{position:absolute;left:8%;top:10%;margin:0;font-family:var(--display);font-style:italic;font-size:34px;color:var(--gold-hi)}
.cover__by{position:absolute;left:8%;bottom:10%;margin:0;font-family:var(--jp);letter-spacing:.2em;font-size:16px;color:rgba(242,218,152,.85)}
.endpaper{background:#1A2148;background-image:radial-gradient(circle at 20% 30%,rgba(217,184,103,.08),transparent 40%)}
.endpaper svg{width:100%;height:100%}

/* ═════════ upper pages: the words, and a figure tipped in like a plate ═════════ */
.page{background:#F6EEDC;background-image:var(--fibers),var(--grain);color:var(--ink);
  box-shadow:inset 0 0 0 18px #F6EEDC,inset 0 0 0 19px var(--acc,#B48E55),inset 0 0 0 23px #F6EEDC,inset 0 0 0 24px var(--acc,#B48E55),inset 0 -26px 40px -30px rgba(0,0,0,.35)}
.page__planet{position:absolute;right:46px;top:44px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 40%),var(--acc);box-shadow:0 0 0 3px #F6EEDC,0 0 0 4px var(--acc2,#8F6B3A)}
.pno{position:absolute;left:0;right:0;bottom:34px;margin:0;text-align:center;font-family:var(--jp);font-size:15px;letter-spacing:.3em;color:rgba(42,34,24,.55)}
.plate{position:absolute;top:56px;width:330px;margin:0;text-align:center}
.page--r .plate{left:60px}
.page--l .plate{right:60px}
.plate__lens{display:block;position:relative;width:330px;height:330px;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:zoom-in;background:#0B0F26;
  box-shadow:0 0 0 6px #F6EEDC,0 0 0 9px var(--gold),0 0 0 10px #8F6B3A,0 8px 18px rgba(0,0,0,.35)}
.plate__lens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1.3)) translate(var(--ox,0),var(--oy,0))}
.plate__ph{display:none;position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(242,218,152,.4) 0 1px,transparent 2px) 0 0/30px 30px,radial-gradient(ellipse at 50% 50%,#2A2050,#05071A 70%)}
.plate.missing img{visibility:hidden}
.plate.missing .plate__ph{display:block}
.plate figcaption{margin-top:16px;font-size:14px;color:rgba(42,34,24,.7)}
.plate figcaption b{margin-right:6px;color:var(--ink)}
.txt{position:absolute;top:66px}
.page--r .txt{left:440px;right:70px}
.page--l .txt{left:70px;right:440px}
.txt h2{margin:0}
.txt p{margin:0}
.txt--en{font-size:21px;line-height:1.55}
.txt--en .kick{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--acc2,#8F6B3A)}
.txt--en h2{font-family:var(--display);font-weight:600;font-size:46px;line-height:1.05;margin:6px 0 16px}
.txt--ja{height:350px;writing-mode:vertical-rl;font-family:var(--jp);font-size:19px;line-height:1.9;letter-spacing:.05em}
.txt--ja h2{font-size:28px;font-weight:700;letter-spacing:.22em;margin-left:20px;color:var(--acc2,#5A3A22)}
.txt .tr{font-style:italic;color:var(--acc2,#5A3A22);margin-bottom:10px}
.txt--ja .tr{font-style:normal;font-weight:700;margin:0 0 0 12px}
.links{display:flex;flex-direction:column;gap:2px;margin-top:12px!important}
.links a{color:#8E1F3A;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;align-self:flex-start;border-bottom:1px solid rgba(142,31,58,.4)}
.txt--ja .links{margin:0 14px 0 0!important}
.txt--ja .links a{min-height:0;min-width:40px;border-bottom:0;border-left:1px solid rgba(142,31,58,.4);padding-left:4px}
.page--end{--acc:#3B4A86;--acc2:#2A3260}
.page--end .plate{left:60px;width:270px}
.page--end .plate__lens{width:270px;height:270px}
.page--end .txt{left:380px;right:64px;top:56px}
.page--end .txt--en{font-size:19px;line-height:1.5}
.page--end .txt--en h2{font-size:38px;margin:4px 0 10px}
.page--end .links{flex-direction:row;gap:18px}

/* title page and contents */
.page--title{--acc:#2A3260;--acc2:#2A3260}
.title__k{position:absolute;right:70px;top:56px;margin:0;writing-mode:vertical-rl;font-family:var(--brush);font-weight:400;font-size:58px;letter-spacing:.08em;color:var(--navy)}
.title__body{position:absolute;left:70px;top:60px;right:210px}
.title__sub{margin:0;font-family:var(--display);font-style:italic;font-size:30px;line-height:1.2;color:var(--navy)}
html[lang=ja] .title__sub{font-family:var(--jp);font-style:normal;font-size:24px;letter-spacing:.2em}
.title__by{margin:10px 0 0;font-family:var(--jp);font-size:14px;letter-spacing:.14em;color:rgba(42,34,24,.7)}
.title__h{margin:26px 0 6px;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#8E1F3A}
html[lang=ja] .title__h{font-family:var(--jp);font-size:15px}
.toc{margin:0;padding:0;list-style:none;columns:2;column-gap:30px}
.toc button{display:flex;align-items:baseline;gap:12px;width:100%;min-height:40px;padding:2px 0;border:0;border-bottom:1px dotted rgba(42,34,24,.3);background:none;cursor:pointer;text-align:left;font:inherit;font-size:19px;color:var(--ink)}
html[lang=ja] .toc button{font-family:var(--jp);font-size:18px;letter-spacing:.08em}
.toc i{font-style:normal;font-family:var(--jp);font-size:14px;color:#8E1F3A;min-width:22px}
.toc button:hover{color:#8E1F3A}
.title__q{position:absolute;left:70px;bottom:60px;margin:0;font-family:var(--display);font-style:italic;font-size:22px;color:rgba(42,34,24,.65)}

/* colophon */
.page--colo{--acc:#2A3260;--acc2:#2A3260;text-align:center;padding:60px 120px;font-size:18px;line-height:1.6}
html[lang=ja] .page--colo{font-family:var(--jp);font-size:16px}
.page--colo p{margin:0 0 14px}
.colo__k{font-family:var(--brush);font-size:54px;line-height:1.2;color:var(--navy)}
.colo__small{font-size:15px;color:rgba(42,34,24,.75)}
.colo__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.ink-btn{min-height:46px;padding:0 20px;display:inline-flex;align-items:center;cursor:pointer;background:transparent;color:var(--navy);border:1.5px solid var(--navy);border-radius:2px;font:inherit;font-family:var(--jp);letter-spacing:.12em;text-decoration:none}
.ink-btn--solid{background:var(--navy);color:#F6EEDC}
.ink-btn:hover{background:#8E1F3A;border-color:#8E1F3A;color:#F6EEDC}

/* ═════════ lower pages: a printed night, and paper that stands up ═════════ */
.scene{background:radial-gradient(ellipse 90% 70% at 50% 0%,var(--sky2),var(--sky) 70%);background-color:var(--sky);
  box-shadow:inset 0 0 0 14px rgba(255,255,255,.04),inset 0 0 60px rgba(0,0,0,.45)}
.scene::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--grain);opacity:.55;pointer-events:none}
.scene__print{position:absolute;inset:0;opacity:.8}
.scene__print svg{width:100%;height:100%}
.scene__cap{position:absolute;left:0;right:0;bottom:18px;margin:0;text-align:center;font-family:var(--hand);font-size:17px;letter-spacing:.2em;color:var(--acc)}
html:not([lang=ja]) .scene__cap{font-family:var(--display);font-style:italic;letter-spacing:.06em;font-size:20px}

.pop{position:absolute;left:var(--x);width:var(--w);top:calc(var(--d) * var(--ph) - var(--h) * var(--ph));height:calc(var(--h) * var(--ph));transform-style:preserve-3d;pointer-events:none}
.pop__card{position:absolute;inset:0;transform-origin:50% 100%;transform:rotateX(calc(var(--rise,1) * -88deg));backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pop__card svg{position:absolute;left:0;bottom:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 0 rgba(255,250,235,.55)) drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.pop__shadow{position:absolute;left:8%;right:8%;bottom:0;height:calc(var(--rise,1) * 40%);background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(0,0,0,.45),transparent 75%);opacity:var(--rise,1)}
.pop--sky .pop__card svg{filter:none}
.pp .vol{transform-origin:200px 290px;animation:vol 60s linear infinite}
.pop--planet .pp{animation:bob 6s ease-in-out infinite}
@keyframes vol{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-6px)}}
.pp .life .glow{animation:pulse 2.4s ease-in-out infinite}
.pp .life .beam{transform-origin:122px 52px;animation:beam 9s ease-in-out infinite}
.pp .life .nums text{animation:float 5s ease-in infinite;opacity:0}
.pp .life .nums text:nth-child(2){animation-delay:1.2s}.pp .life .nums text:nth-child(3){animation-delay:2.5s}.pp .life .nums text:nth-child(4){animation-delay:3.7s}
.pp .life .lampglow{animation:lampb 3s steps(1) infinite}
.pp .life .flame{animation:lampf 3s steps(1) infinite}
.pp .life .tail{transform-origin:120px 112px;animation:wag 2.2s ease-in-out infinite}
.pp .life .rope{transform-origin:100px 66px;animation:swing 4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
@keyframes beam{50%{transform:rotate(-14deg)}}
@keyframes float{0%{opacity:0;transform:translateY(10px)}20%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}
@keyframes lampb{0%,48%{opacity:1}50%,98%{opacity:0}}
@keyframes lampf{0%,48%{fill:#FFE08A}50%,98%{fill:#4A4636}}
@keyframes wag{50%{transform:rotate(10deg)}}
@keyframes swing{50%{transform:rotate(5deg)}}
.strip .bulb{animation:bulb 4s steps(1) infinite;animation-delay:calc(var(--k) * .3s)}
@keyframes bulb{0%,60%{fill:#FFE08A;filter:drop-shadow(0 0 6px #FFD36E)}61%,100%{fill:#5A5236;filter:none}}
.sky{animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.6}}
.const .const__l path{stroke:var(--gold);stroke-width:2.5;stroke-dasharray:6 8}
.const .const__s circle{fill:var(--gold-hi)}
.const .hidden-star{opacity:.08}
.const .hidden-ring{fill:none;stroke:var(--gold-hi);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.is-here .const .hidden-star{animation:appear 2.5s ease 1.2s forwards}
.is-here .const .hidden-ring{animation:ring 3s ease-out 2s infinite}
@keyframes appear{to{opacity:1}}
@keyframes ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}

/* tall screens: the pages are taller, the figure sits above the words */
.port .plate{left:50%!important;right:auto!important;top:40px;width:200px;margin-left:-100px}
.port .plate__lens{width:200px;height:200px}
.port .plate figcaption{font-size:16px}
.port .txt{left:46px!important;right:46px!important;top:290px}
.port .txt--en{font-size:23px}
.port .txt--en h2{font-size:42px;margin:4px 0 10px}
.port .txt--ja{top:322px!important;height:280px;font-size:20px}
.port .txt--ja h2{font-size:28px}
.port .page__planet{right:34px;top:34px}
.port .title__k{right:44px;font-size:64px}
.port .title__body{left:50px;right:150px}
.port .toc{columns:1}
.port .page--colo{padding:56px 60px}
.port .cover__k{font-size:56px}
.port .tab{font-size:20px;height:50px;min-width:140px}
.port .tab--next{height:40px}.port .tab--prev{top:-42px}

/* ═════════ figure viewer ═════════ */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;color:var(--gold-hi)}
.lb::backdrop{background:rgba(8,6,4,.94)}
.lb[open]{display:grid;place-items:center}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb__mat{background:#0B0F26;padding:10px;box-shadow:0 0 0 1px rgba(217,184,103,.5),0 30px 60px -20px rgba(0,0,0,.9)}
.lb__mat img{display:block;max-width:90vw;max-height:78vh}
.lb__cap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;font-size:16px}
.lb__open{color:var(--gold-hi);min-height:40px;display:inline-flex;align-items:center}
.lb__close{position:fixed;top:12px;right:16px;width:48px;height:48px;border:0;background:none;color:var(--gold-hi);font-size:34px;cursor:pointer}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

.has-turned .hint{opacity:0}
.port .pager{top:62px}
.port .hint{display:none}
.port .page--end .txt--en{font-size:21px}