@font-face { font-family:BrandJP;src:url('assets/jp-reg.woff') format('woff');font-weight:400;font-display:swap }
@font-face { font-family:BrandJP;src:url('assets/jp-bold.woff') format('woff');font-weight:600 900;font-display:swap }
@font-face { font-family:BrandExt;src:url('assets/jp-extra.woff') format('woff');font-display:swap }
@font-face { font-family:Roboto;src:url('assets/roboto-black.woff2') format('woff2');font-weight:900;font-display:swap }
@font-face { font-family:'Collection Serif';src:url('assets/display-italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap }
:root { color-scheme:dark;--ink:#0b1118;--night:#0c1621;--deep:#0b1420;--paper:#f1eee7;--text:#eae9e5;--gold:#d4b47b;--goldhi:#f0d49b;--muted:#abb3bd;--line:rgba(208,214,222,.18);--gap:clamp(24px,5.35vw,88px);
  --body:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',Meiryo,BrandJP,BrandExt,Arial,sans-serif;
  --latin:Arial,Helvetica,sans-serif;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--serif:'STIX Two Text','Collection Serif',Georgia,'Times New Roman',serif; }
*, *::before, *::after { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:91px;background:var(--ink) }
body { margin:0;color:var(--text);background:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility }
button, a { font:inherit;color:inherit;-webkit-tap-highlight-color:transparent }
a { text-decoration:none }
button { cursor:pointer;background:none;border:0 }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid #f9d99a;outline-offset:5px }
::selection { background:#c7a66e;color:#0a1018 }
[hidden] { display:none!important }
img { max-width:100%;display:block }
button, summary { touch-action:manipulation }
.wrap { width:calc(100% - var(--gap)*2);max-width:1392px;margin-inline:auto }
.sr-only, .skip:not(:focus) { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap }
.skip:focus { position:fixed;left:12px;top:12px;z-index:200;background:var(--gold);color:#000;padding:12px 18px }
.topbar { position:sticky;top:0;background:rgba(9,14,20,.96);border-bottom:1px solid rgba(185,169,138,.2);z-index:20 }
.header-inner { height:78px;display:flex;align-items:center;gap:clamp(24px,3.8vw,58px) }
.brand { display:inline-flex;align-items:center;flex:none }
.brand img { width:151px;height:auto }
.footer-links a:hover { color:var(--goldhi) }
.header-lineup { border:1px solid #8e7854;color:#e5c790;min-height:40px;padding:0 19px;display:inline-flex;align-items:center;gap:25px;font-size:12px;font-weight:700;letter-spacing:.07em;transition:background .2s,color .2s }
.header-lineup:hover { background:#d4b47b;color:#11151c }
.arrow { display:inline-block;position:relative;width:17px;height:13px;flex:0 0 17px;align-self:center;color:inherit }
.arrow::before { content:'';position:absolute;top:6px;left:0;width:16px;height:1px;background:currentColor }
.arrow::after { content:'';position:absolute;width:6px;height:6px;right:1px;top:3.5px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg) }
.arrow.diag { transform:rotate(-45deg) }
.arrow.left { transform:rotate(180deg) }
.arrow.down { transform:rotate(90deg) }
.arrow.up { transform:rotate(-90deg) }
.hero { isolation:isolate;position:relative;overflow:hidden;background:#0b1521;border-bottom:1px solid rgba(225,208,168,.19) }
.hero::before { content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 73% 48%,#4d606c 0%,#384a5a 17%,#1d3041 34%,#101e2e 52%,#0a141f 73%,#09101a 96%) }
.hero::after { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(7,13,20,.69),transparent 24%),linear-gradient(90deg,rgba(7,13,21,.42),transparent 50%) }
.hero-light { position:absolute;z-index:-1;inset:0 0 0 32%;opacity:.38;pointer-events:none;background:url('assets/studio-light.webp') no-repeat 76% top/cover;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent,#000 22%) }
.hero-grid { display:grid;grid-template-columns:46% 54%;align-items:center;min-height:clamp(570px,43vw,697px);position:relative }
.hero-copy { position:relative;z-index:3;padding-block:60px 70px;pointer-events:none }
.hero-copy a { pointer-events:auto }
.eyebrow { display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--gold);font:600 10px/1.35 var(--latin);letter-spacing:.18em }
.eyeline { width:31px;height:1px;flex:none;background:var(--gold) }
.hero-launch { margin:0 0 25px;font-size:11px;letter-spacing:.2em }
.hero-launch [lang=ja] { font:600 11px/1.3 var(--body);letter-spacing:.09em;color:#e1c391 }
.launch-dot { width:3px;height:3px;border-radius:50%;background:#8f7f63 }
.hero h1 { margin:0;font-weight:400;line-height:1;display:flex;flex-direction:column;align-items:flex-start }
.hero-rfs { font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:clamp(47px,5.45vw,88px);letter-spacing:-.059em;line-height:.95;white-space:nowrap;color:#f3f0ea }
.hero-collection { margin-left:-.035em;letter-spacing:-.068em;font:italic 400 clamp(85px,8.3vw,139px)/.83 var(--serif);color:#d9ba82;display:block;padding-bottom:.065em }
.hero-lede { font-size:clamp(20px,1.8vw,31px);letter-spacing:.045em;font-weight:700;line-height:1.5;margin:28px 0 10px;color:#f1f0eb }
.hero-description { font-size:clamp(13px,.97vw,17px);line-height:1.95;letter-spacing:.04em;color:#c1c8ce;margin:0 }
.hero-actions { display:flex;align-items:center;gap:clamp(20px,2.4vw,38px);margin-top:31px }
.btn { min-height:50px;display:inline-flex;justify-content:center;align-items:center;gap:23px;padding:12px 24px;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.055em;transition:background .18s,transform .18s;color:var(--ink) }
.btn-gold { background:#d5b67f;border:1px solid #d9be8e;box-shadow:0 3px 8px rgba(0,0,0,.12) }
.btn-gold:hover { background:#ead09e;transform:translateY(-1px) }
.exhibit { position:relative;z-index:2;align-self:stretch;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:28px 0 23px }
.exhibit-stage { position:relative;display:grid;place-items:center;isolation:isolate;min-width:0;height:clamp(369px,33.2vw,530px) }
.technical-ring { position:absolute;left:50%;top:49%;width:73%;aspect-ratio:1;transform:translate(-48%,-49%);border:1px solid rgba(232,219,184,.14);border-radius:50%;z-index:-1;pointer-events:none }
.technical-ring::before { content:'';position:absolute;inset:6.3%;border-radius:50%;border:1px dashed rgba(230,216,179,.095) }
.reg { position:absolute;width:13px;height:13px;color:rgba(225,212,180,.48);pointer-events:none }
.reg::before, .reg::after { content:'';position:absolute;left:6px;top:0;width:1px;height:13px;background:currentColor }
.reg::after { transform:rotate(90deg) }
.reg-a { left:5%;bottom:22% }
.reg-b { right:3%;top:19% }
.floor-pool { position:absolute;z-index:-1;bottom:2%;left:13%;width:76%;height:11%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.76) 0%,rgba(0,0,0,.41) 38%,transparent 71%);filter:blur(6px);pointer-events:none }
.hero-product { position:absolute;inset:2% 2%;height:96%;width:96%;object-fit:contain;object-position:center;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35));align-self:center;transition:opacity .16s ease }
.exhibit-footer { display:flex;align-items:center;justify-content:space-between;padding:16px 0 0;margin:9px 1% 0 6%;border-top:1px solid rgba(219,209,188,.33);position:relative;gap:8px }
.exhibit-footer::before { content:'';position:absolute;top:-1px;left:0;width:40px;height:1px;background:var(--gold) }
.exhibit-caption { display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0;padding:2px 0 }
.exhibit-caption:hover .exhibit-name { color:var(--goldhi) }
.exhibit-code { font:500 10px/1.15 var(--mono);letter-spacing:.18em;color:#dec38e }
.exhibit-name { font:500 clamp(22px,1.95vw,34px)/1.05 var(--latin);letter-spacing:-.038em;color:#f0efe9 }
.gallery-control { display:flex;align-items:center;gap:8px;white-space:nowrap }
.gallery-count { color:#afb8c0;font:11px/1 var(--mono);letter-spacing:.04em;display:flex;gap:8px;align-items:center;margin-right:7px }
.gallery-count b { font-weight:600;color:#e3c68e }
.gallery-count span { color:#7d8a94 }
.round, .to-top { width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid rgba(212,213,208,.49);border-radius:100%;color:#e6e4db;transition:background .18s,border-color .18s }
.round:hover, .to-top:hover { border-color:var(--gold);background:rgba(220,183,120,.12);color:var(--goldhi) }
.section-space { padding-block:clamp(72px,6.2vw,102px) }
.lineup { background:#0c1117 }
.section-head { display:flex;align-items:flex-end;justify-content:space-between;gap:20px }
.section-head .eyebrow { margin-bottom:12px }
.section-head h2 { margin:0;color:#f1eee8;font-size:clamp(28px,2.7vw,50px);line-height:1.42;letter-spacing:.035em;font-weight:700 }
.count-inline { display:inline-block;vertical-align:middle;margin:0 0 3px 17px;padding:3px 8px;color:#dbc18e;border:1px solid rgba(205,175,119,.52);font-size:11px;font-weight:600;letter-spacing:.03em }
.catalog-link { display:inline-flex;min-height:40px;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.025em;border-bottom:1px solid #716b5d;margin-bottom:4px }
.catalog-link:hover { color:var(--goldhi) }
.file-type { font:10px var(--mono);color:var(--gold) }
.paper-icon { display:block;width:12px;height:15px;border:1px solid #c8b282;position:relative }
.paper-icon::before, .paper-icon::after { position:absolute;content:'';background:#c8b282;left:2px;width:6px;height:1px;top:6px }
.paper-icon::after { top:9px }
.filter-bar { margin:28px 0 24px;display:flex;gap:8px }
.filter { min-height:36px;border:1px solid #3b4248;padding:7px 16px;display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.03em;color:#bdc2c5;border-radius:3px;transition:background .2s,border-color .2s }
.filter span { font:11px var(--mono);opacity:.8 }
.filter[aria-pressed=true] { background:#d5ba88;border-color:#d5ba88;color:#151b21;font-weight:700 }
.filter:hover:not([aria-pressed=true]) { border-color:#9b8967;color:var(--goldhi) }
.product-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:31px 22px;align-items:start }
.product { min-width:0;border:1px solid #333a41;background:#121920;transition:border-color .18s }
.product:hover, .product[open] { border-color:#806f55 }
.product summary { display:block;list-style:none;cursor:pointer }
.product summary::-webkit-details-marker { display:none }
.product-picture { height:auto;aspect-ratio:1.53;overflow:hidden;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 48% 35%,#71808a 0%,#586670 47%,#424f59 78%,#36434f 100%) }
.product-picture::before { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(208,218,222,.12),transparent 36%,rgba(15,24,33,.03)),linear-gradient(0deg,rgba(12,18,25,.18),transparent 24%) }
.product-picture::after { content:'';inset:auto 6% 13%;height:1px;position:absolute;z-index:-1;background:linear-gradient(90deg,transparent,rgba(213,219,221,.19),transparent) }
.plate-meta { position:absolute;left:16px;right:16px;top:12px;display:flex;justify-content:space-between;align-items:center;gap:6px;z-index:2 }
.model-code { font:11px var(--mono);color:#f1f0e8;letter-spacing:.1em }
.new-model { font:700 9px/1 var(--latin);letter-spacing:.12em;border:1px solid #d8c29a;color:#f5e3bb;background:rgba(19,26,31,.68);padding:4px 6px }
.product-picture img { width:86%;height:82%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 5px 5px rgba(0,0,0,.28));transition:transform .35s;transform:translateY(3%) }
.product summary:hover .product-picture img { transform:translateY(2%) scale(1.033) }
.product-shadow { position:absolute;z-index:-1;left:22%;width:56%;height:9%;bottom:8%;background:radial-gradient(ellipse,rgba(11,15,18,.5),transparent 72%);filter:blur(3px) }
.plate-region { position:absolute;right:12px;bottom:9px;z-index:2;font-size:10px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 4px #263340 }
.product-body { display:flex;flex-direction:column;align-items:stretch;padding:19px 20px 0 }
.product-en { font:500 10px/1.3 var(--mono);letter-spacing:.13em;color:#c9af80;text-transform:uppercase }
.product-name { font-size:clamp(17px,1.45vw,23px);line-height:1.55;margin-top:5px;color:#f1efe8;letter-spacing:.035em }
.product-desc { display:block;font-size:13px;line-height:1.85;letter-spacing:.015em;color:#bfc7cd;margin-top:7px;min-height:3.7em }
.spec-toggle { display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:17px;min-height:46px;font-size:12px;letter-spacing:.035em;color:#e1c69a }
.plus { width:15px;height:15px;position:relative }
.plus::before, .plus::after { position:absolute;content:'';left:1px;top:7px;width:13px;height:1px;background:currentColor }
.plus::after { transform:rotate(90deg) }
.product[open] .plus::after { display:none }
.when-open, .product[open] .when-closed { display:none }
.product[open] .when-open { display:inline }
.product-spec { background:#11171d;border-top:1px solid var(--line);padding:4px 20px 18px }
.product-spec dl { margin:0 0 14px }
.product-spec dl>div { display:flex;justify-content:space-between;gap:8px;align-items:center;border-bottom:1px solid rgba(208,214,222,.13);padding:11px 0 }
.product-spec dt { font-size:12px;color:#aeb7bf;line-height:1.5 }
.product-spec dt span, .product-spec dd span { font-size:10px;color:#b1bac1 }
.product-spec dt span { display:block }
.product-spec dd { margin:0;text-align:right;font:600 15px/1.4 Arial,var(--body);white-space:nowrap }
.product-spec dd small { font:11px var(--body) }
footer { background:#080c11 }
.footer-inner, .footer-id, .footer-links { display:flex;align-items:center }
.footer-inner { min-height:90px;justify-content:space-between;gap:20px }
.footer-id { gap:22px }
.footer-id .brand img { width:121px }
.footer-id>span { font-size:11px;color:#a6acb3;letter-spacing:.045em }
.footer-links { gap:22px }
.footer-links>a:first-child { display:flex;gap:6px;align-items:center;color:#bbc1c6;font-size:11px;line-height:1.5 }
.footer-links .arrow.diag { transform:rotate(-45deg) scale(.75) }
.to-top { width:34px;height:34px }
@media(min-width:1550px) {
.hero-grid { grid-template-columns:45% 55% }
.hero-product { width:95%;height:96% }
.product-desc { min-height:3.7em }
}
@media(max-width:1050px) {
.header-inner { height:66px }
.brand img { width:135px }
.hero-grid { grid-template-columns:45% 55%;min-height:510px }
.hero-copy { padding-block:45px }
.hero-rfs { font-size:5.3vw }
.hero-collection { font-size:8.7vw }
.hero-lede { font-size:20px;letter-spacing:.015em }
.hero-description { font-size:12px }
.hero-actions { gap:18px }
.hero-actions .btn { padding-inline:16px }
.exhibit-stage { height:clamp(315px,34vw,370px) }
.product-grid { gap:20px 16px }
.product-body { padding:16px 15px 0 }
.product-desc { font-size:12px }
.product-spec { padding-inline:15px }
}
@media(max-width:760px) {
:root { --gap:clamp(18px,5.15vw,30px) }
html { scroll-padding-top:76px }
.header-inner { height:60px;gap:15px }
.brand img { width:124px }
.header-lineup { margin-left:auto;min-height:34px;font-size:11px;gap:10px;padding:0 11px }
.header-lineup .arrow { transform:rotate(-45deg) scale(.78) }
.hero::before { background:radial-gradient(ellipse at 70% 71%,#485d6b 0%,#344857 21%,#213647 36%,#101f30 60%,#0a131f 84%) }
.hero::after { background:linear-gradient(0deg,#0b1422a1,transparent 24%) }
.hero-light { inset:20% -22% 0 -5%;opacity:.26;mask-image:linear-gradient(180deg,transparent,#000 35%,#000 82%,transparent) }
.hero-grid { grid-template-columns:1fr;min-height:0 }
.hero-copy { padding:36px 0 0 }
.hero-launch { margin-bottom:17px;font-size:10px;gap:10px }
.hero-launch [lang=ja] { font-size:10px }
.hero-rfs { font-size:clamp(45px,8.8vw,61px) }
.hero-collection { font-size:clamp(70px,14vw,88px) }
.hero-lede { font-size:clamp(20px,4.4vw,25px);margin:17px 0 5px;line-height:1.5 }
.hero-description { font-size:13px;line-height:1.8;max-width:470px;letter-spacing:.015em }
.desktop-break { display:none }
.hero-actions { margin-top:17px;gap:22px }
.hero-actions .btn { min-height:43px;font-size:12px;gap:15px;padding:10px 16px }
.exhibit { padding:5px 0 18px;max-width:570px;width:100%;margin:auto }
.exhibit-stage { height:clamp(234px,61vw,340px) }
.hero-product { inset:3.5% 4.5%;width:91%;height:93%;object-position:center }
.technical-ring { width:58%;top:50% }
.floor-pool { bottom:3% }
.reg-a { left:6% }
.reg-b { right:5%;top:19% }
.exhibit-footer { margin:2px 0 0;padding-top:11px }
.exhibit-code { font-size:9px }
.exhibit-name { font-size:22px }
.exhibit-caption { gap:4px }
.gallery-count { font-size:10px;gap:6px }
.round { width:36px;height:36px }
.gallery-control { gap:6px }
.section-space { padding-block:55px }
.section-head { align-items:flex-start }
.section-head h2 { font-size:clamp(25px,4.8vw,33px) }
.count-inline { margin-left:8px;font-size:10px;padding:2px 6px }
.product-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px }
.product-desc { min-height:0 }
.product-name { font-size:17px }
.footer-id { gap:12px }
.footer-id .brand img { width:97px }
.footer-links { gap:11px }
}
@media(max-width:520px) {
.section-head { gap:12px;flex-direction:column;align-items:flex-start }
.section-head .eyebrow { margin-bottom:8px }
.catalog-link { margin:0;min-height:34px;font-size:11px }
.filter-bar { margin:20px 0 17px;gap:7px }
.filter { min-height:38px;padding:6px 13px;font-size:11px;gap:8px }
.product-grid { grid-template-columns:1fr;gap:21px }
.product-picture { aspect-ratio:1.67 }
.product-picture img { height:82% }
.product-body { padding:17px 17px 0 }
.product-name { font-size:19px }
.product-desc { font-size:13px;line-height:1.8 }
.product-spec { padding-inline:17px }
.plate-meta { left:13px;right:13px }
.spec-toggle { min-height:47px }
.footer-inner { padding-block:22px;min-height:80px;gap:8px }
.footer-id { flex-direction:column;align-items:flex-start;gap:6px }
.footer-id>span { font-size:9px }
.footer-links>a:first-child { font-size:10px }
.hero-description { max-width:34em }
}
@media(max-width:350px) {
.header-inner { gap:7px }
.header-lineup { padding-inline:8px }
.brand img { width:110px }
.hero-copy { padding-top:27px }
.hero-rfs { font-size:41px }
.hero-collection { font-size:64px }
.hero-description { font-size:12px }
.hero-actions { gap:13px }
.product-spec dd { font-size:13px }
.plate-region { font-size:9px }
}
@media(prefers-reduced-motion:reduce) {
*, *::before, *::after { scroll-behavior:auto!important;transition:none!important;animation:none!important }
}

.header-nav { margin-inline-start: auto; }
.header-lineup .arrow { transform: rotate(90deg); }
footer { border-top: 1px solid var(--line); }
.product-spec { padding-bottom: 7px; }
.product-spec dl { margin: 0; }
.product-spec dl > div:last-child { border-bottom: 0; }

/* Give upright machines the same full-height framing in every view. */
.product-grid { --plate-aspect: 1.34; }
.product.full-height-photo .product-picture { aspect-ratio: var(--plate-aspect); }
.product.full-height-photo .product-picture img {
  width: 98%;
  height: 97%;
  transform: none;
}
.product.full-height-photo summary:hover .product-picture img {
  transform: scale(1.015);
}
@media (min-width: 521px) {
  /* Align the card rows while retaining the original scale of the two wider photos. */
  .product-picture { aspect-ratio: var(--plate-aspect); }
  .product:not(.full-height-photo) .product-picture img {
    height: calc(82% * var(--plate-aspect) / 1.53);
  }
}
@media (max-width: 760px) {
  .product-grid { --plate-aspect: 1.33; }
  .header-lineup .arrow { transform: rotate(90deg) scale(.78); }
}

/* Reserve a stable gallery height as visitors switch between machine shapes. */
.exhibit-stage {
  --standard-stage: clamp(369px, 33.2vw, 530px);
  height: calc(var(--standard-stage) * 1.1);
}
.hero-product {
  inset: auto auto 2% 2%;
  width: 96%;
  height: calc(var(--standard-stage) * .96);
}
.exhibit.full-height-photo .hero-product {
  inset: auto auto 1% 0;
  height: 98%;
  width: 100%;
}
@media (min-width: 761px) and (max-width: 1050px) {
  .exhibit-stage { --standard-stage: clamp(315px, 34vw, 370px); }
}
@media (max-width: 760px) {
  .exhibit-stage { --standard-stage: clamp(234px, 61vw, 340px); height: calc(var(--standard-stage) * 1.13); }
  .hero-product { inset: auto auto 3.5% 4.5%; width: 91%; height: calc(var(--standard-stage) * .93); }
}