:root{--paper:#edefeb;--sheet:#fff;--ink:#15171b;--ink-2:#3d424a;--steel:#646a73;--line:#d8dbd4;--live:#1e7a46;--night:#131518;--night-2:#1c1f23;--night-line:#2c3035;--chalk:#ecedea;--chalk-2:#a9aea8;--font:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;--ease:cubic-bezier(.16, 1, .3, 1);--gutter:clamp(20px, 5vw, 72px);--max:1280px;--content:calc(var(--max) - 2 * var(--gutter));--edge:max(var(--gutter), calc((100vw - var(--content)) / 2));--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:17px;line-height:1.55}img,video{max-width:100%;height:auto;display:block}a{color:inherit}:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}.skip{z-index:100;background:var(--ink);color:var(--paper);border-radius:8px;padding:10px 14px;text-decoration:none;position:absolute;top:-60px;left:16px}.skip:focus{top:12px}.hero-title,.feature-title,.section-title,.contact-title,.project h3,.step h3{font-variation-settings:"wdth" 118;letter-spacing:-.035em;margin:0;font-weight:650}.btn{border:1px solid var(--line);min-height:48px;color:var(--ink);font:inherit;cursor:pointer;transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);background:0 0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 22px;font-size:15.5px;font-weight:560;text-decoration:none;display:inline-flex}.btn:hover{border-color:var(--ink)}.btn-solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}.btn-solid:hover{background:#000}.btn-small{min-height:38px;padding:0 16px;font-size:14px}.btn-light{color:var(--chalk);border-color:var(--night-line)}.btn-light:hover{border-color:var(--chalk)}.btn-light.btn-solid{background:var(--chalk);border-color:var(--chalk);color:var(--night)}.btn-light.btn-solid:hover{background:#fff}.live-dot{background:var(--live);vertical-align:1px;border-radius:50%;width:8px;height:8px;margin-right:10px;display:inline-block;box-shadow:0 0 0 4px #1e7a4624}.nav{z-index:50;padding:18px var(--edge);transition:background-color .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);border-bottom:1px solid #0000;align-items:center;gap:32px;display:flex;position:fixed;top:0;left:0;right:0}.nav.is-scrolled{-webkit-backdrop-filter:blur(14px)saturate(1.4);border-color:var(--line);background:#edefebe6;padding-top:12px;padding-bottom:12px}.nav.on-dark{color:var(--chalk)}.nav.on-dark.is-scrolled{border-color:var(--night-line);background:#131518e0}.nav-mark{font-variation-settings:"wdth" 112;letter-spacing:-.01em;align-items:center;gap:10px;font-weight:650;text-decoration:none;display:inline-flex}.nav-plate{border:5px solid;border-radius:50%;width:18px;height:18px}.nav-links{gap:28px;margin-left:auto;display:flex}.nav-links a,.nav-cta{opacity:.78;font-size:15px;text-decoration:none;transition:opacity .3s}.nav-links a:hover,.nav-cta:hover{opacity:1}.nav-cta{opacity:1;border-bottom:1px solid;font-weight:560}@media (width<=720px){.nav-links{display:none}.nav-cta{margin-left:auto}}.phone{aspect-ratio:780/1688;background:#0d0e10;border-radius:46px;width:300px;padding:10px;position:relative;box-shadow:inset 0 0 0 1px #ffffff0f,0 1px 1px #0000000f,0 18px 40px -12px #15171b47,0 60px 90px -40px #15171b59}.phone>img,.phone-screen{object-fit:cover;border-radius:37px;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;left:10px}.phone-screen{opacity:0;transition:opacity .9s var(--ease), transform 1.2s var(--ease);transform:scale(1.025)}.phone-screen.is-on{opacity:1;transform:none}.hero{min-height:100svh;max-width:var(--max);padding:112px var(--gutter) 56px;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:clamp(32px,6vw,96px);margin:0 auto;display:grid}.hero-title{font-variation-settings:"wdth" 125;letter-spacing:-.045em;white-space:nowrap;font-size:clamp(56px,6.8vw,108px);font-weight:720;line-height:.9}.hero-role{font-variation-settings:"wdth" 112;letter-spacing:-.025em;max-width:20ch;color:var(--ink);margin:22px 0 0;font-size:clamp(26px,2.7vw,40px);font-weight:600;line-height:1.08}.hero-title .line{padding-bottom:.06em}.hero-lede{max-width:36em;color:var(--ink-2);margin:26px 0 0;font-size:clamp(17px,1.35vw,19.5px)}.hero-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;margin:30px 0 0;padding:0;list-style:none;display:grid}.hero-index a{border:1px solid var(--line);background:var(--sheet);height:100%;transition:border-color .35s var(--ease), transform .5s var(--ease);border-radius:14px;gap:2px;padding:14px 16px;text-decoration:none;display:grid}.hero-index a:hover{border-color:var(--ink);transform:translateY(-2px)}.hero-index b{font-size:15.5px;font-weight:620}.hero-index span{color:var(--steel);font-size:13.5px}.hero-status{color:var(--steel);margin:26px 0 0;font-size:15px}.hero-status a{color:var(--ink);margin:6px 0 0 18px;font-weight:560;display:inline-block}@media (width<=600px){.hero-index{grid-template-columns:1fr}.hero-title{font-size:15vw}}.hero-device{justify-self:center;justify-items:center;gap:22px;display:grid}.hero-device .phone{width:clamp(200px,min(20vw,46.2107svh - 115.527px),290px)}@media (width<=900px){.hero-device .phone{width:clamp(230px,62vw,290px)}}.hero-device-foot{text-align:center;justify-items:center;gap:12px;display:grid}.hero-device-foot p{color:var(--steel);margin:0;font-size:14px}@media (width<=900px){.hero{grid-template-columns:1fr;gap:0;min-height:auto;padding-top:112px}.hero-copy{display:contents}.hero-title{order:1}.hero-role{order:2}.hero-lede{order:3}.hero-device{order:4;margin-top:36px}.hero-index{order:5}.hero-status{order:6}.hero-device{margin-top:12px}}.feature{background:var(--night);color:var(--chalk);padding:clamp(96px, 12vw, 160px) var(--edge) clamp(80px, 10vw, 140px);border-radius:28px 28px 0 0}.feature-intro{margin:0 auto}.feature-label{color:var(--chalk-2);margin:0 0 18px;font-size:15px}.feature-title{font-size:clamp(40px,5vw,76px);line-height:.92}.feature-lede{max-width:36em;color:var(--chalk-2);margin:30px 0 0;font-size:clamp(17px,1.4vw,20px)}.feature-facts{border-top:1px solid var(--night-line);grid-template-columns:repeat(4,minmax(0,1fr));margin:48px 0 0;padding:0;list-style:none;display:grid}.feature-facts li{color:var(--chalk-2);padding:18px 20px 0 0;font-size:15px;line-height:1.45}.feature-facts b{color:var(--chalk);font-size:16.5px;font-weight:600;display:block}@media (width<=860px){.feature-facts{grid-template-columns:1fr 1fr;row-gap:8px}}.story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);margin:clamp(64px,9vw,120px) auto 0;display:grid}.step{opacity:.32;max-width:30em;min-height:72vh;transition:opacity .6s var(--ease);flex-direction:column;justify-content:center;display:flex}.step.is-active{opacity:1}.step h3{font-size:clamp(28px,3.1vw,44px);line-height:1.02}.step p{color:var(--chalk-2);margin:16px 0 0;font-size:17.5px}.step-shot{display:none}.story-stage{position:relative}.story-device{place-items:center;height:min(660px,76vh);display:grid;position:sticky;top:calc(50vh - min(330px,38vh))}.phone-lg{z-index:2;width:auto;height:100%;transition:transform 1s var(--ease);box-shadow:inset 0 0 0 1px #ffffff14,0 40px 80px -30px #000000b3}@media (width<=900px){.story{grid-template-columns:1fr}.story-stage{display:none}.step{opacity:1;border-top:1px solid var(--night-line);min-height:0;padding:40px 0}.step-shot{border:8px solid #0d0e10;border-radius:30px;width:min(280px,72vw);margin:28px auto 0;display:block;box-shadow:0 30px 60px -30px #000000b3}}.tablet{margin:clamp(80px,10vw,140px) auto 0}.tablet-frame{background:#0d0e10;border-radius:28px;padding:12px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff12,0 50px 100px -40px #000c}.tablet-frame img{border-radius:18px;width:100%}.tablet figcaption{color:var(--chalk-2);text-align:center;margin-top:18px;font-size:15px}.feature-links{flex-wrap:wrap;justify-content:center;gap:12px;margin:48px auto 0;display:flex}.projects,.about,.toolbox{padding:clamp(96px, 12vw, 160px) var(--edge) 0;margin:0 auto}.section-title{max-width:16ch;font-size:clamp(30px,3.4vw,50px);line-height:1}.project{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(32px,5vw,80px);margin-top:clamp(64px,9vw,120px);display:grid}.project-flip .project-media{order:2}.project-media{position:relative}.browser,.player{background:var(--sheet);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px #15171b0a,0 30px 60px -36px #15171b52}.browser-dark{background:#0f1115;border-color:#23262c}.browser-bar{border-bottom:1px solid var(--line);background:var(--sheet);gap:6px;padding:12px 14px;display:flex}.browser-dark .browser-bar{background:#0f1115;border-color:#23262c}.browser-bar i{background:var(--line);border-radius:50%;width:10px;height:10px}.browser-shot{aspect-ratio:16/11;background:inherit;overflow:hidden}.browser-shot video{object-fit:contain;background:#000;width:100%;height:100%}.browser img{aspect-ratio:16/11;object-fit:cover;object-position:top;transform-origin:top;width:100%}.player{background:#000;border-color:#000}.player video{aspect-ratio:16/9;object-fit:cover;width:100%}video::cue{font-family:var(--font);color:#fff;background:#0000009e;font-size:17px}.sample{border:1px solid var(--line);background:var(--sheet);width:100%;color:var(--ink-2);font:inherit;text-align:left;cursor:pointer;transition:border-color .3s var(--ease);border-radius:14px;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;font-size:15px;display:flex}.sample:hover{border-color:var(--ink)}.sample b{color:var(--ink);font-weight:620}.sample-icon{background:var(--ink);border-radius:50%;flex:none;width:36px;height:36px;position:relative}.sample-icon:after{content:"";border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--paper);position:absolute;top:11px;left:14px}.sample.is-playing .sample-icon:after{border:0;border-left:4px solid var(--paper);border-right:4px solid var(--paper);box-sizing:content-box;width:4px;height:12px;top:12px;left:12px}.project h3{font-size:clamp(26px,2.4vw,36px);line-height:1}.project-what{color:var(--ink-2);margin:14px 0 0;font-size:clamp(18px,1.5vw,21px)}.project-text ul{gap:12px;margin:24px 0 0;padding:0;list-style:none;display:grid}.project-text li{color:var(--ink-2);padding-left:22px;font-size:16px;position:relative}.project-text li:before{content:"";background:var(--steel);width:10px;height:1.5px;position:absolute;top:.68em;left:0}.project-stack{color:var(--steel);margin:22px 0 0;font-size:14.5px}.project-links{gap:22px;margin:22px 0 0;display:flex}.project-note{color:var(--steel);margin:12px 0 0;font-size:13.5px}.subs{color:#eceeea;background:#101215;border-radius:16px;min-height:300px;padding:clamp(20px,3vw,32px);box-shadow:0 30px 60px -36px #15171b73}.subs video{background:#000;border-radius:10px;width:100%;display:block}.subs-head{color:#a9aea8;margin:0 0 18px;font-size:14px}.subs-list{gap:14px;margin:0;padding:0;list-style:none;display:grid}.subs-list li{background:#1a1d21;border-radius:12px;gap:6px;padding:16px 18px;display:grid}.subs-time{color:#8e938d;font-variant-numeric:tabular-nums;font-size:13px}.subs-list [lang=ja]{color:#c9ccc7;font-size:18px;line-height:1.5;font-family:"Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", var(--font)}.subs-list li>span:last-child{color:#fff;font-size:18px;font-weight:560}.subs-foot{color:#8e938d;margin:18px 0 0;font-size:13px}.smaller{border-top:1px solid var(--line);margin-top:clamp(64px,8vw,104px);padding-top:22px}.smaller-title{color:var(--steel);margin:0 0 10px;font-size:15px;font-weight:560}.smaller-row{color:var(--ink-2);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 32px;margin:0;display:flex}.smaller-row b{color:var(--ink);font-weight:620}.smaller-links{gap:20px;font-weight:600;display:flex}.project-links a{transition:background-size .45s var(--ease);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;font-weight:600;text-decoration:none}.project-links a:hover{background-position:100% 100%;background-size:0% 1.5px}@media (width<=900px){.project{grid-template-columns:1fr}.project-flip .project-media{order:0}}.about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,6vw,96px);display:grid}.about-copy p{max-width:32em;color:var(--ink-2);margin:24px 0 0;font-size:18px}.path{margin:8px 0 0;padding:0 0 0 28px;list-style:none;position:relative}.path-line{background:var(--line);width:2px;position:absolute;top:10px;bottom:10px;left:4px}.path-line span{background:var(--ink);transform-origin:top;height:100%;display:block}.path li{grid-template-columns:96px 1fr;gap:16px;padding:0 0 34px;display:grid;position:relative}.path li:before{content:"";background:var(--paper);border:2px solid var(--ink);border-radius:50%;width:12px;height:12px;position:absolute;top:6px;left:-29px}.path-when{font-variant-numeric:tabular-nums;color:var(--steel);padding-top:1px;font-size:15px}.path h3{margin:0;font-size:18px;font-weight:620}.path p{color:var(--steel);margin:4px 0 0;font-size:15.5px}@media (width<=860px){.about{grid-template-columns:1fr}}.toolbox-grid{border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));margin:44px 0 0;display:grid}.toolbox-grid div{border-bottom:1px solid var(--line);padding:22px 24px 26px 0}.toolbox-grid dt{font-size:16px;font-weight:620}.toolbox-grid dd{color:var(--steel);margin:6px 0 0;font-size:15.5px}@media (width<=860px){.toolbox-grid{grid-template-columns:1fr 1fr}}@media (width<=520px){.toolbox-grid{grid-template-columns:1fr}}.contact{background:var(--night);color:var(--chalk);padding:clamp(96px, 12vw, 170px) var(--gutter) clamp(80px, 9vw, 120px);text-align:center;border-radius:28px 28px 0 0;margin-top:clamp(96px,12vw,160px)}.contact-title{max-width:14ch;margin:0 auto;font-size:clamp(38px,5.6vw,84px);line-height:.98}.contact-text{max-width:34em;color:var(--chalk-2);margin:28px auto 0;font-size:18px}.contact-mail{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:40px;display:flex}.contact-mail a{font-variation-settings:"wdth" 110;word-break:break-all;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:4px;font-size:clamp(20px,2.6vw,34px);font-weight:560;text-decoration:none}.contact-links{justify-content:center;gap:12px;margin-top:30px;display:flex}.footer{background:var(--night);color:var(--chalk-2);padding:28px var(--edge) 36px;border-top:1px solid var(--night-line);flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:14px;display:flex}.footer p{margin:0}.app-dialog{background:0 0;border:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0}.app-dialog::backdrop{-webkit-backdrop-filter:blur(10px);background:#0a0b0db8}.app-dialog[open] .app-dialog-body{animation:dialog-in .7s var(--ease) both}@keyframes dialog-in{0%{opacity:0;transform:translateY(28px)scale(.97)}}.app-dialog-body{height:100%;color:var(--chalk);grid-template-rows:auto 1fr auto;justify-items:center;gap:16px;padding:20px 16px 24px;display:grid}.app-dialog-head{justify-content:space-between;align-items:center;gap:12px;width:min(420px,100%);display:flex}.app-dialog-head p{color:var(--chalk-2);margin:0;font-size:14px}.app-close{font:inherit;color:var(--chalk);cursor:pointer;background:#ffffff1a;border:0;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600}.phone-live{width:auto;height:100%;max-height:820px}.phone-live-screen{clip-path:inset(0 round 37px);isolation:isolate;background:var(--paper);border-radius:37px;position:absolute;inset:10px;overflow:hidden}.phone-live iframe{border:0;width:100%;height:100%;display:block}.app-dialog-note{color:var(--chalk-2);text-align:center;margin:0;font-size:14px}.has-motion [data-hero-fade],.has-motion [data-hero-device]{opacity:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
