:root{--ink:#161616;--gold:#c9902e;--gold2:#f3cf77;--cream:#f8f4ec;--line:rgba(26,26,26,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f7f3eb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}.site-header{position:fixed;inset:0 0 auto;z-index:30;background:rgba(249,246,239,.58);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.04)}.brand{text-decoration:none;color:var(--ink);display:flex;align-items:baseline;gap:.45rem}.brand-mark{font-family:Georgia,serif;font-size:2rem;line-height:1;font-weight:600}.brand-word{font-size:.62rem;letter-spacing:.35em;font-weight:700}.nav-link{color:#222!important;font-size:.92rem;position:relative}.nav-link:after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:.25rem;height:1px;background:#222;transform:scaleX(0);transition:.3s}.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}
.section-pad{position:relative}.hero{overflow:hidden;min-height:100vh}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,245,239,.86),rgba(248,245,239,.22)),url('../assets/background.png') center/cover no-repeat;filter:saturate(.92)}.hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 42%,rgba(255,255,255,.06) 0 20%,rgba(255,255,255,.74) 74%)}.hero-copy-wrap{position:relative;z-index:4}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.23em;color:#8b691f}.display-title{font-family:Georgia,"Times New Roman",serif;font-size:clamp(4rem,7.3vw,7.8rem);line-height:.88;letter-spacing:-.055em;margin:.45rem 0 1.5rem}.lead-copy{font-size:1.08rem;max-width:33rem;color:#57534d;line-height:1.7}.small-note{font-size:.72rem;letter-spacing:.12em;color:#726b61}.product-stage{height:min(72vh,760px);min-height:480px;position:relative;z-index:2;touch-action:none}.product-stage canvas{width:100%;height:100%;display:block}.drag-hint{position:absolute;right:7%;bottom:9%;font-size:.65rem;letter-spacing:.18em;color:#756951;opacity:.7}.stage-badge{position:absolute;right:8%;top:19%;border:1px solid rgba(60,48,24,.15);background:rgba(255,255,255,.55);backdrop-filter:blur(12px);border-radius:100px;padding:.55rem 1rem;display:flex;gap:.25rem;align-items:baseline;box-shadow:0 16px 45px rgba(80,48,0,.08)}.stage-badge strong{font-family:Georgia,serif;font-size:1.8rem}.stage-badge span{font-size:.7rem}.stats-row{position:relative;z-index:3}.stat{border-top:1px solid rgba(34,31,26,.13);padding-top:1rem}.stat strong{display:block;font-family:Georgia,serif;font-size:2.5rem;font-weight:400}.stat span{font-size:.78rem;color:#777067}
.intro-screen{position:fixed;inset:0;z-index:1000;background:radial-gradient(circle at 50% 45%,#fffefa 0,#f8f0df 60%,#ece0c9 100%);transition:opacity .8s ease,visibility .8s ease}.intro-screen.done{opacity:0;visibility:hidden;pointer-events:none}.intro-screen canvas{position:absolute;inset:0;width:100%;height:100%}.intro-copy{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;opacity:0;transform:scale(.92)}.intro-title{font-family:Georgia,serif;font-size:clamp(7rem,18vw,18rem);line-height:.68;letter-spacing:-.12em}.intro-sub{font-size:clamp(.9rem,2vw,1.35rem);font-weight:700;letter-spacing:.7em;padding-left:.7em;margin-top:1.2rem}.skip-intro{position:absolute;right:28px;bottom:24px;border:0;background:transparent;font-size:.72rem;letter-spacing:.14em;color:#786f60}.skip-intro:hover{color:#111}
.scroll-story{position:relative;background:linear-gradient(180deg,#f7f2e8,#efe5d3 55%,#f8f5ef)}.story-pin{height:100vh;position:sticky;top:0;z-index:2;padding-top:78px}.story-pin>.row{min-height:calc(100vh - 78px)}.story-track{height:360vh}.story-stage{height:min(72vh,720px);position:relative}.story-stage:before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(212,165,74,.23),rgba(255,255,255,0) 65%);filter:blur(18px)}.story-guide{position:absolute;right:3%;top:16%;bottom:16%;width:1px;background:rgba(0,0,0,.13)}.story-guide span{display:block;width:7px;height:7px;border-radius:50%;background:#aa7923;position:absolute;left:50%;top:0;transform:translate(-50%,-50%)}.story-copy{position:absolute;max-width:31rem;opacity:0;transform:translateY(30px);pointer-events:none;transition:opacity .4s,transform .4s}.story-copy.active{opacity:1;transform:none}.story-no{font-family:Georgia,serif;font-size:1.2rem;color:#b08234}.story-copy h2,.section-title{font-family:Georgia,serif;font-size:clamp(2.8rem,5vw,5.8rem);line-height:.95;letter-spacing:-.045em;margin:.5rem 0 1.2rem}.story-copy p{color:#666058;line-height:1.7;font-size:1.02rem}.details{background:#f7f3eb}.glass-panel,.molecule-card{border:1px solid rgba(32,25,14,.10);border-radius:32px;background:rgba(255,255,255,.54);box-shadow:0 28px 80px rgba(98,68,17,.08);backdrop-filter:blur(14px)}.section-title{font-size:clamp(2.7rem,4.4vw,5rem)}.feature-list>div{display:flex;gap:1.2rem;padding:1rem 0;border-top:1px solid var(--line)}.feature-list>div>span{font-family:Georgia,serif;color:#b2812d}.feature-list p{margin:0}.molecule-card{background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(244,231,205,.62)),url('../assets/background.png') center/cover no-repeat;min-height:580px}.mw-600{max-width:600px}.orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0 7%,#f6d883 18%,#b87518 62%,#5c3606 100%);box-shadow:0 12px 38px rgba(101,56,0,.25)}.o1{width:110px;height:110px;right:13%;bottom:20%;animation:float 6s ease-in-out infinite}.o2{width:54px;height:54px;right:27%;bottom:38%;animation:float 5s ease-in-out infinite reverse}.o3{width:70px;height:70px;right:8%;bottom:45%;background:radial-gradient(circle at 30% 25%,#fff,#cfcfcf 45%,#666 100%);animation:float 7s ease-in-out infinite}.footer-section{background:#151411;color:#f7f0e2}.footer-mark{font-family:Georgia,serif;font-size:7rem;line-height:.8}.footer-section p{letter-spacing:.55em;padding-left:.55em}.footer-section small{color:#999287}@keyframes float{50%{transform:translateY(-22px) rotate(8deg)}}
@media (max-width:991.98px){.display-title{font-size:clamp(4rem,15vw,6.3rem)}.hero-copy-wrap{padding-top:8rem}.product-stage{height:55vh;min-height:390px}.stage-badge{top:8%;right:2%}.story-pin{height:auto;position:relative;padding:7rem 0}.story-track{display:none}.story-stage{height:56vh;min-height:420px}.story-copy{position:relative;display:none}.story-copy.active{display:block}.story-guide{display:none}.scroll-story{padding-bottom:3rem}}@media(max-width:575.98px){.product-stage{height:48vh;min-height:350px}.lead-copy{font-size:.98rem}.stage-badge{display:none}.drag-hint{right:50%;transform:translateX(50%);white-space:nowrap}.story-stage{height:48vh}.glass-panel,.molecule-card{border-radius:24px}.molecule-card{min-height:480px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orb{animation:none}.intro-screen{display:none!important}}


/* =========================================================
   INDEX(4) PEN ASSEMBLY — added inside the EXISTING story-stage
   Existing store / splash / scroll-story design is unchanged.
   ========================================================= */
.story-stage{isolation:isolate}
.story-stage:before{z-index:0;pointer-events:none}
.assembly-stage{
  position:absolute;
  left:50%;
  top:50%;
  width:min(100%,920px);
  aspect-ratio:1672/941;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  will-change:transform;
  z-index:1;
  overflow:visible;
}
.assembly-part{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  transform-origin:center;
  will-change:transform,opacity;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.08));
}

.product-static-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-static {
    width: min(760px, 90vw);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.15));
}
#assembleFront{z-index:10}
#assembleLeft{z-index:4}
#assembleRight{z-index:3}
#assembleEnd{z-index:2}
.story-guide{z-index:3}
@media (max-width:991.98px){
  .assembly-stage{width:min(112%,900px)}
}
@media (max-width:575.98px){
  .assembly-stage{width:132%;left:48%}
}