:root{
  color-scheme:dark;
  --bg:#1a1b1d;
  --ink:#efedec;
  --muted:#c3c0c0;
  --thin:rgba(227,227,227,.16);
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --haas:"Neue Haas Grotesk Display Pro","Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-width:320px;color:var(--ink);font-family:var(--haas);-webkit-font-smoothing:antialiased}
::selection{background:#f0c5dd;color:#171719}
a{color:inherit;text-decoration:none}
a:focus-visible,.interaction-zone:focus-visible,button:focus-visible{outline:1px solid #f1e9e4;outline-offset:6px}
.site-shell{
  position:relative;overflow:hidden;isolation:isolate;min-height:100svh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(ellipse 44% 63% at 77% 50%, rgba(7,8,11,.60) 0%,transparent 88%),
    radial-gradient(ellipse 65% 23% at 77% 106%,rgba(212,218,222,.105),transparent 85%),
    linear-gradient(122deg,#232427 0%,#1d1e20 42%,#161719 100%);
}
.lacquer-gloss{position:absolute;inset:0;pointer-events:none;z-index:-4;
  background:linear-gradient(125deg,transparent 20%,rgba(255,255,255,.028) 39%,transparent 44%),
  radial-gradient(ellipse 40% 7% at 79% 99%,rgba(220,219,227,.08),transparent 91%)}
.field{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
#particle-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;z-index:2}
.particle-core{
  position:absolute;z-index:0;left:var(--orb-x,74.2%);top:var(--orb-y,50%);
  width:var(--orb-size,660px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(125,244,247,.90) 0%,rgba(129,230,238,.86) 13%,
    rgba(127,218,231,.70) 32%,rgba(160,201,211,.54) 51%,
    rgba(228,157,174,.17) 69%,rgba(227,163,190,.055) 80%,transparent 96%);
  filter:blur(27px) saturate(1.13);opacity:.97;
  transition:opacity .5s ease;
}
.grain{position:absolute;z-index:3;inset:0;pointer-events:none;opacity:.10;background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}
.site-header,.site-footer{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center}
.site-header{margin:0 clamp(25px,4.9vw,86px);padding:32px 0 24px;border-bottom:1px solid var(--thin);gap:20px}
.wordmark{font-family:var(--haas);font-weight:500;letter-spacing:.34em;font-size:clamp(20px,2vw,29px);line-height:1;text-transform:lowercase;padding:2px 0 6px;white-space:nowrap}
.header-note{font-family:var(--mono);color:#bfc0c1;font-size:9px;font-weight:400;letter-spacing:.09em;line-height:1.6;white-space:nowrap}
.status-dot{display:inline-block;width:5px;height:5px;margin-right:11px;vertical-align:2px;background:#e0d5de;border-radius:50%;box-shadow:0 0 10px #e0cad880}
.slash{color:#818184;padding:0 8px}
.composition{flex:1;min-height:610px;position:relative;display:flex;align-items:center;padding:86px clamp(25px,4.9vw,86px) 110px}
.intro{position:relative;z-index:3;width:54%;max-width:790px;pointer-events:none}
.intro a{pointer-events:auto}
.section-index{font:400 10px/1.6 var(--mono);letter-spacing:.14em;color:#c3c2c4;margin-bottom:clamp(34px,5.8vh,62px)}
.index-asterisk{font-family:var(--haas);font-size:15px;vertical-align:-2px;margin-right:15px}
h1{font-family:var(--haas);font-size:clamp(55px,6.65vw,113px);line-height:.99;letter-spacing:-.075em;font-weight:400;margin:0;white-space:nowrap}
h1 .ital{font-family:"Bodoni MT",Didot,"Times New Roman",serif;font-weight:400;font-style:italic;font-size:1.05em;letter-spacing:-.12em;padding-right:.08em}
.full-stop{margin-left:.025em;color:#cba7ba}
.intro-detail{display:flex;align-items:flex-start;gap:22px;margin-top:clamp(35px,6vh,60px)}
.detail-rule{display:block;height:1px;width:41px;background:#cbc9ce;margin-top:9px;flex:none}
.intro-detail p{max-width:425px;margin:0;font-size:clamp(15px,1.18vw,18px);font-weight:400;color:#c6c3c5;line-height:1.65;letter-spacing:-.01em}
.contacts{display:flex;align-items:center;flex-wrap:wrap;column-gap:clamp(17px,1.8vw,33px);row-gap:14px;margin-top:clamp(38px,7vh,72px)}
.contact-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);color:#edebe9;font-size:clamp(11px,.88vw,13px);line-height:1.7;letter-spacing:-.015em;border-bottom:1px solid #aaa8aa;padding-bottom:5px;white-space:nowrap;transition:color .25s,border-color .25s}
.contact-link span{font-size:16px;font-family:var(--haas);transition:transform .25s}
.contact-link:hover{color:#ffe5f6;border-color:#ffe5f6}
.contact-link:hover span{transform:translate(3px,-3px)}
.interaction-zone{position:absolute;top:2%;bottom:10%;right:0;width:61%;z-index:2;cursor:grab;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}
.interaction-zone.dragging{cursor:grabbing}
.art-hint,.art-index{position:absolute;font:400 9px/1.5 var(--mono);letter-spacing:.07em;color:#b8b5bc;white-space:nowrap}
.art-hint{left:15%;bottom:13%;display:flex;align-items:center;gap:10px;opacity:.92}
.hint-dot{display:inline-block;height:5px;width:5px;border-radius:50%;border:1px solid #e0d9e0;box-shadow:0 0 7px rgba(250,194,235,.3)}
.art-index{right:9%;top:9%;writing-mode:vertical-rl}
.site-footer{font:400 9px/1.6 var(--mono);letter-spacing:.09em;color:#a5a3a5;padding:22px 0 29px;margin:0 clamp(25px,4.9vw,86px);border-top:1px solid var(--thin);gap:12px}
.footer-middle{margin-left:-80px}
.foot-arrow{font:normal 14px/0 var(--haas);padding-left:7px}
@media (max-width:1120px){.intro{width:58%}.composition{min-height:620px}h1{font-size:clamp(55px,7.15vw,86px)}.interaction-zone{width:62%}.art-hint{bottom:23%}}
@media (max-width:750px){
 .site-header{padding:25px 0 20px;margin:0 25px}
 .wordmark{letter-spacing:.31em;font-size:22px}
 .header-note{max-width:150px;text-align:right;white-space:normal;font-size:8px}
 .header-note .slash{padding:0 3px}.status-dot{margin-right:5px}
 .composition{display:block;min-height:unset;padding:0 25px 85px}
 .interaction-zone{top:0;left:0;right:0;width:100%;height:405px;bottom:auto}
 .intro{width:100%;max-width:590px;padding-top:472px}
 .section-index{margin-bottom:23px;font-size:9px}
 h1{font-size:clamp(50px,10.1vw,77px)}
 .intro-detail{margin-top:27px;gap:14px}.detail-rule{width:26px}
 .intro-detail p{font-size:15px;max-width:430px}
 .contacts{margin-top:37px;gap:13px 23px}.contact-link{font-size:11px}
 .art-hint{left:auto;right:25px;bottom:17px;font-size:8px}
 .art-index{top:28px;right:25px;font-size:8px}
 .site-footer{margin:0 25px;padding:18px 0 20px;font-size:8px}
 .footer-middle{display:none}
 .field{bottom:auto;height:665px}
}
@media (max-width:420px){
 .site-header{margin:0 19px}.wordmark{font-size:19px;letter-spacing:.28em}
 .header-note{font-size:7px;max-width:145px}
 .composition{padding-inline:19px;padding-bottom:65px}
 .intro{padding-top:467px}
 h1{font-size:clamp(45px,11.7vw,53px)}
 .intro-detail p{font-size:14px}
 .contacts{gap:13px 20px}
 .art-hint{right:19px}.art-index{right:19px}
 .site-footer{margin:0 19px;font-size:7px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}