:root{--ink: #0e0d0c;--paper: #e9e3d8;--panel: #17151a;--panel-2: #1d1a21;--line: #302c35;--text: #ece5da;--muted: #a9a093;--amber: #e0a24e;--amber-soft: #d8a866;--night: #8798b5;--moss: #8ea885;--maxw: 1080px;--latin: "Cormorant Garamond", serif;--serif: "Zen Old Mincho", "Noto Serif JP", serif;--sans: "Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;--step--1: .82rem;--step-0: 1rem;--step-1: 1.18rem;--step-2: 1.8rem;--step-3: 3.4rem;color-scheme:dark}@media(min-width:760px){:root{--step--1: .86rem;--step-1: 1.34rem;--step-2: 2.35rem;--step-3: 4.8rem}}@supports (color: oklch(0 0 0)){:root{--ink: oklch(.15 .01 70);--panel: oklch(.18 .015 300);--panel-2: oklch(.22 .018 300);--line: oklch(.28 .018 305);--amber: oklch(.78 .12 70);--amber-soft: oklch(.74 .09 72);--night: oklch(.67 .055 255);--moss: oklch(.66 .07 145)}}*{box-sizing:border-box;margin:0}body{background:var(--ink);color:var(--text);font-family:var(--sans);font-size:var(--step-0);line-height:1.95;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}body:after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}img,picture{display:block;max-width:100%}button,input,textarea,select{font:inherit}:where(a,button):focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:4px}@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}.skip{position:fixed;left:-999px;top:8px;z-index:10001;background:var(--amber);color:#000;padding:8px 14px;border-radius:8px}.skip:focus{left:8px}.nav{position:fixed;inset:0 0 auto;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:10px clamp(14px,5vw,40px);background:color-mix(in oklab,var(--ink) 76%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transform:translateY(-110%);transition:transform .4s ease,border-color .4s ease}.nav.show{transform:none;border-color:var(--line)}.nav-brand{flex:0 0 auto;font-family:var(--latin);font-size:1.25rem;font-weight:600;letter-spacing:.08em;view-transition-name:brand}.nav ul{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:clamp(8px,2.5vw,24px);list-style:none;margin:0;padding:0}.nav ul a{position:relative;z-index:1;color:var(--muted);font-size:var(--step--1);letter-spacing:.06em;white-space:nowrap;transition:color .25s ease}.nav ul a:hover,.nav-brand:hover,.nav ul a.is-active{color:var(--amber)}.nav-underline{position:absolute;left:0;bottom:-6px;height:1.5px;width:0;background:var(--amber);opacity:0;pointer-events:none;transform:translate(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}.scroll-progress{position:fixed;inset:0 0 auto;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:0 50%;opacity:.85;z-index:1001;pointer-events:none}@media(prefers-reduced-motion:no-preference){@supports (animation-timeline: scroll()){.scroll-progress{animation:scrollProgress linear both;animation-timeline:scroll(root)}@keyframes scrollProgress{to{transform:scaleX(1)}}}}@media(prefers-reduced-motion:reduce){.nav-underline{transition:opacity .2s ease}}@media(max-width:430px){.nav{justify-content:center;padding-inline:10px}.nav-brand{display:none}.nav ul{width:100%;justify-content:space-between;gap:4px}.nav ul a{font-size:.66rem;letter-spacing:.01em}}.wrap{width:min(100%,var(--maxw));margin:0 auto;padding-inline:clamp(18px,5vw,40px)}main{min-height:100svh}section{padding-block:clamp(58px,10vw,118px)}:target,section[id]{scroll-margin-top:76px}.kicker{color:var(--night);font-family:var(--sans);font-size:var(--step--1);letter-spacing:.24em;text-transform:uppercase}.h-section{margin:.3em 0 .8em;font-family:var(--serif);font-size:var(--step-2);font-weight:600;font-size-adjust:.5;line-height:1.4;letter-spacing:.04em;text-wrap:balance;clip-path:inset(0 0 -14% 0)}.h-section .amber{color:var(--amber)}.hero{position:relative;isolation:isolate;min-height:92svh;display:grid;place-content:center;gap:.65em;padding:96px 20px 72px;text-align:center;overflow:hidden}.hero-bg,.hero-bg img{position:absolute;inset:0;z-index:-2;width:100%;height:100%}.hero-bg img{object-fit:cover;filter:grayscale(.2) brightness(.52) contrast(1.04)}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0e0d0c66 0%,#0e0d0ce6 86%,var(--ink) 100%),radial-gradient(80% 60% at 50% 16%,transparent 0%,#0e0d0c99 72%)}.hero .tag{color:var(--muted);font-size:var(--step--1);letter-spacing:.12em}.hero .name{font-family:var(--latin);font-size:var(--step-3);font-weight:600;line-height:1;letter-spacing:.18em;text-indent:.18em;view-transition-name:brand}.hero .sub{max-width:34em;margin-inline:auto;color:var(--amber-soft);font-family:var(--serif);font-size:var(--step-1);font-size-adjust:.5;line-height:1.85;text-wrap:pretty}.scrollcue{justify-self:center;margin-top:2.1em;color:var(--night);font-size:var(--step--1);letter-spacing:.16em;animation:bob 2.4s ease-in-out infinite}.tate{position:absolute;top:12%;right:clamp(14px,4vw,46px);z-index:2;color:var(--muted);font-family:var(--serif);font-size:var(--step--1);letter-spacing:.2em;writing-mode:vertical-rl;text-shadow:0 1px 8px #0009;user-select:none;opacity:.85;animation:fade 1.4s ease both}@media(max-width:900px){.tate{display:none}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(7px)}}@keyframes fade{0%{opacity:0}to{opacity:.85}}.prose{max-width:30em;font-family:var(--serif);font-size:var(--step-1);font-size-adjust:.5;line-height:2.2;letter-spacing:.01em;text-wrap:pretty}.prose p{min-height:.65em;text-wrap:pretty}.prose .amber{color:var(--amber)}.prose,.prose p,.h-section,.world-head p,.bento .cell p,.hero .sub{word-break:keep-all;overflow-wrap:break-word;line-break:strict}.world{border-top:1px solid var(--line);padding-top:clamp(30px,6vw,56px)}.world-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 14px;margin-bottom:20px}.world-tag{border:1px solid currentColor;border-radius:999px;padding:4px 12px;font-size:var(--step--1);letter-spacing:.16em}.world--creative .world-tag,.world--creative .kicker{color:var(--amber)}.world--dev .world-tag,.world--dev .kicker{color:var(--night)}.world-image{margin:0 0 30px;overflow:hidden;border:1px solid var(--line);border-radius:8px;aspect-ratio:21 / 8;background:var(--panel)}.world-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18) brightness(.72) contrast(1.05)}@media(max-width:640px){.world-image{aspect-ratio:16 / 9}}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:clamp(14px,2.4vw,22px)}.card{display:flex;min-width:0;overflow:hidden;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--panel);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease,background .35s ease}.card:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--amber) 80%,#fff);background:var(--panel-2)}.thumb{overflow:hidden;aspect-ratio:16 / 9;background:#0c0b0d;filter:grayscale(.35) contrast(1.03)}.thumb img{width:100%;height:100%;object-fit:cover;object-position:center}.card:hover .thumb{filter:grayscale(0) contrast(1.05)}.thumb-img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;object-position:center;filter:grayscale(.35) contrast(1.03);transition:filter .35s ease}.card:hover .thumb-img{filter:grayscale(0) contrast(1.05)}.card .body{display:flex;flex:1;flex-direction:column;gap:7px;padding:14px 16px 16px}.card .date{color:var(--night);font-size:var(--step--1);letter-spacing:.08em}.card .title{overflow-wrap:anywhere;font-family:var(--serif);font-size:1.04rem;font-weight:600;line-height:1.55}.card .excerpt{color:var(--muted);font-size:var(--step--1);line-height:1.8;text-wrap:pretty}.card .more{margin-top:auto;color:var(--amber-soft);font-size:var(--step--1)}.actions{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:18px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--amber);border-radius:999px;color:var(--amber);padding:8px 18px;font-size:var(--step--1);letter-spacing:.08em;transition:background .25s ease,color .25s ease,border-color .25s ease}.btn:hover{background:var(--amber);color:var(--ink)}.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(122px,auto);gap:14px;counter-reset:face}.bento .cell{position:relative;overflow:hidden;isolation:isolate;counter-increment:face;display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:18px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:8px;background:radial-gradient(240px circle at var(--mx, 50%) var(--my, -30%),color-mix(in oklab,var(--amber) 12%,transparent),transparent 55%),var(--panel);transition:transform .42s cubic-bezier(.2,.7,.2,1),border-color .42s ease,box-shadow .42s ease}.bento .cell:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--amber) 65%,var(--line));box-shadow:0 14px 40px -24px #000c}.bento .cell>*{position:relative;z-index:1}.bento .cell:before{content:counter(face,decimal-leading-zero);position:absolute;top:8px;right:16px;z-index:0;color:var(--amber);font-family:var(--latin);font-size:clamp(2.6rem,6vw,4rem);font-weight:600;line-height:1;opacity:.08;transition:opacity .42s ease,transform .42s ease;pointer-events:none}.bento .cell:hover:before{opacity:.2;transform:translateY(-3px)}.bento .cell:after{content:"→";position:absolute;right:18px;bottom:14px;z-index:1;color:var(--amber);font-size:var(--step--1);opacity:0;transform:translate(-6px);transition:opacity .35s ease,transform .35s ease}.bento .cell:hover:after{opacity:1;transform:none}.bento .cell h3{font-family:var(--serif);font-size:1.18rem;font-weight:600;letter-spacing:.02em}.bento .cell p{color:var(--muted);font-size:var(--step--1);line-height:1.85;text-wrap:pretty}.bento .c-write,.bento .c-music{grid-column:span 3}.bento .c-movie,.bento .c-dev,.bento .c-voice{grid-column:span 2}@media(max-width:760px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .cell{grid-column:span 1;padding:17px}}@media(max-width:360px){.bento{gap:10px}.bento .cell{padding:14px}}.foot{border-top:1px solid var(--line);padding-block:clamp(42px,8vw,72px) 60px;color:var(--muted)}.foot .links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0}.foot .links a{border-bottom:1px solid transparent;font-size:var(--step--1);letter-spacing:.06em;transition:color .25s ease,border-color .25s ease}.foot .links a:hover{border-color:var(--amber);color:var(--amber)}.center{text-align:center}.muted{color:var(--muted)}.small{font-size:var(--step--1)}@media(prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 32%}@keyframes reveal{0%{opacity:0;scale:.985;translate:0 38px}to{opacity:1;scale:1;translate:0 0}}.kicker.reveal{animation-name:revealKicker}@keyframes revealKicker{0%{opacity:1;scale:.99;translate:0 26px}to{opacity:1;scale:1;translate:0 0}}.heading-reveal{animation:headingRise linear both;animation-timeline:view();animation-range:entry 2% cover 28%}@keyframes headingRise{0%{opacity:0;translate:0 40px;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(0 0 -14% 0)}}.prose p{animation:lineRise linear both;animation-timeline:view();animation-range:entry 0% cover 20%}@keyframes lineRise{0%{opacity:0;clip-path:inset(0 0 110% 0);translate:0 22px}to{opacity:1;clip-path:inset(0 0 -20% 0);translate:0 0}}.world-image img{animation:imgWipe linear both;animation-timeline:view();animation-range:entry 0% cover 62%;transform-origin:50% 58%;will-change:transform,clip-path}@keyframes imgWipe{0%{clip-path:inset(0 0 0 100%);transform:scale(1.16) translateY(16px)}60%{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 0);transform:scale(1) translateY(0)}}.hero-bg img{animation:heroParallax linear both;animation-timeline:scroll(root);animation-range:0 105svh;will-change:transform}@keyframes heroParallax{0%{transform:scale(1.06) translateY(0)}to{transform:scale(1.18) translateY(9%)}}.hero:after{animation:heroVignette linear both;animation-timeline:scroll(root);animation-range:0 90svh}@keyframes heroVignette{0%{opacity:.92}to{opacity:1}}.hero .tag,.hero .sub,.hero .tate,.hero .scrollcue{animation:heroRecede linear both;animation-timeline:scroll(root);animation-range:0 62svh}@keyframes heroRecede{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-18px)}}.cards .card.reveal{animation:cardIn linear both;animation-timeline:view();animation-range:entry 0% cover 30%;transform-origin:50% 80%}@keyframes cardIn{0%{opacity:0;rotate:-.7deg;scale:.97;translate:0 34px}to{opacity:1;rotate:0deg;scale:1;translate:0 0}}}}.reveal{opacity:1}@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important;transition-duration:.01ms!important}}.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease}main,.foot{position:relative;z-index:1}:root[data-timeband=deepnight] .ambient{background:radial-gradient(130% 92% at 50% -12%,#21314f 0%,transparent 62%);opacity:.55}:root[data-timeband=dawn] .ambient{background:radial-gradient(130% 92% at 50% -12%,#43304a 0%,transparent 62%);opacity:.45}:root[data-timeband=morning] .ambient{background:radial-gradient(130% 92% at 50% -12%,#4a3f2a 0%,transparent 64%);opacity:.3}:root[data-timeband=day] .ambient{background:radial-gradient(130% 92% at 50% -12%,#3f4436 0%,transparent 64%);opacity:.22}:root[data-timeband=evening] .ambient{background:radial-gradient(130% 92% at 50% -12%,#4a3320 0%,transparent 62%);opacity:.42}:root[data-timeband=night] .ambient{background:radial-gradient(130% 92% at 50% -12%,#2a2740 0%,transparent 62%);opacity:.5}.greet{margin:.9rem 0 .2rem;color:var(--amber-soft);font-family:var(--serif);font-size:var(--step-0);opacity:.9}.moods{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.4rem 0 .2rem;padding:0}.mood{border:1px solid var(--line);border-radius:999px;padding:.32rem .9rem;color:var(--text);font-family:var(--sans);font-size:var(--step--1);text-decoration:none;transition:border-color .25s,color .25s,background .25s}.mood:hover,.mood:focus-visible{border-color:var(--amber);color:var(--amber)}.mood-line{min-height:1.4em;margin:.2rem 0 0;color:var(--muted);font-family:var(--serif);font-size:var(--step--1)}.nightroom{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding-block:clamp(3rem,8vw,6rem) clamp(12rem,24vw,18rem);text-align:center}.nightroom .kicker{margin:0;color:var(--amber);font-family:var(--latin);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase}.tonight{max-width:34rem;margin:.2rem auto;color:var(--text);font-family:var(--serif);font-size:var(--step-1);line-height:2.05}.ghost{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:var(--step--1);padding:.34rem 1.1rem;transition:border-color .25s,color .25s}.ghost:hover,.ghost:focus-visible{border-color:var(--amber);color:var(--amber)}.lamp{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1.8rem}.lamp-btn{border:1px solid var(--amber);border-radius:999px;background:transparent;color:var(--amber);cursor:pointer;font-family:var(--sans);font-size:var(--step-0);padding:.5rem 1.5rem;transition:box-shadow .5s,background .5s,color .5s}.lamp-btn:hover,.lamp-btn:focus-visible{box-shadow:0 0 22px -4px var(--amber)}.lamp-btn.lit{background:color-mix(in oklab,var(--amber) 18%,transparent);box-shadow:0 0 30px -2px var(--amber);cursor:pointer}.lamp-count{margin:0}.companion{margin-top:1.4rem;font-family:var(--serif)}.amber-soft,.mirror-echo{color:var(--amber-soft)}.mirror-echo{margin-top:1.4rem;font-family:var(--serif);font-size:var(--step-0);line-height:2}.revisit{margin:.2rem 0 .8rem;font-family:var(--serif)}.care{margin-top:1.2rem;color:var(--muted);font-family:var(--serif);line-height:1.9}.care a{color:var(--amber-soft);text-decoration:underline;text-underline-offset:.18em}@media(prefers-reduced-motion:reduce){.ambient,.lamp-btn{transition:none}}.prose p,.tag,.sub,.name,.tonight,.greet,.mood-line,.mirror-echo,.companion,.echoes-alone,.echoes-empty,.care,.revisit,.nightroom .kicker{word-break:keep-all;overflow-wrap:break-word;line-break:strict}.echo{word-break:keep-all;overflow-wrap:anywhere}#about,#activity,#creative,#music,#devroom,#vision,#nightroom,#echoes{scroll-margin-top:clamp(64px,12vw,92px)}html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.echoes{display:flex;flex-direction:column;gap:.7rem;width:100%;max-width:38rem;margin:1.8rem auto 0;align-items:stretch}.echoes .kicker,.echoes-alone{text-align:center}.echoes-alone{margin:0;color:var(--amber-soft);font-family:var(--serif)}.echoes-list{display:flex;flex-direction:column;gap:.55rem;margin:.4rem 0;padding:0;list-style:none;text-align:center}.echo{border-left:2px solid color-mix(in oklab,var(--amber) 55%,transparent);break-inside:avoid;color:var(--text);font-family:var(--serif);font-size:var(--step-0);line-height:1.85;text-align:left;padding:.15rem 0 .15rem .8rem}.echoes-empty{border:0;padding:0}.echoes-form{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.echoes-form input{flex:1 1 16rem;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-family:var(--serif);font-size:var(--step-0);padding:.6rem .9rem}.echoes-form input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.echoes-msg{margin:.2rem 0 0;color:var(--amber-soft);font-family:var(--serif);text-align:center}.echoes-msg a{color:var(--amber)}.tell{display:inline-flex;align-items:center;justify-content:center;margin:.6rem auto 0;border:1px solid var(--amber);border-radius:999px;color:var(--amber);font-family:var(--sans);font-size:var(--step--1);padding:.4rem 1.4rem;text-decoration:none;transition:box-shadow .3s,background .3s}.tell:hover,.tell:focus-visible{box-shadow:0 0 18px -6px var(--amber)}.hero{min-height:100svh;padding-left:max(env(safe-area-inset-left),0px);padding-right:max(env(safe-area-inset-right),0px)}@supports not (height: 100svh){.hero{min-height:100vh}}@media(pointer:coarse){.mood,.ghost,.lamp-btn,.tell,.echoes-form button,.links a,.scrollcue{display:inline-flex;align-items:center;justify-content:center;min-height:46px}.echoes-form input{min-height:46px}}body{padding-bottom:env(safe-area-inset-bottom)}.nightroom{container-type:inline-size;content-visibility:visible}@container (min-width: 680px){.echoes-list:has(.echo){display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.6rem;text-align:left}}@media(max-width:599px){.wrap{padding-inline:clamp(1.1rem,6vw,1.6rem)}}@media(min-width:600px)and (max-width:1024px){.wrap{padding-inline:clamp(1.6rem,5vw,3rem)}}@media(min-width:1025px){.wrap{padding-inline:2rem}}
