:root{--stage-green:#17554e;--stage-red:#a63229;--stage-gold:#ab884b;--stage-ink:#202c29;--stage-paper:#f6f2ea}
.uoken-stage{position:relative;isolation:isolate;min-height:670px;height:calc(100svh - 98px);max-height:860px;color:var(--stage-ink);background:linear-gradient(rgba(246,242,234,.35),rgba(246,242,234,.35)),url('/assets/img/bg-fishscale-washi.webp') center/cover,var(--stage-paper);overflow:hidden;letter-spacing:0;border-bottom:1px solid #d9cdb7}
.uoken-stage::before{content:'';position:absolute;z-index:-1;left:calc(50% - 110px);bottom:-100px;width:420px;height:420px;background:url('/design/brand/uoken-mark.jpg') center/contain no-repeat;opacity:.065;mix-blend-mode:multiply;pointer-events:none}
.uoken-stage::after{content:'';position:absolute;bottom:0;left:3%;right:3%;height:1px;background:var(--stage-gold);opacity:.3}
.stage-brand{position:relative;z-index:4;mix-blend-mode:multiply;display:flex;align-items:center;flex-direction:column;text-align:center;width:36%;max-width:530px;margin:0 auto;padding-top:35px;pointer-events:none}
.stage-origin{display:flex;align-items:center;justify-content:center;gap:13px;font:500 10px/1.5 var(--sans);letter-spacing:.06em;color:#685c46;margin:0 0 20px}
.stage-origin i{height:1px;width:25px;background:var(--stage-gold)}
.stage-emblem{position:relative;width:132px;height:132px;margin-bottom:8px;background:transparent}
.stage-emblem>img{height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply}
.stage-seal{position:absolute;right:-62px;top:48px;padding:5px 6px;border:1px solid #b45a4c;color:var(--stage-red);font:500 12px/1.35 var(--serif);letter-spacing:2px;transform:rotate(3deg)}
.uoken-stage .stage-name{font:700 110px/1.1 var(--serif);color:var(--stage-green);letter-spacing:-.06em;margin:0 0 20px;display:flex;align-items:center;gap:13px}
.stage-name>span{writing-mode:vertical-rl;letter-spacing:.08em;font:500 19px/1.2 var(--serif);color:#5c6259}
.stage-promise p{margin:0;font:600 25px/1.65 var(--serif)}
.stage-promise em{font-style:normal;color:var(--stage-red);border-bottom:1px solid var(--stage-gold);padding-bottom:2px}
.stage-promise p+p{font-size:36px;color:var(--stage-green)}
.stage-promise p+p span{color:var(--stage-ink)}
.stage-small{font:400 12px/1.9 var(--sans);color:#61665f;margin:18px 0 0}
.stage-stories{position:absolute;inset:0}
.stage-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1400ms ease-in-out,visibility 1400ms;pointer-events:none}
.stage-scene.is-current{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.stage-photo{position:absolute;margin:0;width:calc((100% - 330px)/2 - 12px);max-width:none}
.stage-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(116,106,83,.18)}
.stage-photo--left{left:12px;top:28px}
.stage-photo--right{right:12px;top:104px}
.stage-photo--right img{aspect-ratio:4/3;object-position:50% 50%}
.stage-photo figcaption{display:flex;align-items:center;font:500 13px/1.7 var(--serif);color:#575e51;margin-top:8px;gap:12px}
.stage-photo--left figcaption span:first-child{font:500 13px/1.7 var(--sans);color:var(--stage-gold);padding-right:11px;border-right:1px solid #c7b796}
.stage-photo--right figcaption{justify-content:flex-end}
.stage-shop{position:absolute;left:18px;bottom:32px;width:27%;padding-left:17px;border-left:2px solid var(--stage-gold)}
.stage-shop__type{font:400 11px/1.6 var(--sans);color:#77715e}
.stage-shop h2{font:600 30px/1.5 var(--serif);color:var(--stage-green);letter-spacing:0;margin:3px 0}
.stage-shop a{display:inline-flex;align-items:center;justify-content:space-between;min-width:140px;min-height:44px;font:500 12px/1.8 var(--sans);border-bottom:1px solid #b9ac95}
.stage-shop a span{font-size:23px;margin-left:36px;transition:transform .2s}
.stage-shop a:hover span{transform:translate(3px,-3px)}
.stage-controls{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;align-items:center;width:680px;max-width:86%;gap:24px;z-index:6}
.stage-tabs{display:grid;grid-template-columns:1fr .9fr 1.35fr;gap:22px;flex:1}
.stage-tab{position:relative;display:flex;align-items:center;gap:11px;padding:10px 0 12px;background:transparent;color:#8b8b7b;border:0;border-bottom:1px solid #cfc5b1;text-align:left;min-height:50px;cursor:pointer;white-space:nowrap}
.stage-tab>span{font:400 11px/1 var(--sans);color:var(--stage-gold)}
.stage-tab>b{font:500 14px/1.5 var(--serif)}
.stage-tab.is-current{color:var(--stage-green);border-bottom-color:var(--stage-green)}
.stage-tab i{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--stage-green)}
.stage-tab.is-current i{animation:stage-progress 7000ms linear forwards}
.is-paused .stage-tab.is-current i{animation:none;width:100%}
.stage-play{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #c5b799;border-radius:50%;color:var(--stage-green);background:transparent;cursor:pointer;font-size:15px}
.stage-play:hover{background:#e7e1d5}.stage-play:active{background:#d4cbb9}
.uoken-stage button:focus-visible,.uoken-stage a:focus-visible{outline:3px solid var(--stage-red);outline-offset:4px}
.stage-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}
@keyframes stage-progress{from{width:0}to{width:100%}}
@media(min-width:1700px){.stage-brand{padding-top:48px}.stage-emblem{width:150px;height:150px}.uoken-stage .stage-name{font-size:120px}.stage-photo--left{top:28px}.stage-photo--right{top:104px}.stage-shop{bottom:32px}}
@media(max-width:1120px) and (min-width:721px){.uoken-stage{height:740px;min-height:740px}.stage-brand{width:40%;padding-top:35px}.stage-emblem{width:110px;height:110px}.uoken-stage .stage-name{font-size:86px}.stage-promise p{font-size:22px}.stage-promise p+p{font-size:29px}.stage-photo{width:calc((100% - 300px)/2 - 8px)}.stage-photo--left{left:8px;top:76px}.stage-photo--right{right:8px;top:230px}.stage-shop h2{font-size:25px}.stage-seal{right:-48px;font-size:10px}.stage-controls{width:650px}}
@media(max-width:720px){
 .uoken-stage::before{left:auto;right:-110px;top:35px;bottom:auto;width:300px;height:300px;opacity:.055}
 .uoken-stage{height:auto;min-height:0;max-height:none;padding-bottom:76px;overflow:hidden}
 .stage-brand{width:100%;max-width:100%;padding:25px 20px 0;position:relative}
 .stage-origin{font-size:9px;margin-bottom:13px;gap:10px}.stage-origin i{width:18px}
 .stage-emblem{width:88px;height:88px;margin-bottom:4px}.stage-seal{top:28px;right:-52px;font-size:10px}
 .uoken-stage .stage-name{font-size:73px;gap:8px;margin-bottom:9px}.stage-name>span{font-size:14px}
 .stage-promise p{font-size:20px;line-height:1.5}.stage-promise p+p{font-size:27px}
 .stage-small{display:none}
 .stage-stories{position:relative;height:calc((100vw - 12px)/1.5 + 82px);margin-top:19px}
 .stage-photo{width:calc(100% - 12px);max-width:none;left:6px;right:auto;top:0;transform:none}
 .stage-photo--left img{aspect-ratio:1.5;object-position:50% 55%}
 .stage-photo--left figcaption{display:none}.stage-photo--left figcaption span:first-child{font-size:10px;padding-right:7px}
 .stage-photo--right{display:none}
 .stage-shop{top:calc((100vw - 12px)/1.5 + 12px);bottom:auto;left:16px;right:16px;width:auto;padding:0;border:0;display:grid;grid-template-columns:1fr auto;column-gap:15px;align-items:center}
 .stage-shop__type{grid-column:1;font-size:10px}.stage-shop h2{grid-column:1;font-size:24px;line-height:1.25;margin:0}
 .stage-shop a{grid-column:2;grid-row:1/3;font-size:11px;min-width:110px;border-bottom:1px solid #b9ac95}.stage-shop a span{font-size:20px;margin-left:15px}
 .stage-controls{bottom:35px;width:calc(100% - 40px);max-width:none;gap:12px}
 .stage-tabs{gap:11px}.stage-tab{display:block;min-height:54px;padding:5px 0 12px}.stage-tab>span{font-size:9px;display:block;margin-bottom:5px}.stage-tab>b{font-size:11px}.stage-play{width:44px;height:44px;font-size:13px}
}
@media(max-width:390px){.uoken-stage{min-height:0}.stage-promise p{font-size:19px}.stage-promise p+p{font-size:26px}}
@media(prefers-reduced-motion:reduce){.stage-scene,.stage-shop a span{transition:none}.stage-tab.is-current i{animation:none}}

@media(min-width:1121px){.stage-photo--left{bottom:178px}.stage-photo--right{bottom:108px}.stage-photo img{height:calc(100% - 31px);aspect-ratio:auto}}

@media(max-width:1120px) and (min-width:721px){.stage-shop{bottom:108px}}