
:root{--fs:13.5px;--bg:#161c25;--line:#2a3340;--text:#e6ebf2;--muted:#a9b4c3;--blue:#6aa5e3;--orange:#f5a300;--hh:92px;--lw:360px;--rw:270px;--gp:48px}
*{box-sizing:border-box}html{scroll-padding-top:calc(var(--hh) + 16px)}body{margin:0;background:var(--bg);color:var(--text);font:var(--fs)/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--blue)}
header{position:fixed;top:0;left:0;right:0;height:var(--hh);background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:0;padding:0 32px;z-index:5}
header .logo{width:calc(var(--lw) + var(--gp) - 32px);flex:none}header .logo img{height:46px;display:block}
header h1{font-size:26px;font-weight:500;margin:0;letter-spacing:-.01em;line-height:1.25}
header p{margin:2px 0 0;color:var(--muted);font-size:15px}
.right{position:fixed;top:var(--hh);bottom:0;right:0;width:var(--rw);border-left:1px solid var(--line);padding:26px 26px;display:flex;flex-direction:column;overflow:auto;background:var(--bg)}
.btn{display:block;text-align:center;text-decoration:none;font-weight:600;font-size:var(--fs);padding:13px 16px;border-radius:8px;background:var(--orange);color:#1a1405}
.btn:hover,.btn:focus-visible{filter:brightness(1.08)}
.small{font-size:var(--fs);color:var(--muted);text-align:center;margin:12px 0 0}
.req{margin-top:24px;font-size:var(--fs);line-height:1.55;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}
.req b{color:var(--text);font-weight:600}
.legal{margin-top:auto;font-size:var(--fs);display:flex;gap:6px 14px;justify-content:center;flex-wrap:wrap;padding-top:20px}
.legal .em{flex-basis:100%;text-align:center}.legal a{color:var(--text);text-decoration:none;font-weight:500}.legal a:hover{text-decoration:underline}
.layout{margin:var(--hh) var(--rw) 0 0;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);align-items:start;background:linear-gradient(var(--line),var(--line)) var(--lw) 0/1px 100% no-repeat}
.left{padding:30px 30px 60px}.intro{margin:0 0 22px;font-size:var(--fs);line-height:1.6;color:#d5dce7}
.facts{list-style:none;margin:0 0 32px;padding:0}
.facts li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line);position:relative;color:#d5dce7;font-size:var(--fs);line-height:1.5}
.facts li:first-child{padding-top:0}
.facts li:before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.facts li:first-child:before{top:7px}
.note h2{font-size:var(--fs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 14px}
.note p{margin:0 0 12px;font-size:var(--fs);line-height:1.65;color:#cfd7e3}
.sig{color:var(--muted);font-size:var(--fs);margin-top:6px;line-height:1.5}
.gallery{padding:30px var(--gp) 60px;min-width:0}.gallery .in{max-width:none}
.gallery h2{font-size:var(--fs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 16px}
figure{margin:0 0 30px}
figcaption{font-size:var(--fs);color:var(--muted);margin-top:10px}
.cmp{position:relative;background:#10151c;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:var(--ar,2/1);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;outline-offset:3px;--p:50%}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp .before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.cmp .handle:after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;color:#161c25;display:grid;place-items:center;font-size:17px;font-weight:700}
.tag{position:absolute;bottom:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:rgba(10,14,20,.72);padding:4px 10px;border-radius:20px;pointer-events:none}
.modes{display:flex;gap:8px;margin-top:10px}.modes button{font:inherit;font-size:var(--fs);color:var(--muted);background:none;border:1px solid var(--line);border-radius:20px;padding:4px 16px;cursor:pointer}.modes button[aria-pressed=true]{color:#1a1405;background:var(--orange);border-color:var(--orange)}.modes button:hover{color:var(--text)}.modes button[aria-pressed=true]:hover{color:#1a1405}
.tag.l{left:14px}.tag.r{right:14px}
.totop{grid-column:1/-1;text-align:center;padding:10px 0 40px;font-size:var(--fs)}.totop a{color:var(--muted);text-decoration:none}.totop a:hover{color:var(--text)}
.mfoot{display:none}.mfoot .em{flex-basis:100%;text-align:center}
/* legal pages */
.doc{margin:var(--hh) 0 0;padding:36px 32px 80px}
.doc .wrap{max-width:860px;margin:0 auto}
.doc h1{font-size:26px;font-weight:500;margin:0 0 4px}
.doc p.meta{color:var(--muted);font-size:var(--fs);margin:0 0 2px}
.doc h2{font-size:var(--fs);margin:34px 0 10px;font-weight:600}
.doc p{margin:0 0 10px;color:#d5dce7;font-size:var(--fs);overflow-wrap:anywhere}
.doc p.item{padding-left:2.6em;text-indent:-2.6em}
.doc p.sub{padding-left:4.6em;text-indent:-2em}
.doc .back{display:inline-block;margin-bottom:18px;text-decoration:none;font-size:var(--fs)}.doc .totop{text-align:left;padding:26px 0 0}
.doc .legal{justify-content:flex-start;margin-top:40px;border-top:1px solid var(--line)}.doc .legal .em{flex-basis:auto;text-align:left}
@media(max-width:1180px){
 header{position:static;height:auto;flex-direction:column;align-items:flex-start;gap:12px;padding:22px;border:0}
 header h1{font-size:24px}
 header .logo{width:auto}
 .right{position:static;width:auto;border:0;padding:4px 22px 22px;overflow:visible}
 .right .legal{display:none}
 .layout{margin:0;display:flex;flex-direction:column;align-items:stretch}
 .gallery,.gallery .in,.cmp{width:100%}
 .left{display:contents}
 .layout{background:none}
 .intro{order:0;padding:0 22px;margin:0 0 14px}
 .facts{order:1;padding:0 22px;margin:0 0 8px}
 .gallery{order:2;padding:18px 22px 8px}.gallery .in{max-width:none}
 .note{order:3;padding:12px 22px 12px}
 .totop{order:4;padding:6px 0 18px}
 .mfoot{display:flex;gap:8px 18px;flex-wrap:wrap;justify-content:center;padding:18px 22px 40px;border-top:1px solid var(--line)}
 .mfoot a{color:var(--text);text-decoration:none;font-weight:500}
 .doc{margin:0;padding:8px 22px 60px}
 .cmp{touch-action:pan-y}
}
@media(prefers-reduced-motion:no-preference){.btn{transition:filter .15s}}
