:root {
  --paper: #f2f0e9;
  --paper-deep: #e8e7de;
  --ink: #17251f;
  --muted: #6c746d;
  --green: #2d5a48;
  --green-dark: #15352c;
  --lime: #a8bf71;
  --line: rgba(23,37,31,.18);
  --sans: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  --serif: "SivSerif", "Songti SC", "STSong", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.topbar { position: fixed; z-index: 20; inset: 0 0 auto; height: 68px; padding: 0 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: rgba(242,240,233,.75); backdrop-filter: blur(18px); }
.topbar p, .topbar nav, .brand { margin: 0; font-size: .65rem; font-weight: 700; letter-spacing: .16em; }
.brand { justify-self: start; font-family: Georgia, serif; font-size: 1.1rem; letter-spacing: .08em; }
.topbar nav { justify-self: end; display: flex; gap: 24px; }
.topbar nav a { transition: color .2s ease; }
.topbar nav a:hover { color: var(--green); }
.sound-toggle { padding: 0; color: var(--muted); border: 0; background: transparent; cursor: pointer; font-size: .65rem; font-weight: 700; letter-spacing: .14em; }
.sound-toggle.is-on { color: var(--green); }
.panel { position: relative; min-height: 100svh; padding: 68px 7vw 7vw; }
.hero { display: grid; grid-template-columns: minmax(290px, .88fr) minmax(420px, 1.12fr); gap: 4vw; align-items: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; padding-top: 3vh; }
.kicker { margin: 0 0 1.35rem; color: var(--green); font-size: .67rem; font-weight: 800; letter-spacing: .18em; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.045em; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 4.7vw, 5.2rem); }
h1 em { color: var(--green); font-style: normal; }
h2 { font-size: clamp(2.5rem, 4vw, 4.35rem); }
.intro { max-width: 500px; margin: 2rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.meta-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 470px; margin-top: 2.2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; line-height: 1.5; }
.meta-grid b { display: inline-block; min-width: 88px; color: var(--ink); font-size: .64rem; letter-spacing: .13em; }
.actions { display: flex; align-items: center; gap: 20px; margin-top: 2rem; }
.primary, .outline { border: 0; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.primary { padding: 14px 19px; color: #f9f8f2; background: var(--green-dark); font-size: .76rem; letter-spacing: .09em; }
.primary:hover, .outline:hover { transform: translateY(-2px); }
.primary span { padding-left: 18px; color: var(--lime); }
.text-link { color: var(--muted); font-size: .76rem; }
.object-stage { position: relative; min-height: 650px; display: grid; place-items: center; perspective: 1600px; cursor: grab; }
.object-stage:active { cursor: grabbing; }
.stage-caption { position: absolute; left: 50%; top: 2%; z-index: 2; display: flex; gap: 10px; align-items: center; transform: translateX(-50%); color: var(--muted); font-size: .62rem; letter-spacing: .14em; white-space: nowrap; }
.stage-caption i { width: 40px; height: 1px; background: currentColor; opacity: .5; }
.giftbox { --rx: -13deg; --ry: -23deg; --rz: 0deg; position: relative; width: 310px; height: 360px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); transition: transform 900ms cubic-bezier(.2,.75,.2,1); }
.giftbox::after { content: ""; position: absolute; inset: 26px -8px 2px 20px; border: 1px solid rgba(45,90,72,.22); transform: translateZ(-16px); pointer-events: none; }
.lid, .core, .base, .side-panel { position: absolute; transform-style: preserve-3d; }
.lid { left: 0; top: 0; width: 310px; height: 84px; padding: 18px 20px; color: #edf0df; background: linear-gradient(135deg, #355f4a, #8eaa60); box-shadow: 0 22px 24px rgba(15,38,29,.15); transform: translateZ(48px); transition: transform 900ms cubic-bezier(.2,.75,.2,1), top 900ms cubic-bezier(.2,.75,.2,1); }
.lid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.24), transparent 40%, rgba(0,0,0,.08)); transform: translateZ(3px); }
.lid span { position: relative; z-index: 1; font-size: .8rem; line-height: 1.1; letter-spacing: .08em; }
.lid small { font-size: .5rem; letter-spacing: .22em; }
.core { left: 18px; top: 62px; width: 274px; height: 250px; background: rgba(237,239,226,.8); border: 1px solid rgba(23,37,31,.16); box-shadow: 20px 22px 28px rgba(23,37,31,.14); transform: translateZ(4px); transition: transform 900ms cubic-bezier(.2,.75,.2,1); }
.drawer { position: absolute; left: 10px; width: 254px; height: 68px; padding: 14px 18px; border: 1px solid rgba(23,37,31,.16); background: linear-gradient(135deg, #faf9f0, #e7e9dc); box-shadow: 0 9px 12px rgba(23,37,31,.08); transition: transform 900ms cubic-bezier(.2,.75,.2,1); }
.drawer span { color: var(--green); font-size: .65rem; font-weight: 800; letter-spacing: .15em; }
.drawer-a { top: 12px; }
.drawer-b { top: 88px; }
.drawer-c { top: 164px; }
.side-panel { top: 78px; width: 25px; height: 246px; background: linear-gradient(90deg, #cfd7c5, #edf0e5); border: 1px solid rgba(23,37,31,.15); }
.side-left { left: -7px; transform: translateZ(12px) rotateY(-12deg); }
.side-right { right: -7px; transform: translateZ(12px) rotateY(12deg); }
.base { left: 11px; bottom: 5px; width: 286px; height: 24px; background: #244939; transform: translateZ(24px) rotateX(6deg); }
.object-ground { position: absolute; left: 50%; bottom: 12%; width: 370px; height: 52px; border-radius: 50%; background: rgba(25,51,40,.18); filter: blur(22px); transform: translateX(-50%) rotate(-4deg); }
.hero:has(.giftbox.is-open) .lid { top: -86px; transform: translateZ(112px) rotateX(-12deg) rotateY(-3deg) rotateZ(-3deg); }
.hero:has(.giftbox.is-open) .core { transform: translateZ(20px) translateY(24px); }
.hero:has(.giftbox.is-open) .drawer-a { transform: translateZ(55px) translateX(80px) rotateY(-8deg); }
.hero:has(.giftbox.is-open) .drawer-b { transform: translateZ(84px) translateX(2px) rotateY(-3deg); }
.hero:has(.giftbox.is-open) .drawer-c { transform: translateZ(55px) translateX(-80px) rotateY(8deg); }
.hero:has(.giftbox.is-open) .object-state {}
.section-label { position: absolute; left: 7vw; top: 110px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .16em; }
.section-label i { width: 50px; height: 1px; background: currentColor; opacity: .45; }
.structure { background: #e8ebe1; }
.structure-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 6vw; align-items: center; min-height: calc(100svh - 160px); padding-top: 50px; }
.structure-copy { max-width: 510px; }
.structure-copy > p:not(.kicker) { margin: 1.8rem 0 0; color: var(--muted); line-height: 1.85; }
.outline { margin-top: 1.7rem; padding: 12px 15px; color: var(--green-dark); border: 1px solid var(--green-dark); background: transparent; font-size: .76rem; letter-spacing: .08em; }
.outline span { padding-left: 26px; color: var(--green); font-size: 1.1rem; }
.steps { display: grid; gap: 0; margin: 2.1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li { display: flex; gap: 22px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.steps b { color: var(--green); font-size: .64rem; letter-spacing: .12em; }
.exploded-figure { margin: 0; padding: 12px; background: rgba(255,255,255,.42); border: 1px solid rgba(23,37,31,.14); }
.exploded-figure img { width: 100%; height: min(62vh, 500px); object-fit: cover; object-position: center; filter: saturate(.78); }
figcaption { margin-top: 10px; color: var(--muted); font-size: .67rem; letter-spacing: .05em; }
.production { background: var(--green-dark); color: #f1f3e9; }
.production .section-label { color: rgba(241,243,233,.62); }
.proof-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 6vw; align-items: center; min-height: calc(100svh - 160px); padding-top: 52px; }
.production .kicker { color: var(--lime); }
.proof-copy > p:not(.kicker) { max-width: 430px; margin: 1.8rem 0 0; color: rgba(241,243,233,.68); line-height: 1.85; }
.proof-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2rem; }
.proof-switch button { padding: 9px 12px; color: rgba(241,243,233,.65); border: 1px solid rgba(241,243,233,.23); background: transparent; cursor: pointer; font-size: .7rem; }
.proof-switch button.is-active { color: var(--green-dark); background: var(--lime); border-color: var(--lime); }
.scroll-cue { margin: 1rem 0 0; color: rgba(241,243,233,.38); font-size: .58rem; letter-spacing: .14em; }
.proof-image-wrap { position: relative; min-height: 520px; padding: 12px; background: rgba(241,243,233,.1); border: 1px solid rgba(241,243,233,.18); }
.proof-image { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; opacity: 0; transition: opacity .4s ease; background: #f1f0e8; }
.proof-image.is-active { opacity: 1; }
.outcome { background: var(--paper); padding-top: 9rem; }
.outcome-head { display: grid; grid-template-columns: 1fr .8fr; gap: 6vw; align-items: end; margin-top: 8vh; }
.outcome-head > p { max-width: 390px; margin: 0 0 .25rem; color: var(--muted); line-height: 1.85; }
.photo-grid { display: grid; grid-template-columns: 1.35fr .75fr .75fr; gap: 18px; align-items: end; margin-top: 8vh; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; height: 34vh; min-height: 230px; object-fit: cover; filter: saturate(.78); }
.photo-grid .photo-large img { height: 48vh; }
.photo-grid figcaption { padding-top: 10px; }
.closing-line { display: flex; justify-content: space-between; align-items: center; margin-top: 6vh; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: .65rem; letter-spacing: .15em; }
.closing-line button { padding: 0; color: var(--green); border: 0; background: transparent; cursor: pointer; font-size: .72rem; letter-spacing: .05em; }
@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar p { display: none; }
  .hero, .structure-layout, .proof-grid, .outcome-head { grid-template-columns: 1fr; }
  .hero { padding-top: 100px; }
  .hero-copy { padding-top: 0; }
  .object-stage { min-height: 520px; }
  .structure-layout, .proof-grid { padding-top: 105px; }
  .structure-copy { max-width: 620px; }
  .exploded-figure img { height: 45vh; }
  .proof-image-wrap { min-height: 420px; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-grid .photo-large { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 5vw; }
  .topbar nav { gap: 10px; font-size: .58rem; }
  .panel { padding-left: 5vw; padding-right: 5vw; }
  .section-label { left: 5vw; }
  h1 { font-size: clamp(2.3rem, 11vw, 3.7rem); }
  h2 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .giftbox { transform: scale(.78) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
  .stage-caption { top: 1%; font-size: .53rem; }
  .photo-grid { grid-template-columns: 1fr; }
  .photo-grid .photo-large { grid-column: auto; }
  .closing-line { align-items: flex-start; flex-direction: column; gap: 18px; }
}

/* Real box architecture: three stacked cartons, not pull-out drawers. */
.giftbox {
  width: 340px;
  height: 450px;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}
.giftbox::after { display: none; }
.module {
  position: absolute;
  left: 28px;
  width: 284px;
  height: 116px;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.2,.75,.2,1);
}
.module-top { top: 16px; z-index: 3; }
.module-mid { top: 164px; z-index: 2; }
.module-bottom { top: 312px; z-index: 1; }
.face {
  position: absolute;
  display: block;
  border: 1px solid rgba(25,56,40,.18);
  backface-visibility: hidden;
}
.face-front, .face-back { left: 0; top: 0; width: 284px; height: 116px; transform: translateZ(78px); }
.face-front { background: linear-gradient(120deg, #edf0e4 0%, #f9f8ef 47%, #b8d171 100%); box-shadow: 0 10px 17px rgba(24,52,37,.14); }
.module-mid .face-front { background: linear-gradient(90deg, #85b947 0 29%, #f0f0e8 29% 100%); }
.module-bottom .face-front { background: linear-gradient(100deg, #b9d878 0%, #f0f2e6 45%, #96c257 100%); }
.face-right, .face-left { left: 57px; top: 0; width: 156px; height: 116px; }
.face-right { transform: rotateY(90deg) translateZ(142px); background: linear-gradient(90deg, #6e9c3f, #d1e4a6); }
.face-left { transform: rotateY(-90deg) translateZ(142px); background: linear-gradient(90deg, #e9eee2, #9fc661); }
.face-top, .face-bottom { left: 0; top: -20px; width: 284px; height: 156px; }
.face-top { transform: rotateX(90deg) translateZ(58px); background: linear-gradient(120deg, #f6f7f0 20%, #a9ca6e 100%); }
.face-bottom { transform: rotateX(-90deg) translateZ(58px); background: #b1c689; }
.module-top .face-top { background: linear-gradient(120deg, #fafbf4, #c4d99c); }
.module-mid .face-top { background: #e9eee1; }
.module-bottom .face-top { background: linear-gradient(120deg, #dce7ca, #8ab74e); }
.module-brand { position: absolute; left: 19px; bottom: 16px; color: #79b51d; font-family: Arial, sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: -.08em; }
.module-brand small { display: block; margin-top: 2px; color: #6d842e; font-size: .31rem; letter-spacing: .3em; }
.module-top .module-brand { color: #fff; text-shadow: 0 1px 4px rgba(35,73,31,.22); }
.module-copy { position: absolute; left: 17px; top: 17px; color: #768372; font-size: .43rem; line-height: 1.55; letter-spacing: .04em; }
.module-copy b { font-weight: 500; color: #9ca494; }
.module-mid .module-brand { left: 18px; bottom: 15px; font-size: 1.15rem; }
.module-bottom .module-brand { left: 19px; bottom: 16px; font-size: 1.35rem; }
.pull-tab { position: absolute; z-index: 2; left: 50%; top: 20px; width: 42px; height: 17px; border-radius: 14px 14px 5px 5px; background: linear-gradient(#fff, #e6e6dc); box-shadow: 0 7px 9px rgba(45,76,37,.16); transform: translateX(-50%) translateZ(5px) rotateX(-35deg); }
.pull-tab::after { content: ""; position: absolute; inset: 5px 9px; border-radius: 50%; border: 1px solid rgba(67,92,51,.28); }
.assembly-shadow { position: absolute; left: 50%; bottom: 8px; width: 300px; height: 32px; border-radius: 50%; background: rgba(26,56,39,.23); filter: blur(18px); transform: translateX(-50%) translateZ(-46px) rotate(-4deg); }
.giftbox.is-open .module-top { transform: translate3d(18px, -88px, 92px) rotateZ(-2deg); }
.giftbox.is-open .module-mid { transform: translate3d(-10px, 5px, 30px) rotateZ(1deg); }
.giftbox.is-open .module-bottom { transform: translate3d(15px, 99px, 0) rotateZ(-1deg); }
.giftbox.is-open .assembly-shadow { transform: translateX(-50%) translateZ(-10px) scale(1.22) rotate(-4deg); opacity: .16; }
@media (max-width: 560px) {
  .giftbox { transform: scale(.78) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
}

/* Final single-case geometry: one complete handled box, cover and inner tray. */
.giftbox {
  width: 390px;
  height: 430px;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}
.package-body, .package-lid { position: absolute; transform-style: preserve-3d; }
.package-body { left: 45px; top: 166px; width: 300px; height: 210px; z-index: 2; }
.body-face, .lid-face { position: absolute; display: block; left: 50%; top: 50%; border: 1px solid rgba(35,67,42,.2); backface-visibility: hidden; transform-origin: center; font-style: normal; }
.body-front, .body-back { width: 300px; height: 210px; transform: translate(-50%, -50%) translateZ(102px); }
.body-front { background: linear-gradient(100deg, #84b443 0 26%, #edf1e6 26% 77%, #c4dc91 100%); box-shadow: 0 18px 23px rgba(28,58,38,.17); }
.body-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(102px); background: linear-gradient(100deg, #8ebd4f, #d1e2a7); }
.body-front::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.53); }
.body-right, .body-left { width: 204px; height: 210px; }
.body-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(150px); background: linear-gradient(96deg, #6f9f3e, #bad77d); }
.body-left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(150px); background: linear-gradient(96deg, #eef2e8, #a8ca69); }
.body-top, .body-bottom { width: 300px; height: 204px; }
.body-top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(105px); background: linear-gradient(118deg, #edf3e4, #b6d478); }
.body-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(105px); background: #9abb63; }
.body-copy { position: absolute; left: 23px; top: 25px; z-index: 1; color: #7b8c7b; font-size: .55rem; line-height: 1.55; letter-spacing: .04em; }
.body-copy b { color: #a2aa9d; font-weight: 500; }
.body-brand { position: absolute; left: 23px; bottom: 22px; z-index: 1; color: #76b120; font-family: Arial, sans-serif; font-size: 1.8rem; letter-spacing: -.09em; }
.inner-tray { position: absolute; left: 28px; top: 18px; width: 244px; height: 157px; opacity: 0; transform: translateZ(104px) translateY(20px); transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.75,.2,1); }
.tray-wall { position: absolute; display: block; background: #e8ecdd; border: 1px solid rgba(40,67,42,.23); }
.tray-back { left: 0; top: 0; width: 244px; height: 14px; transform: translateZ(62px); }
.tray-left { left: 0; top: 0; width: 124px; height: 14px; transform: rotateY(90deg) translateZ(7px); transform-origin: left center; }
.tray-right { right: 0; top: 0; width: 124px; height: 14px; transform: rotateY(-90deg) translateZ(7px); transform-origin: right center; }
.compartment { position: absolute; top: 16px; height: 105px; padding: 13px 10px; color: #7d8f79; background: #f5f6ef; border: 1px solid rgba(40,67,42,.16); box-shadow: 0 5px 9px rgba(33,63,39,.1); }
.compartment b { display: block; color: #7ead3b; font-size: .62rem; letter-spacing: .14em; }
.compartment small { display: block; margin-top: 15px; font-size: .46rem; letter-spacing: .15em; }
.compartment-one { left: 16px; width: 74px; }
.compartment-two { left: 95px; width: 62px; }
.compartment-three { left: 162px; width: 66px; }
.package-lid { left: 45px; top: 144px; width: 300px; height: 22px; z-index: 4; transform-origin: 50% 100%; transition: transform 1000ms cubic-bezier(.2,.75,.2,1); }
.lid-front, .lid-back { width: 300px; height: 22px; transform: translate(-50%, -50%) translateZ(102px); }
.lid-front { background: #9fc65b; }
.lid-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(102px); background: #8eb64e; }
.lid-right, .lid-left { width: 204px; height: 22px; }
.lid-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(150px); background: #7eaa41; }
.lid-left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(150px); background: #c5dd8d; }
.lid-top, .lid-bottom { width: 300px; height: 204px; }
.lid-top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(11px); background: linear-gradient(122deg, #d0e78c, #83b444); }
.lid-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(11px); background: #8db64e; }
.lid-brand { position: absolute; left: 24px; top: 24px; color: #fff; font-family: Arial, sans-serif; font-size: 1.9rem; letter-spacing: -.08em; text-shadow: 0 1px 4px rgba(45,85,29,.22); }
.lid-brand small { display: block; margin-top: 3px; font-size: .34rem; letter-spacing: .32em; }
.box-handle { position: absolute; left: 50%; top: 50%; width: 45px; height: 88px; border: 12px solid #aeb5b7; border-bottom: 0; border-radius: 27px 27px 0 0; box-shadow: 0 5px 6px rgba(47,63,51,.18); transform: translate(-50%, -50%) translateZ(6px) rotateX(-8deg); }
.box-handle::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 16px; background: #aeb5b7; transform: translateX(-50%); }
.assembly-shadow { position: absolute; left: 50%; bottom: 16px; width: 320px; height: 42px; border-radius: 50%; background: rgba(24,57,35,.23); filter: blur(20px); transform: translateX(-50%) translateZ(-58px) rotate(-4deg); transition: transform 900ms ease, opacity 500ms ease; }
.giftbox.is-open .package-lid { transform: translate3d(0, -118px, 34px) rotateX(-76deg) rotateZ(-1deg); }
.giftbox.is-open .inner-tray { opacity: 1; transform: translateZ(106px) translateY(4px); }
.giftbox.is-open .assembly-shadow { transform: translateX(-50%) translateZ(-10px) scale(1.18) rotate(-4deg); opacity: .16; }
@media (max-width: 560px) {
  .giftbox { transform: scale(.78) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
}

/* Final box geometry: three closed cuboids, each with six continuous faces. */
.giftbox {
  width: 380px;
  height: 470px;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}
.module {
  position: absolute;
  left: 34px;
  width: 292px;
  height: 112px;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.2,.75,.2,1);
}
.module-top { top: 18px; z-index: 3; }
.module-mid { top: 148px; z-index: 2; }
.module-bottom { top: 278px; z-index: 1; }
.face {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(35,67,42,.2);
  backface-visibility: hidden;
  transform-origin: center;
  font-style: normal;
}
.face-front, .face-back { width: 292px; height: 112px; transform: translate(-50%, -50%) translateZ(86px); }
.face-front { background: linear-gradient(102deg, #88bb47 0 27%, #eef2e7 27% 76%, #c1d989 100%); box-shadow: 0 13px 20px rgba(28,58,38,.16); }
.face-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(86px); background: linear-gradient(100deg, #8ebd4f, #d4e4aa); }
.module-mid .face-front { background: linear-gradient(90deg, #84b645 0 29%, #f1f2e9 29% 100%); }
.module-bottom .face-front { background: linear-gradient(104deg, #dfe9cc 0%, #f3f3eb 48%, #8dbb4b 100%); }
.face-right, .face-left { width: 172px; height: 112px; }
.face-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(146px); background: linear-gradient(95deg, #6f9f3f, #b9d679); }
.face-left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(146px); background: linear-gradient(95deg, #edf2e7, #a8cb6a); }
.face-top, .face-bottom { width: 292px; height: 172px; }
.face-top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(56px); background: linear-gradient(118deg, #eef3e5, #b5d477); }
.face-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(56px); background: #9abb64; }
.module-top .face-top { background: linear-gradient(118deg, #cae28b, #7eb444); }
.module-mid .face-top { background: #e6eddc; }
.module-bottom .face-top { background: linear-gradient(118deg, #dbe8c8, #92be54); }
.module-brand { position: absolute; left: 22px; bottom: 15px; color: #75ae20; font-family: Arial, sans-serif; font-size: 1.65rem; font-weight: 500; letter-spacing: -.09em; }
.module-brand small { display: block; margin-top: 3px; color: #6b8130; font-size: .31rem; letter-spacing: .3em; }
.module-top .module-brand { color: #fff; text-shadow: 0 1px 4px rgba(37,76,28,.24); }
.module-mid .module-brand { font-size: 1.18rem; }
.module-bottom .module-brand { font-size: 1.38rem; }
.module-copy { position: absolute; left: 22px; top: 18px; color: #7c8b7c; font-size: .45rem; line-height: 1.55; letter-spacing: .04em; }
.module-copy b { color: #a1aa9c; font-weight: 500; }
.box-handle { position: absolute; left: 50%; top: 50%; width: 48px; height: 94px; border: 13px solid #aeb5b7; border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 6px 7px rgba(47,63,51,.18); transform: translate(-50%, -50%) translateZ(5px) rotateX(-8deg); }
.box-handle::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 17px; background: #aeb5b7; transform: translateX(-50%); }
.assembly-shadow { position: absolute; left: 50%; bottom: 8px; width: 320px; height: 40px; border-radius: 50%; background: rgba(26,56,39,.24); filter: blur(20px); transform: translateX(-50%) translateZ(-54px) rotate(-4deg); transition: transform 900ms ease, opacity 500ms ease; }
.giftbox.is-open .module-top { transform: translate3d(16px, -82px, 90px) rotateZ(-2deg); }
.giftbox.is-open .module-mid { transform: translate3d(-10px, 5px, 28px) rotateZ(1deg); }
.giftbox.is-open .module-bottom { transform: translate3d(13px, 91px, 0) rotateZ(-1deg); }
.giftbox.is-open .assembly-shadow { transform: translateX(-50%) translateZ(-8px) scale(1.16) rotate(-4deg); opacity: .16; }
@media (max-width: 560px) {
  .giftbox { transform: scale(.78) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
}

/* Rebuilt as one continuous handled case with a hinged lid and an inset tray. */
.giftbox {
  width: 390px;
  height: 450px;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}
.package-body, .package-lid { position: absolute; transform-style: preserve-3d; }
.package-body { left: 42px; top: 150px; width: 300px; height: 190px; z-index: 2; }
.body-face, .lid-face { position: absolute; display: block; border: 1px solid rgba(28,58,38,.18); backface-visibility: hidden; }
.body-front { left: 0; top: 0; width: 300px; height: 190px; transform: translateZ(98px); background: linear-gradient(98deg, #88bb47 0 26%, #eef1e4 26% 77%, #c4d98e 100%); box-shadow: 0 18px 22px rgba(28,58,38,.16); }
.body-front::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.52); pointer-events: none; }
.body-right { left: 50px; top: 0; width: 196px; height: 190px; transform: rotateY(90deg) translateZ(150px); background: linear-gradient(100deg, #bad87d, #7cae3d); }
.body-left { left: 50px; top: 0; width: 196px; height: 190px; transform: rotateY(-90deg) translateZ(150px); background: linear-gradient(100deg, #f0f2e7, #accd78); }
.body-top { left: 0; top: -18px; width: 300px; height: 196px; transform: rotateX(90deg) translateZ(95px); background: linear-gradient(105deg, #eef2df, #b7d67c); }
.body-bottom { left: 0; top: -18px; width: 300px; height: 196px; transform: rotateX(-90deg) translateZ(95px); background: #a9c96f; }
.body-copy { position: absolute; left: 23px; top: 23px; color: #809177; font-size: .55rem; line-height: 1.55; letter-spacing: .04em; }
.body-copy b { color: #a1aa9e; font-weight: 500; }
.body-brand { position: absolute; left: 22px; bottom: 22px; color: #7eb522; font-family: Arial, sans-serif; font-size: 1.75rem; letter-spacing: -.09em; }
.inner-tray { position: absolute; left: 28px; top: -1px; width: 244px; height: 150px; opacity: 0; transform: translateZ(100px) translateY(18px); transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.75,.2,1); }
.tray-wall { position: absolute; display: block; background: #e6ead9; border: 1px solid rgba(40,67,42,.23); }
.tray-back { left: 0; top: 0; width: 244px; height: 15px; transform: translateZ(62px); }
.tray-left { left: 0; top: 0; width: 15px; height: 124px; transform: rotateY(90deg) translateZ(7px); transform-origin: left center; }
.tray-right { right: 0; top: 0; width: 15px; height: 124px; transform: rotateY(-90deg) translateZ(7px); transform-origin: right center; }
.compartment { position: absolute; top: 16px; height: 103px; padding: 13px 10px; color: #7e8f78; background: #f5f5ed; border: 1px solid rgba(40,67,42,.16); box-shadow: 0 5px 9px rgba(33,63,39,.1); }
.compartment b { display: block; color: #7dad39; font-size: .62rem; letter-spacing: .14em; }
.compartment small { display: block; margin-top: 16px; font-size: .46rem; letter-spacing: .15em; }
.compartment-one { left: 16px; width: 74px; }
.compartment-two { left: 95px; width: 62px; }
.compartment-three { left: 162px; width: 66px; }
.package-lid { left: 42px; top: 38px; width: 300px; height: 190px; z-index: 4; transform-origin: 50% 100%; transition: transform 1000ms cubic-bezier(.2,.75,.2,1); }
.lid-front { left: 0; top: 0; width: 300px; height: 190px; transform: translateZ(102px); background: linear-gradient(106deg, #a9d35b 0%, #d8e9a0 62%, #91be45 100%); box-shadow: 0 19px 25px rgba(32,63,38,.17); }
.lid-front::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.52); }
.lid-top { left: 0; top: -18px; width: 300px; height: 204px; transform: rotateX(90deg) translateZ(95px); background: linear-gradient(135deg, #cfe58f, #84b844); }
.lid-right { left: 50px; top: 0; width: 204px; height: 190px; transform: rotateY(90deg) translateZ(150px); background: #91bf49; }
.lid-left { left: 50px; top: 0; width: 204px; height: 190px; transform: rotateY(-90deg) translateZ(150px); background: #d3e898; }
.lid-brand { position: absolute; left: 28px; bottom: 24px; z-index: 1; color: #fff; font-family: Arial, sans-serif; font-size: 2rem; letter-spacing: -.08em; text-shadow: 0 1px 4px rgba(45,85,29,.22); }
.lid-brand small { display: block; margin-top: 4px; font-size: .36rem; letter-spacing: .32em; }
.handle { position: absolute; z-index: 5; left: 50%; top: -10px; width: 44px; height: 84px; border: 12px solid #a6aeb0; border-bottom: 0; border-radius: 27px 27px 0 0; box-shadow: 0 5px 5px rgba(46,65,52,.17); transform: translateX(-50%) translateZ(117px) rotateX(-9deg); }
.handle::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 16px; background: #a6aeb0; transform: translateX(-50%); }
.package-shadow { position: absolute; left: 50%; bottom: 15px; width: 320px; height: 44px; border-radius: 50%; background: rgba(24,57,35,.22); filter: blur(20px); transform: translateX(-50%) translateZ(-60px) rotate(-4deg); transition: transform 900ms ease, opacity 500ms ease; }
.giftbox.is-open .package-lid { transform: translate3d(0, -86px, 35px) rotateX(-72deg) rotateZ(-1deg); }
.giftbox.is-open .inner-tray { opacity: 1; transform: translateZ(105px) translateY(5px); }
.giftbox.is-open .package-shadow { transform: translateX(-50%) translateZ(-5px) scale(1.17) rotate(-4deg); opacity: .16; }
.hero { min-height: 165svh; align-items: start; }
.hero-copy { position: sticky; top: 110px; align-self: start; margin-top: 18vh; }
.object-stage { position: sticky; top: 68px; align-self: start; height: calc(100svh - 68px); min-height: 0; }
.production { min-height: 180svh; }
.production .proof-grid { position: sticky; top: 68px; height: calc(100svh - 68px); min-height: 0; align-self: start; padding-top: 0; }
@media (max-width: 560px) {
  .hero { min-height: 145svh; }
  .hero-copy { position: relative; top: auto; margin-top: 5vh; }
  .object-stage { position: relative; top: auto; height: 540px; min-height: 540px; }
  .production { min-height: 100svh; }
  .production .proof-grid { position: relative; top: auto; height: auto; min-height: calc(100svh - 160px); }
  .giftbox { transform: scale(.78) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
}

/* FINAL SINGLE CASE OVERRIDE */
.giftbox { width: 390px; height: 430px; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
.package-body, .package-lid { position: absolute; transform-style: preserve-3d; }
.package-body { left: 45px; top: 166px; width: 300px; height: 210px; z-index: 2; }
.body-face, .lid-face { position: absolute; display: block; left: 50%; top: 50%; border: 1px solid rgba(35,67,42,.2); backface-visibility: hidden; transform-origin: center; font-style: normal; }
.body-front, .body-back { width: 300px; height: 210px; transform: translate(-50%, -50%) translateZ(102px); }
.body-front { background: linear-gradient(100deg, #84b443 0 26%, #edf1e6 26% 77%, #c4dc91 100%); box-shadow: 0 18px 23px rgba(28,58,38,.17); }
.body-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(102px); background: linear-gradient(100deg, #8ebd4f, #d1e2a7); }
.body-front::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.53); }
.body-right, .body-left { width: 204px; height: 210px; }
.body-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(150px); background: linear-gradient(96deg, #6f9f3e, #bad77d); }
.body-left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(150px); background: linear-gradient(96deg, #eef2e8, #a8ca69); }
.body-top, .body-bottom { width: 300px; height: 204px; }
.body-top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(105px); background: linear-gradient(118deg, #edf3e4, #b6d478); }
.body-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(105px); background: #9abb63; }
.body-copy { position: absolute; left: 23px; top: 25px; z-index: 1; color: #7b8c7b; font-size: .55rem; line-height: 1.55; letter-spacing: .04em; }
.body-copy b { color: #a2aa9d; font-weight: 500; }
.body-brand { position: absolute; left: 23px; bottom: 22px; z-index: 1; color: #76b120; font-family: Arial, sans-serif; font-size: 1.8rem; letter-spacing: -.09em; }
.inner-tray { position: absolute; left: 28px; top: 18px; width: 244px; height: 157px; opacity: 0; transform: translateZ(104px) translateY(20px); transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.75,.2,1); }
.tray-wall { position: absolute; display: block; background: #e8ecdd; border: 1px solid rgba(40,67,42,.23); }
.tray-back { left: 0; top: 0; width: 244px; height: 14px; transform: translateZ(62px); }
.tray-left { left: 0; top: 0; width: 124px; height: 14px; transform: rotateY(90deg) translateZ(7px); transform-origin: left center; }
.tray-right { right: 0; top: 0; width: 124px; height: 14px; transform: rotateY(-90deg) translateZ(7px); transform-origin: right center; }
.compartment { position: absolute; top: 16px; height: 105px; padding: 13px 10px; color: #7d8f79; background: #f5f6ef; border: 1px solid rgba(40,67,42,.16); box-shadow: 0 5px 9px rgba(33,63,39,.1); }
.compartment b { display: block; color: #7ead3b; font-size: .62rem; letter-spacing: .14em; }
.compartment small { display: block; margin-top: 15px; font-size: .46rem; letter-spacing: .15em; }
.compartment-one { left: 16px; width: 74px; }
.compartment-two { left: 95px; width: 62px; }
.compartment-three { left: 162px; width: 66px; }
.package-lid { left: 45px; top: 144px; width: 300px; height: 22px; z-index: 4; transform-origin: 50% 100%; transition: transform 1000ms cubic-bezier(.2,.75,.2,1); }
.lid-front, .lid-back { width: 300px; height: 22px; transform: translate(-50%, -50%) translateZ(102px); }
.lid-front { background: #9fc65b; }
.lid-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(102px); background: #8eb64e; }
.lid-right, .lid-left { width: 204px; height: 22px; }
.lid-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(150px); background: #7eaa41; }
.lid-left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(150px); background: #c5dd8d; }
.lid-top, .lid-bottom { width: 300px; height: 204px; }
.lid-top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(11px); background: linear-gradient(122deg, #d0e78c, #83b444); }
.lid-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(11px); background: #8db64e; }
.lid-brand { position: absolute; left: 24px; top: 24px; color: #fff; font-family: Arial, sans-serif; font-size: 1.9rem; letter-spacing: -.08em; text-shadow: 0 1px 4px rgba(45,85,29,.22); }
.lid-brand small { display: block; margin-top: 3px; font-size: .34rem; letter-spacing: .32em; }
.box-handle { position: absolute; left: 50%; top: 50%; width: 45px; height: 88px; border: 12px solid #aeb5b7; border-bottom: 0; border-radius: 27px 27px 0 0; box-shadow: 0 5px 6px rgba(47,63,51,.18); transform: translate(-50%, -50%) translateZ(6px) rotateX(-8deg); }
.box-handle::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 16px; background: #aeb5b7; transform: translateX(-50%); }
.assembly-shadow { position: absolute; left: 50%; bottom: 16px; width: 320px; height: 42px; border-radius: 50%; background: rgba(24,57,35,.23); filter: blur(20px); transform: translateX(-50%) translateZ(-58px) rotate(-4deg); transition: transform 900ms ease, opacity 500ms ease; }
.giftbox.is-open .package-lid { transform: translate3d(0, -118px, 34px) rotateX(-76deg) rotateZ(-1deg); }
.giftbox.is-open .inner-tray { opacity: 1; transform: translateZ(106px) translateY(4px); }
.giftbox.is-open .assembly-shadow { transform: translateX(-50%) translateZ(-10px) scale(1.18) rotate(-4deg); opacity: .16; }
@media (max-width: 560px) { .giftbox { transform: scale(.78) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); } }

/* Canonical geometry extracted from the Adobe Dimension .dn source. */
.giftbox.source-model-ready .package-body,
.giftbox.source-model-ready .package-lid { display: none; }
.dn-model {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.dn-part {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dn-w);
  height: var(--dn-h);
  transform-origin: center center;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) var(--dn-transform);
  transition: transform 950ms cubic-bezier(.2,.75,.2,1), opacity 500ms ease;
}
.dn-face {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
  border: 1px solid rgba(32,62,36,.2);
  box-sizing: border-box;
  transform-style: preserve-3d;
}
.dn-face-front, .dn-face-back {
  width: var(--dn-w);
  height: var(--dn-h);
  transform: translate(-50%, -50%) translateZ(var(--dn-d2));
}
.dn-face-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(var(--dn-d2)); }
.dn-face-right, .dn-face-left {
  width: var(--dn-d);
  height: var(--dn-h);
}
.dn-face-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(var(--dn-w2)); }
.dn-face-left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(var(--dn-w2)); }
.dn-face-top, .dn-face-bottom {
  width: var(--dn-w);
  height: var(--dn-d);
}
.dn-face-top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(var(--dn-h2)); }
.dn-face-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(var(--dn-h2)); }
.dn-panel-green .dn-face { background: linear-gradient(118deg, #d2e796 0%, #9bc553 52%, #70a936 100%); }
.dn-panel-green .dn-face-front, .dn-panel-green .dn-face-back { background: #9bc553; }
.dn-panel-light .dn-face { background: #edf1e7; }
.dn-panel-light .dn-face-top, .dn-panel-light .dn-face-bottom { background: linear-gradient(120deg, #f4f5ed, #c6db9d); }
.dn-front .dn-face-front, .dn-front .dn-face-back { background: linear-gradient(100deg, #84b443 0 28%, #eef2e7 28% 76%, #c4da91 100%); }
.dn-front .dn-face-right { background: linear-gradient(100deg, #6f9e3e, #b9d67a); }
.dn-front .dn-face-left { background: #eef2e7; }
.dn-front .dn-face-top { background: linear-gradient(118deg, #ecf1e3, #b6d479); }
.dn-side-green .dn-face-front, .dn-side-green .dn-face-back { background: linear-gradient(100deg, #77a93d, #bad77c); }
.dn-side-green .dn-face-right, .dn-side-green .dn-face-left { background: #a7c96c; }
.dn-inner .dn-face { background: #e9eee1; }
.dn-inner .dn-face-top { background: #f6f7f1; }
.dn-brand { position: absolute; left: 10px; bottom: 10px; color: #fff; font: 500 15px/1 Arial, sans-serif; letter-spacing: -.08em; text-shadow: 0 1px 3px rgba(35,73,31,.22); }
.dn-brand small { display: block; margin-top: 2px; color: rgba(255,255,255,.8); font-size: 3px; letter-spacing: .25em; }
.giftbox.is-open .dn-lid-top { transform: translate(-50%, -50%) translate3d(22px, -74px, 38px) rotateZ(-4deg) var(--dn-transform); }
.giftbox.is-open .dn-lid-back { transform: translate(-50%, -50%) translate3d(-8px, -92px, 18px) rotateZ(2deg) var(--dn-transform); }
.giftbox.is-open .dn-inner { transform: translate(-50%, -50%) translate3d(-18px, 28px, 22px) var(--dn-transform); }
.giftbox.is-open .dn-front { transform: translate(-50%, -50%) translate3d(0, 10px, 12px) var(--dn-transform); }
@media (max-width: 560px) {
  .dn-model { transform: scale(.78); }
}

/* Final visual correction: larger object, source artwork, handle, and opening motion. */
.dn-model { transform: scale(1.45); }
.dn-lid-top .dn-face-top {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-lid.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-lid-top .dn-face-front,
.dn-lid-top .dn-face-back { background: #93bf4c; }
.dn-lid-top .dn-face-right,
.dn-lid-top .dn-face-left { background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-side-detail.png'); background-size: cover; }
.dn-front .dn-face-front { background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-inner-front.png'); background-size: cover; background-position: center; }
.dn-front .dn-face-right,
.dn-front .dn-face-left { background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-inner-side.png'); background-size: cover; background-position: center; }
.dn-inner .dn-face-top { background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-inner-side.png'); background-size: cover; background-position: center; }
.dn-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 23px;
  border: 1px solid rgba(80,91,72,.25);
  border-radius: 2px;
  background: linear-gradient(135deg, #fffef8 0%, #f5f5ea 72%, #d3d6c8 100%);
  box-shadow: 5px 7px 0 rgba(68,79,63,.36), 0 10px 16px rgba(37,62,40,.18);
  transform: translate(-50%, -50%) translate3d(0, -108px, 42px) rotateX(-58deg) rotateZ(-4deg);
  transform-style: preserve-3d;
  transition: transform 950ms cubic-bezier(.2,.75,.2,1), opacity 500ms ease;
  z-index: 6;
}
.dn-handle::after { content: ''; position: absolute; inset: 3px 7px; border-top: 1px solid rgba(255,255,255,.85); }
.giftbox.source-model-ready .dn-lid-top .dn-brand { display: none; }
.giftbox.is-open .dn-handle { transform: translate(-50%, -50%) translate3d(22px, -168px, 50px) rotateX(-72deg) rotateZ(-8deg); }
.giftbox.is-open .dn-base-top { transform: translate(-50%, -50%) translate3d(0, 40px, -8px) var(--dn-transform); }
.giftbox.is-open .dn-side-left { transform: translate(-50%, -50%) translate3d(-48px, 18px, 22px) rotateZ(-7deg) var(--dn-transform); }
.giftbox.is-open .dn-side-right { transform: translate(-50%, -50%) translate3d(48px, 18px, 22px) rotateZ(7deg) var(--dn-transform); }
@media (max-width: 560px) { .dn-model { transform: scale(1.08); } }

/* October 08 surface/geometry pass — the reference box is a long rhomboid sleeve,
   with a raised tab, not a square carton or three stacked boxes. */
.dn-model {
  transform: scale3d(1.72, 1.56, 1.42) rotateZ(-1deg);
  transform-origin: 50% 54%;
}
.dn-part { border-radius: 1px; }

/* The large upper plane is the right-hand panel of 侧面图和俯视图.png;
   its narrow green strip remains a separate side face. */
.dn-lid-top .dn-face-top {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-lid-top.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-lid-top .dn-face-right,
.dn-lid-top .dn-face-left {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-lid-edge.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-lid-back .dn-face-top,
.dn-lid-back .dn-face-front,
.dn-lid-back .dn-face-back {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-lid-top.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* The front artwork is kept readable when the 3D face turns toward camera.
   The small green rail is part of the left edge in the reference elevation. */
.dn-front .dn-face-front {
  position: relative;
  /* The plane is not mirrored; keep the original readable artwork. */
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-inner-front.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-front .dn-face-front::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 19%;
  background: linear-gradient(110deg, #7fae3f 0%, #a9ca69 100%);
  opacity: .92;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* The opposite view is the intentional two-panel seam: 盒子2立面2 on the left,
   and 盒子1立面 turned upright on the right. */
.dn-front .dn-face-back {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-back-seam.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-front .dn-face-right,
.dn-front .dn-face-left {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-side-green.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-side-green .dn-face-front,
.dn-side-green .dn-face-back {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-side-detail.png');
  background-size: cover;
  background-position: center;
}

/* Raised white tab from 渲染图1 / 盒形剖析: the tab floats a little above the lid
   but is visually joined by a short support, instead of hovering far away. */
.dn-handle {
  width: 25px;
  height: 54px;
  border: 1px solid rgba(80,91,72,.30);
  border-radius: 2px;
  background: linear-gradient(145deg, #fffef7 0%, #f3f3e8 72%, #cfd3c4 100%);
  box-shadow: 4px 7px 0 rgba(68,79,63,.30), 0 12px 18px rgba(37,62,40,.18);
  transform: translate(-50%, -50%) translate3d(2px, -63px, 78px) rotateX(-15deg) rotateY(-12deg) rotateZ(-5deg);
}
.dn-handle::before {
  content: '';
  position: absolute;
  left: 5px;
  bottom: -11px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(80,91,72,.25);
  border-top: 0;
  background: linear-gradient(90deg, #d8dbcf, #fafaf1);
  transform: translateZ(-4px) skewX(-12deg);
}
.dn-handle::after { inset: 4px 6px; border-top: 1px solid rgba(255,255,255,.90); }
.giftbox.is-open .dn-handle {
  transform: translate(-50%, -50%) translate3d(22px, -133px, 92px) rotateX(-20deg) rotateY(-12deg) rotateZ(-8deg);
}

/* Preserve the long-box silhouette at smaller widths without collapsing it to a square. */
@media (max-width: 560px) {
  .dn-model { transform: scale3d(1.30, 1.20, 1.12) rotateZ(-1deg); }
}

/* Numbered face map supplied by the user on 2026-10-08. */
.dn-model {
  transform: scale3d(1.54, 1.43, 1.34) rotateZ(-1deg);
  transform-origin: 50% 54%;
}

/* T1 — top main face: 外壳表面1psd 拷贝.psd */
.dn-lid-top .dn-face-top,
.dn-lid-top .dn-face-bottom,
.dn-lid-back .dn-face-top,
.dn-lid-back .dn-face-bottom {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-lid-copy.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
/* T2 — the compressed face underneath the top edge: 外壳表面2.psd */
.dn-lid-top .dn-face-right,
.dn-lid-top .dn-face-left,
.dn-lid-back .dn-face-right,
.dn-lid-back .dn-face-left {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-shell-surface2-web.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* F1 — front large face: 盒子2 立面.psd. No extra colour rail is painted over it. */
.dn-front .dn-face-front {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-inner-front.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-front .dn-face-front::after { display: none; }

/* L1 / R1 — both side faces use 渐变.psd. */
.dn-side-green .dn-face-front,
.dn-side-green .dn-face-back,
.dn-front .dn-face-right,
.dn-front .dn-face-left {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-gradient.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* B1 + B2 — one continuous back plane, left half 盒子2 立面.psd,
   right half 盒子1 立面.psd turned upright. */
.dn-front .dn-face-back {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-back-seam-v2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* H1 — centred raised tab; its foot stays tied to T1 in the closed state. */
.dn-handle {
  width: 25px;
  height: 58px;
  transform: translate(-50%, -50%) translate3d(0, -58px, 86px) rotateX(-12deg) rotateY(-10deg) rotateZ(-5deg);
}
.giftbox.is-open .dn-handle {
  transform: translate(-50%, -50%) translate3d(0, -150px, 102px) rotateX(-18deg) rotateY(-10deg) rotateZ(-7deg);
}

/* Open sequence follows 盒形剖析.jpg: lift the outer lid, raise the inner tray,
   and only then spread the side walls a little. */
.giftbox.is-open .dn-lid-top {
  transform: translate(-50%, -50%) translate3d(0, -116px, 76px) rotateZ(-1deg) var(--dn-transform);
}
.giftbox.is-open .dn-lid-back {
  transform: translate(-50%, -50%) translate3d(0, -124px, 64px) rotateZ(1deg) var(--dn-transform);
}
.giftbox.is-open .dn-inner {
  transform: translate(-50%, -50%) translate3d(0, 28px, 42px) var(--dn-transform);
}
.giftbox.is-open .dn-front {
  transform: translate(-50%, -50%) translate3d(0, 8px, 18px) var(--dn-transform);
}
.giftbox.is-open .dn-side-left {
  transform: translate(-50%, -50%) translate3d(-34px, 12px, 18px) rotateZ(-4deg) var(--dn-transform);
}
.giftbox.is-open .dn-side-right {
  transform: translate(-50%, -50%) translate3d(34px, 12px, 18px) rotateZ(4deg) var(--dn-transform);
}
@media (max-width: 560px) {
  .dn-model { transform: scale3d(1.18, 1.10, 1.04) rotateZ(-1deg); }
}

/* Stable solid-box geometry. The previous source-matrix surfaces were useful for
   texture placement but could not keep a rectangular sleeve joined while opening. */
.dn-part { display: none !important; }
.dn-solid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dn-w);
  height: var(--dn-h);
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 900ms cubic-bezier(.2,.75,.2,1), opacity 500ms ease;
}
.dn-shell-body {
  z-index: 2;
  transform: translate(-50%, -50%) translate3d(0, 18px, 0);
}
.dn-shell-lid {
  z-index: 5;
  transform: translate(-50%, -50%) translate3d(0, -75px, 0);
}
.dn-shell-inner {
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(0, 38px, 20px);
}

/* User-confirmed artwork map */
.dn-shell-body .dn-face-front {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-inner-front.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-shell-body .dn-face-back {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-back-seam-v2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-shell-body .dn-face-left,
.dn-shell-body .dn-face-right {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-gradient.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-shell-body .dn-face-top { background: linear-gradient(120deg, #e9eee2, #a5c867); }
.dn-shell-body .dn-face-bottom { background: #d3ddc8; }

.dn-shell-lid .dn-face-top,
.dn-shell-lid .dn-face-bottom {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-lid-copy.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dn-shell-lid .dn-face-front,
.dn-shell-lid .dn-face-back,
.dn-shell-lid .dn-face-left,
.dn-shell-lid .dn-face-right {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-shell-surface2-web.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dn-shell-inner .dn-face { background: #eef1e6; }
.dn-shell-inner .dn-face-top {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-inner-side.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.dn-model {
  transform: scale3d(1.35, 1.35, 1.35);
  transform-origin: 50% 54%;
}

/* The opening is a joined sequence: lid rises, inner tray comes forward, body
   stays a single rectangular shell. */
.giftbox.is-open .dn-shell-lid {
  transform: translate(-50%, -50%) translate3d(0, -150px, 38px) rotateX(-18deg) rotateZ(-2deg);
}
.giftbox.is-open .dn-shell-inner {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(0, 5px, 48px) rotateX(-5deg);
}
.giftbox.is-open .dn-shell-body {
  transform: translate(-50%, -50%) translate3d(0, 26px, 0);
}
.giftbox.is-open .dn-handle {
  transform: translate(-50%, -50%) translate3d(0, -185px, 50px) rotateX(-18deg) rotateY(-10deg) rotateZ(-7deg);
}

/* H1: a vertical tab with a short foot seated on the lid. */
.dn-handle {
  width: 25px;
  height: 58px;
  transform: translate(-50%, -50%) translate3d(0, -112px, 14px) rotateX(-8deg) rotateY(-10deg) rotateZ(-5deg);
}
@media (max-width: 560px) {
  .dn-model { transform: scale3d(1.12, 1.12, 1.12); }
}

/* Final geometry pass from 盒形剖析.jpg / Meeton Table reference.
   Keep one continuous rectangular sleeve in the closed state: the outer body
   carries the fixed shell, while the inner box is a drawer that slides out
   along the depth axis. The lid and handle remain attached to the sleeve. */
.dn-solid { overflow: visible; }
.dn-shell-body {
  transform: translate(-50%, -50%) translate3d(0, 18px, 0);
}
.dn-shell-lid {
  transform-origin: 50% 100%;
  transform: translate(-50%, -50%) translate3d(0, -66px, 0);
}
.dn-shell-lid .dn-face { border-color: rgba(32,62,36,.24); }
.dn-shell-body .dn-face { border-color: rgba(32,62,36,.22); }
.dn-shell-inner {
  z-index: 4;
  opacity: 1;
  transform-origin: 50% 50%;
  /* closed: the drawer front sits just beyond the sleeve opening */
  transform: translate(-50%, -50%) translate3d(0, 18px, 40px);
}
.giftbox.is-open .dn-shell-lid {
  transform: translate(-50%, -50%) translate3d(0, -66px, 0);
}
.giftbox.is-open .dn-shell-inner {
  opacity: 1;
  /* open: pull the inner tray toward the viewer; no hinged lid motion */
  transform: translate(-50%, -50%) translate3d(0, 18px, 154px) rotateX(-2deg);
}
.giftbox.is-open .dn-shell-body {
  transform: translate(-50%, -50%) translate3d(0, 18px, 0);
}
.dn-handle {
  transform: translate(-50%, -50%) translate3d(0, -104px, 26px) rotateX(-8deg) rotateY(-10deg) rotateZ(-5deg);
}
.giftbox.is-open .dn-handle {
  /* the handle belongs to the fixed outer sleeve, so it does not travel with
     the pulled drawer */
  transform: translate(-50%, -50%) translate3d(0, -104px, 26px) rotateX(-8deg) rotateY(-10deg) rotateZ(-5deg);
}

/* Pull-out proof: the drawer is slightly smaller than the sleeve, leaving a
   visible fixed border around its front instead of reading as a second box. */
.giftbox.structure-proof .dn-shell-inner .dn-face-front {
  box-shadow: inset 0 0 0 8px rgba(188, 205, 162, .42), 0 8px 16px rgba(36, 55, 38, .12);
}
.giftbox.structure-proof .dn-shell-inner .dn-face-top,
.giftbox.structure-proof .dn-shell-inner .dn-face-bottom {
  background-color: #f7f8f1 !important;
}

/* Structure-first review mode. The geometry is easier to judge without
   artwork fighting the silhouette; face artwork can be restored after the
   user confirms the box construction. */
.giftbox.structure-proof .dn-face {
  background-image: none !important;
  background-color: #e9eee4 !important;
}
.giftbox.structure-proof .dn-shell-body .dn-face-front { background-color: #f5f4ed !important; }
.giftbox.structure-proof .dn-shell-body .dn-face-back { background-color: #e4eadb !important; }
.giftbox.structure-proof .dn-shell-body .dn-face-left,
.giftbox.structure-proof .dn-shell-body .dn-face-right { background-color: #c6da91 !important; }
.giftbox.structure-proof .dn-shell-body .dn-face-top { background-color: #eef2e7 !important; }
.giftbox.structure-proof .dn-shell-body .dn-face-bottom { background-color: #d4ddcc !important; }
.giftbox.structure-proof .dn-shell-lid .dn-face-top,
.giftbox.structure-proof .dn-shell-lid .dn-face-bottom { background-color: #b9d878 !important; }
.giftbox.structure-proof .dn-shell-lid .dn-face-front,
.giftbox.structure-proof .dn-shell-lid .dn-face-back,
.giftbox.structure-proof .dn-shell-lid .dn-face-left,
.giftbox.structure-proof .dn-shell-lid .dn-face-right { background-color: #a5c866 !important; }
.giftbox.structure-proof .dn-shell-inner .dn-face { background-color: #f2f4eb !important; }
.giftbox.structure-proof .dn-shell-inner .dn-face-top { background-color: #ffffff !important; }

/* Final structural reference: a near-square double-compartment package. The
   large left bay and smaller right bay share one front plane. The right full
   cover folds below the shorter left cover in the shut state. */
.dn-main-body,
.dn-side-body,
.dn-main-lid,
.dn-side-lid,
.dn-main-inner,
.dn-side-inner {
  position: absolute;
}
.dn-main-body {
  z-index: 2;
  transform: translate(-50%, -50%) translate3d(-42px, 18px, 0);
}
.dn-side-body {
  z-index: 3;
  transform: translate(-50%, -50%) translate3d(88px, 18px, 0);
}
.dn-main-lid {
  z-index: 6;
  transform-origin: 100% 50%;
  transform: translate(-50%, -50%) translate3d(-42px, -66px, 0);
}
.dn-side-lid {
  z-index: 7;
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%) translate3d(88px, -66px, 0);
}
.dn-main-inner,
.dn-side-inner {
  z-index: 4;
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(-42px, 20px, 18px);
}
.dn-side-inner {
  transform: translate(-50%, -50%) translate3d(88px, 20px, 18px);
}
.giftbox.is-open .dn-main-lid {
  transform: translate(-50%, -50%) translate3d(-160px, -48px, 4px) rotateZ(-3deg);
}
.giftbox.is-open .dn-side-lid {
  transform: translate(-50%, -50%) translate3d(206px, -48px, 4px) rotateZ(3deg);
}
.giftbox.is-open .dn-main-inner,
.giftbox.is-open .dn-side-inner {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(-42px, -18px, 42px);
}
.giftbox.is-open .dn-side-inner {
  transform: translate(-50%, -50%) translate3d(88px, -18px, 42px);
}
.giftbox.is-open .dn-main-body .dn-face-top,
.giftbox.is-open .dn-side-body .dn-face-top { opacity: 0; }

/* Structure proof colours only; no artwork from the user's sketch is used. */
.giftbox.structure-proof .dn-main-body .dn-face,
.giftbox.structure-proof .dn-side-body .dn-face { background-color: #e7ebdf !important; }
.giftbox.structure-proof .dn-main-body .dn-face-front { background-color: #f5f4ed !important; }
.giftbox.structure-proof .dn-side-body .dn-face-front { background-color: #d8e5b9 !important; }
.giftbox.structure-proof .dn-main-body .dn-face-left,
.giftbox.structure-proof .dn-main-body .dn-face-right { background-color: #d5e2b2 !important; }
.giftbox.structure-proof .dn-side-body .dn-face-left,
.giftbox.structure-proof .dn-side-body .dn-face-right { background-color: #c8db96 !important; }
.giftbox.structure-proof .dn-main-lid .dn-face { background-color: #c4df80 !important; }
.giftbox.structure-proof .dn-side-lid .dn-face { background-color: #b2d469 !important; }
.giftbox.structure-proof .dn-main-inner .dn-face { background-color: #f2f4eb !important; }
.giftbox.structure-proof .dn-side-inner .dn-face { background-color: #d4e3ac !important; }

/* The woven loop remains centred over the large compartment and passes
   through the main lid, as shown in the supplied detail view. */
.dn-handle {
  transform: translate(-50%, -50%) translate3d(-42px, -107px, 22px) rotateX(-8deg) rotateY(-4deg);
}
.giftbox.is-open .dn-handle {
  transform: translate(-50%, -50%) translate3d(-160px, -88px, 18px) rotateX(-8deg) rotateY(-4deg) rotateZ(-3deg);
}

/* October 08 structure correction: this is a joined two-half case, not a
   drawer. The centre seam stays aligned when closed; opening folds the two
   halves away from that seam and exposes the inner support. */
.dn-shell-left,
.dn-shell-right,
.dn-shell-core {
  z-index: 3;
  opacity: 1;
}
.dn-shell-left {
  transform-origin: 100% 50%;
  transform: translate(-50%, -50%) translate3d(-61px, 18px, 0);
}
.dn-shell-right {
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%) translate3d(61px, 18px, 0);
}
.dn-shell-core {
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(0, 28px, 26px);
}
.giftbox.is-open .dn-shell-left {
  transform: translate(-50%, -50%) translate3d(-92px, 24px, 34px) rotateY(-52deg);
}
.giftbox.is-open .dn-shell-right {
  transform: translate(-50%, -50%) translate3d(92px, 24px, 34px) rotateY(52deg);
}
.giftbox.is-open .dn-shell-core {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(0, 30px, 70px);
}

/* The handle is a raised woven band, not a flat card: the thick loop and its
   two feet have visible depth and stay attached to the left outer half. */
.dn-handle {
  width: 34px;
  height: 104px;
  border: 11px solid #2b3430;
  border-bottom: 0;
  border-radius: 22px 22px 4px 4px;
  background: linear-gradient(90deg, #1d2522 0%, #3f4a43 48%, #202824 100%);
  box-shadow: 7px 7px 0 rgba(17, 24, 21, .34), inset 3px 0 0 rgba(255,255,255,.12), inset -4px 0 0 rgba(0,0,0,.18);
  transform: translate(-50%, -50%) translate3d(-61px, -106px, 20px) rotateX(-8deg) rotateY(-10deg) rotateZ(-4deg);
  z-index: 8;
}
.dn-handle::before,
.dn-handle::after {
  content: '';
  position: absolute;
  bottom: -16px;
  width: 14px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1d2522, #47534b 52%, #202824);
  box-shadow: 4px 3px 0 rgba(17, 24, 21, .28);
}
.dn-handle::before { left: -11px; }
.dn-handle::after { right: -11px; }
.giftbox.is-open .dn-handle {
  transform: translate(-50%, -50%) translate3d(-145px, -98px, 58px) rotateX(-8deg) rotateY(-52deg) rotateZ(-4deg);
}

/* Neutral proof colours for the new construction. */
.giftbox.structure-proof .dn-shell-left .dn-face,
.giftbox.structure-proof .dn-shell-right .dn-face { background-color: #dbe5c3 !important; }
.giftbox.structure-proof .dn-shell-left .dn-face-front,
.giftbox.structure-proof .dn-shell-right .dn-face-front { background-color: #f5f4ed !important; }
.giftbox.structure-proof .dn-shell-left .dn-face-top,
.giftbox.structure-proof .dn-shell-right .dn-face-top { background-color: #b9d878 !important; }
.giftbox.structure-proof .dn-shell-core .dn-face { background-color: #f2f4eb !important; }
.giftbox.structure-proof .dn-shell-core .dn-face-top { background-color: #ffffff !important; }

/* October 08 correction from the supplied product photo: the closed object is
   one uninterrupted rectangular carton with a single top cover. Remove the
   temporary two-half proof and restore the continuous box silhouette. */
.dn-shell-body {
  z-index: 2;
  transform: translate(-50%, -50%) translate3d(0, 18px, 0);
}
.dn-shell-lid {
  z-index: 5;
  transform-origin: 50% 100%;
  transform: translate(-50%, -50%) translate3d(0, -66px, 0);
}
.dn-shell-inner {
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(0, 32px, 20px);
}
.giftbox.is-open .dn-shell-body {
  transform: translate(-50%, -50%) translate3d(0, 18px, 0);
}
.giftbox.is-open .dn-shell-lid {
  transform: translate(-50%, -50%) translate3d(0, -106px, 30px) rotateX(-46deg);
}
.giftbox.is-open .dn-shell-inner {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(0, 8px, 48px);
}

/* A fabric ribbon loop: broad, rounded, and extruded rather than a thin card. */
.dn-handle {
  width: 42px;
  height: 94px;
  border: 10px solid #aebebc;
  border-bottom: 0;
  border-radius: 24px 24px 5px 5px;
  background: linear-gradient(90deg, #8d9f9c 0%, #c5d2cf 48%, #8b9c99 100%);
  box-shadow: 7px 7px 0 rgba(54, 69, 66, .30), inset 3px 0 0 rgba(255,255,255,.42), inset -4px 0 0 rgba(54,69,66,.18);
  transform: translate(-50%, -50%) translate3d(0, -106px, 22px) rotateX(-8deg) rotateY(-4deg);
  z-index: 8;
}
.dn-handle::before,
.dn-handle::after {
  content: '';
  position: absolute;
  bottom: -17px;
  width: 14px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8d9f9c, #c5d2cf 48%, #8b9c99);
  box-shadow: 4px 3px 0 rgba(54,69,66,.24);
}
.dn-handle::before { left: -10px; }
.dn-handle::after { right: -10px; }
.giftbox.is-open .dn-handle {
  transform: translate(-50%, -50%) translate3d(0, -144px, 56px) rotateX(-42deg) rotateY(-4deg);
}

/* Closed-box proof colours: top cover, body and ribbon remain visibly distinct. */
.giftbox.structure-proof .dn-shell-body .dn-face { background-color: #e6eadf !important; }
.giftbox.structure-proof .dn-shell-body .dn-face-front { background-color: #f5f4ed !important; }
.giftbox.structure-proof .dn-shell-body .dn-face-left,
.giftbox.structure-proof .dn-shell-body .dn-face-right { background-color: #d6e4b5 !important; }
.giftbox.structure-proof .dn-shell-body .dn-face-top { background-color: #eef2e7 !important; }
.giftbox.structure-proof .dn-shell-lid .dn-face { background-color: #b9d878 !important; }
.giftbox.structure-proof .dn-shell-inner .dn-face { background-color: #f2f4eb !important; }

/* Final double-bay construction. The external shell is a single wrap which
   unfolds into one flat plane; the two recessed trays remain independent in
   the middle rather than becoming the two opened covers. */
.dn-outer-sheet {
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(-58px, 96px, 0);
}
.dn-outer-sheet .dn-face { border-color: rgba(57, 78, 48, .18); }
.dn-main-lid,
.dn-side-lid {
  transform-origin: 50% 50%;
  transition: transform 1000ms cubic-bezier(.2,.75,.2,1), opacity 400ms ease;
}
.giftbox.is-open .dn-outer-sheet {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(-58px, 96px, 0);
}
/* The outer panels remain contiguous with the continuous wrap: left panel →
   large tray → small tray → right panel, all on one unfolded plane. */
.giftbox.is-open .dn-main-lid {
  transform: translate(-50%, -50%) translate3d(-229px, 90px, 0) rotateZ(180deg);
}
.giftbox.is-open .dn-side-lid {
  transform: translate(-50%, -50%) translate3d(167px, 90px, 0) rotateZ(180deg);
}
.giftbox.is-open .dn-main-body .dn-face-top,
.giftbox.is-open .dn-side-body .dn-face-top { opacity: 0; }
.giftbox.is-open .dn-main-inner {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(-42px, -10px, 0);
}
.giftbox.is-open .dn-side-inner {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(88px, -10px, 0);
}
/* These inset planes are only a structural proof, deliberately without the
   finished artwork. Their surrounding rim reads as the two independent bays. */
.giftbox.is-open .dn-main-inner .dn-face-top,
.giftbox.is-open .dn-side-inner .dn-face-top {
  box-shadow: inset 0 0 0 13px rgba(91, 116, 77, .26), inset 0 -7px 11px rgba(54, 76, 45, .12);
}
.giftbox.is-open .dn-main-inner .dn-face-top::after,
.giftbox.is-open .dn-side-inner .dn-face-top::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(74, 97, 60, .25);
  background: rgba(223, 232, 207, .82);
  box-shadow: inset 0 9px 12px rgba(74, 97, 60, .13);
}

/* One woven fabric ribbon folds back through one rectangular slot. This is a
   soft band (not a moulded U-handle): the bright front and darker return are
   the two sides of the same ribbon, joined by a rounded fold at the top. */
.dn-handle {
  width: 48px;
  height: 76px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: translate(-50%, -50%) translate3d(-42px, -103px, 18px) rotateX(-8deg) rotateY(-4deg);
  transform-style: preserve-3d;
  overflow: visible;
}
.dn-handle::before,
.dn-handle::after { display: none; }
.ribbon-front,
.ribbon-back {
  position: absolute;
  display: block;
  box-sizing: border-box;
  /* Fine crossed gradients are a deliberately subtle woven texture. */
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.19) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    linear-gradient(103deg, #07509e 0%, #0b85d5 47%, #034785 100%);
  box-shadow: inset 2px 0 1px rgba(255,255,255,.30), inset -3px 0 3px rgba(0,27,62,.35);
}
.ribbon-front {
  left: 50%;
  top: 0;
  display: block;
  width: 39px;
  height: 76px;
  border-radius: 23px 23px 2px 2px;
  clip-path: polygon(0 100%, 0 32%, 4% 20%, 13% 10%, 28% 3%, 50% 0, 72% 3%, 87% 10%, 96% 20%, 100% 32%, 100% 100%);
  z-index: 2;
}
.ribbon-back {
  left: calc(50% + 12px);
  top: 9px;
  width: 33px;
  height: 67px;
  border-radius: 17px 17px 2px 2px;
  filter: brightness(.60) saturate(.84);
  transform: translateX(-50%) translateZ(-21px) rotateY(-4deg);
  z-index: 1;
}
.ribbon-bridge {
  display: none;
}
.dn-main-lid .dn-face-top::before,
.dn-main-lid .dn-face-bottom::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 17px;
  border-radius: 1px;
  background: #062b4d;
  box-shadow: inset 2px 2px 3px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.22);
  transform: translate(-50%, -50%);
}
.dn-main-lid .dn-face-top::after {
  display: none;
}
.giftbox.is-open .dn-handle {
  opacity: .35;
  transform: translate(-50%, -50%) translate3d(-379px, 80px, 6px) rotateX(84deg);
}

.giftbox.structure-proof .dn-outer-sheet .dn-face { background-color: #e8ede3 !important; }
.giftbox.structure-proof .dn-main-inner .dn-face { background-color: #edf2e7 !important; }
.giftbox.structure-proof .dn-side-inner .dn-face { background-color: #dbe8c9 !important; }

/* The paperboard is one strip. Each side wall pivots from the bottom board;
   its lid pivots from the wall's upper edge. The 1+2 and 3+4 pairs therefore
   stay joined at every frame, including the halfway-open state. */
.dn-model { transition: transform 1150ms cubic-bezier(.22,1,.36,1); }
.dn-outer-sheet {
  z-index: 1;
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(-4px, 96px, 0);
}
.dn-flap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  z-index: 5;
  transition: transform 1100ms cubic-bezier(.22,1,.36,1);
}
.dn-flap-left { transform: translate3d(-134px, 96px, 0) rotateZ(0deg); }
.dn-flap-right { transform: translate3d(126px, 96px, 0) rotateZ(0deg); }
.dn-flap-left { z-index: 7; }
.dn-flap-right { z-index: 6; }
.dn-lid-hinge {
  position: absolute;
  left: 0;
  top: -150px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transition: transform 920ms cubic-bezier(.22,1,.36,1);
}
.dn-flap-left .dn-lid-hinge,
.dn-flap-right .dn-lid-hinge { transform: rotateZ(0deg); }
.dn-flap .dn-solid { left: 0; top: 0; }
.dn-wrap-left-wall,
.dn-wrap-right-wall {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(0, -75px, 0);
}
.dn-main-lid {
  transform: translate(-50%, -50%) translate3d(95px, -6px, 0);
}
.dn-side-lid {
  transform: translate(-50%, -50%) translate3d(-130px, -4px, 0);
}
/* The lid coordinates remain local to their hinge even while the package is
   open; older open-state transforms positioned them in world coordinates. */
.giftbox.is-open .dn-flap .dn-main-lid {
  transform: translate(-50%, -50%) translate3d(95px, -6px, 0);
}
.giftbox.is-open .dn-flap .dn-side-lid {
  transform: translate(-50%, -50%) translate3d(-130px, -4px, 0);
}
.giftbox.is-open .dn-flap .dn-wrap-left-wall,
.giftbox.is-open .dn-flap .dn-wrap-right-wall {
  transform: translate(-50%, -50%) translate3d(0, -75px, 0);
}
/* Unthread the handle before moving its own board: left opens first, then
   right. Closing is the exact reverse, so the right cover is fully seated
   before the left slotted cover passes over the ribbon. */
.giftbox.open-left .dn-flap-left { transform: translate3d(-159px, 96px, 0) rotateZ(-90deg); }
.giftbox.open-right .dn-flap-right { transform: translate3d(172px, 96px, 0) rotateZ(90deg); }
.giftbox.open-left .dn-flap-left .dn-lid-hinge { transform: rotateZ(-90deg); }
.giftbox.open-right .dn-flap-right .dn-lid-hinge { transform: rotateZ(90deg); }
.giftbox.structure-proof .dn-wrap-left-wall .dn-face,
.giftbox.structure-proof .dn-wrap-right-wall .dn-face,
.giftbox.structure-proof .dn-outer-sheet .dn-face { background-color: #e8ede3 !important; }
.giftbox.is-open .dn-model { transform: scale3d(.62, .62, .62); }

/* The ribbon is fixed to the large right-hand board, under the smaller left
   board. In the shut position its loop rises through the left board's slot;
   opening the left board exposes the band's true attachment. */
.dn-handle,
.giftbox.is-open .dn-handle {
  left: 0;
  top: 0;
  width: 46px;
  height: 76px;
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(-165px, -49px, 0);
}
.ribbon-front,
.ribbon-back,
.ribbon-curve {
  width: 39px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,18,54,.19) 0 1px, transparent 1px 3px),
    linear-gradient(105deg, #0754a4, #0b82cf 52%, #034382);
  box-shadow: inset 1px 0 2px rgba(255,255,255,.25), inset -2px 0 2px rgba(0,25,65,.24);
}
.ribbon-front,
.ribbon-back {
  left: 50%;
  top: 15px;
  height: 61px;
  border-radius: 0 0 2px 2px;
  clip-path: none;
}
.ribbon-front { transform: translateX(-50%) translateZ(5px); }
.ribbon-back { filter: brightness(.58); transform: translateX(-50%) translateZ(-5px); }
.ribbon-curve {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  height: 4.6px;
  backface-visibility: visible;
  transform: translate(-50%, -50%) translate3d(0, var(--curve-y), var(--curve-z)) rotateX(var(--curve-angle));
}
.dn-main-lid .dn-face-top::before,
.dn-main-lid .dn-face-bottom::before {
  /* Just enough clearance for the 39px woven band, centred on the band when
     the two covers meet. The reference slot is a slit, not a wide opening. */
  width: 43px;
  height: 5px;
  background: #08243e;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.22);
}
/* Cut the same narrow opening through both surfaces of the board. The
   underside becomes the visible surface after this continuous wrap unfolds. */
.dn-main-lid .dn-face-top,
.dn-main-lid .dn-face-bottom {
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 100%, 43px 5px;
  -webkit-mask-position: center, center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: 100% 100%, 43px 5px;
  mask-position: center, center;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
.dn-main-lid .dn-face-top::before,
.dn-main-lid .dn-face-bottom::before { display: none; }
/* Both trays keep their approved closed silhouette; the narrow tray now
   inherits the right flap's hinge so its fold is one physical motion. */
.giftbox.open-left .dn-main-body {
  transform: translate(-50%, -50%) translate3d(-67px, 18px, 0);
}
.giftbox.open-left .dn-main-inner {
  transform: translate(-50%, -50%) translate3d(-67px, -10px, 0);
}
.giftbox:not(.open-left) .dn-main-body {
  transform: translate(-50%, -50%) translate3d(-42px, 18px, 0);
}
.giftbox:not(.open-left) .dn-main-inner {
  transform: translate(-50%, -50%) translate3d(-42px, 20px, 18px);
}
.dn-flap-right .dn-side-body,
.giftbox.open-right .dn-flap-right .dn-side-body,
.giftbox.is-open .dn-flap-right .dn-side-body {
  /* The two tray edges overlap slightly at closure, rather than leaving a
     hairline between the large tray and the folding narrow tray. */
  transform: translate(-50%, -50%) translate3d(-42px, -78px, 0);
}
.dn-flap-right .dn-side-inner,
.giftbox.open-right .dn-flap-right .dn-side-inner,
.giftbox.is-open .dn-flap-right .dn-side-inner {
  transform: translate(-50%, -50%) translate3d(-42px, -106px, 0);
  opacity: 1;
}
.giftbox.open-left:not(.open-right) .dn-outer-sheet {
  transform: translate(-50%, -50%) translate3d(-16.5px, 96px, 0) scaleX(1.0961538);
}
.giftbox.open-right .dn-outer-sheet {
  /* Extend the continuous base to the right hinge: the clear bridge is now
     150px, equal to the narrow tray wall which folds onto it. */
  transform: translate(-50%, -50%) translate3d(6.5px, 96px, 0) scaleX(1.2730769);
}
.giftbox:not(.open-left) .dn-main-body .dn-face-top,
.giftbox:not(.open-right) .dn-side-body .dn-face-top { opacity: 1; }
.giftbox:not(.open-left) .dn-main-inner,
.giftbox:not(.open-right) .dn-side-inner { opacity: 0; }
.giftbox.open-left .dn-main-inner,
.giftbox.open-right .dn-side-inner { opacity: 1; }
.dn-outer-sheet,
.dn-main-body,
.dn-side-body,
.dn-main-inner,
.dn-side-inner {
  transition: transform 1100ms cubic-bezier(.22,1,.36,1), opacity 520ms ease;
}

/* The exposed interior edges belong to the recessed trays, so they remain
   visible when the trays' outer top faces are removed for the open state. */
.giftbox.structure-proof .dn-main-body .dn-rim-wall .dn-face,
.giftbox.structure-proof .dn-side-body .dn-rim-wall .dn-face {
  background-color: #e6ebe0 !important;
  border-color: rgba(73, 96, 64, .16);
}
.giftbox:not(.open-left) .dn-main-body .dn-rim-wall,
.giftbox:not(.open-right) .dn-side-body .dn-rim-wall { opacity: 0; }
.giftbox.open-left .dn-main-body .dn-rim-wall,
.giftbox.open-right .dn-side-body .dn-rim-wall { opacity: 1; }
.giftbox.is-open .dn-main-body .dn-rim-wall > .dn-face-top,
.giftbox.is-open .dn-side-body .dn-rim-wall > .dn-face-top { opacity: 1; }

/* Keep the narrow tray's interior mounted throughout the fold. Its closed
   outer top hides it until opening, avoiding a late appearance or a "pop". */
.giftbox .dn-flap-right .dn-side-inner { opacity: 0; }
.giftbox.open-right .dn-flap-right .dn-side-inner { opacity: 1; }
.dn-flap-right .dn-side-body > .dn-face-top { transition: opacity 520ms ease; }

/* Only the large outer cover receives this first approved artwork. The slot,
   tray recesses and neighbouring narrow cover remain separate materials. */
.giftbox.structure-proof .dn-main-lid > .dn-face-top {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-shell-surface1.png') !important;
  background-color: #e6eee0 !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* The handle is attached to the full right cover. Its outward face is the
   35 × 30 cm 外壳表面2 artwork marked in the user's unfolded view. */
.giftbox.structure-proof .dn-side-lid > .dn-face-top {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-shell-surface2-web.png') !important;
  background-color: #dce8ce !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* On the continuous wrap, every watercolor gradient points the same way in
   physical space: pale at the far z edge, saturated green at the near edge.
   Opposite/rotated faces use exact rotations of the source PSD, not guessed
   CSS colours, so opening a hinge never reverses the gradient direction. */
.giftbox.structure-proof .dn-outer-sheet > .dn-face-top {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-gradient.png') !important;
  background-size: 100% 100%;
}
.giftbox.structure-proof .dn-outer-sheet > .dn-face-bottom {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-gradient-flipped.png') !important;
  background-size: 100% 100%;
}
.giftbox.structure-proof .dn-wrap-left-wall > .dn-face-right,
.giftbox.structure-proof .dn-wrap-right-wall > .dn-face-right {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-gradient-cw.png') !important;
  background-size: 100% 100%;
}
.giftbox.structure-proof .dn-wrap-left-wall > .dn-face-left,
.giftbox.structure-proof .dn-wrap-right-wall > .dn-face-left {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-gradient-ccw.png') !important;
  background-size: 100% 100%;
}

/* Same continuous woven loop, recoloured as the requested white cloth band. */
.ribbon-front,
.ribbon-back,
.ribbon-curve {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(84,91,82,.16) 0 1px, transparent 1px 3px),
    linear-gradient(105deg, #e4e7df 0%, #fffefa 49%, #d3d9d0 100%);
  box-shadow: inset 1px 0 2px rgba(255,255,255,.85), inset -2px 0 2px rgba(78,85,77,.18);
}
.ribbon-back { filter: brightness(.82); }

/* Four signed-off tray elevations, matched to the front/back screenshots and
   the front elevation in 侧面图和俯视图.ai. The narrow rear artwork is exported
   clockwise 90° before mapping, so its lettering reads in the intended pose. */
.giftbox.structure-proof .dn-main-body > .dn-face-front {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-box2-front.png') !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.giftbox.structure-proof .dn-side-body > .dn-face-front {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-box1-front.png') !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.giftbox.structure-proof .dn-side-body > .dn-face-back {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-box1-back-cw90.png') !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.giftbox.structure-proof .dn-main-body > .dn-face-back {
  background-image: url('https://siv-media-1515726189.cos.ap-guangzhou.myqcloud.com/work/zhiyuan/assets/texture-box2-back.png') !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}