/* Platform operations — single-page draggable Douyin book */
.douyin-dragbook-section {
  position: relative;
  min-height: 118vh;
  color: #171614;
  background:
    radial-gradient(circle at 50% 54%, rgba(0,0,0,.025), transparent 36%),
    linear-gradient(rgba(28,25,21,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,25,21,.025) 1px, transparent 1px),
    #f3efe7;
  background-size: auto, 38px 38px, 38px 38px, auto;
  scroll-snap-align: start;
  overflow: hidden;
}

.douyin-dragbook-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22vh;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.72), rgba(243,239,231,0));
}

.douyin-dragbook-inner {
  position: relative;
  min-height: 100vh;
  padding: 13vh 4.2vw 8vh;
  box-sizing: border-box;
}

.douyin-dragbook-heading {
  position: relative;
  z-index: 8;
  width: min(40vw, 560px);
}

.douyin-dragbook-heading .eyebrow { margin: 0 0 13px; color: rgba(23,22,20,.45); }
.douyin-dragbook-heading h2 { margin: 0; font-size: clamp(30px, 4.1vw, 58px); line-height: .96; letter-spacing: -.052em; font-weight: 500; }
.douyin-dragbook-heading p:last-child { width: min(430px, 100%); margin: 20px 0 0; color: rgba(23,22,20,.54); font: 400 10px/1.75 "IBM Plex Mono", monospace; }

.douyin-role-note {
  position: absolute;
  right: 4.2vw;
  top: 14vh;
  z-index: 8;
  display: grid;
  justify-items: end;
  gap: 8px;
  color: rgba(23,22,20,.5);
  font: 500 9px/1.3 "IBM Plex Mono", monospace;
}
.douyin-role-note b { color: rgba(23,22,20,.84); font-size: 11px; font-weight: 500; }

.douyin-book-wrap {
  position: absolute;
  left: 50%;
  top: 59%;
  width: min(74vw, 1120px);
  aspect-ratio: 1.88 / 1;
  transform: translate(-50%, -44%);
  perspective: 2200px;
  user-select: none;
  touch-action: none;
}

.douyin-book-shell {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255,255,255,.08), transparent 22%), linear-gradient(120deg, #28282a, #101011 72%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 42px 68px rgba(53,45,35,.32), inset 0 0 0 3px rgba(255,255,255,.025);
}
.douyin-book-shell::after { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(230,225,215,.28); border-radius: 16px; pointer-events: none; }

.douyin-book-pages { position: absolute; inset: 4.8% 8%; transform-style: preserve-3d; }
.douyin-page {
  position: absolute;
  top: 0;
  width: 49.4%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(45,40,34,.14);
  background: linear-gradient(rgba(55,48,38,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(55,48,38,.025) 1px, transparent 1px), #eee8dc;
  background-size: 100% 29px, 29px 100%, auto;
  box-shadow: 0 9px 24px rgba(0,0,0,.22);
}
.douyin-page-left { left: 0; border-radius: 12px 2px 2px 12px; }
.douyin-page-right { right: 0; border-radius: 2px 12px 12px 2px; }
.douyin-page-layout { position: absolute; inset: 0; overflow: hidden; }

.douyin-photo-frame {
  position: absolute;
  z-index: 2;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 5px;
  border: 1px solid rgba(31,29,26,.22);
  background: #fbfaf6;
  box-shadow: 0 7px 15px rgba(48,41,34,.18);
  pointer-events: none;
}
.douyin-photo-frame::before { content: ""; position: absolute; z-index: 4; left: 50%; top: -10px; width: 42%; height: 18px; transform: translateX(-50%) rotate(-1deg); background: rgba(218,210,191,.76); border: 1px solid rgba(78,70,58,.08); box-shadow: 0 2px 4px rgba(44,38,31,.08); }
.douyin-photo-main { left: 7%; top: 9%; width: 54%; height: 76%; transform: rotate(-1.15deg); }
.douyin-photo-small { right: 7%; top: 10%; width: 30%; height: 27%; transform: rotate(1.35deg); }
.douyin-photo-frame img { position: relative; z-index: 2; width: 100%; height: 100%; display: block; object-fit: cover; }
.douyin-page-left .douyin-photo-frame img,
.douyin-flip-front .douyin-photo-frame img { object-position: right center; }

.douyin-photo-placeholder {
  position: absolute;
  inset: 5px;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 10px;
  color: rgba(35,32,29,.42);
  background: linear-gradient(rgba(55,48,38,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(55,48,38,.03) 1px, transparent 1px), #e8e3d8;
  background-size: 18px 18px;
  text-align: center;
  font: 500 8px/1.35 "IBM Plex Mono", monospace;
}
.douyin-photo-placeholder b { color: rgba(35,32,29,.72); font-size: 10px; }

.douyin-page-index {
  position: absolute;
  right: 7%;
  bottom: 9%;
  width: 30%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(37,34,29,.26);
  color: rgba(37,34,29,.48);
  font: 500 7px/1.25 "IBM Plex Mono", monospace;
  letter-spacing: .04em;
}
.douyin-page-index b { color: rgba(37,34,29,.78); font-size: 12px; font-weight: 500; }

.douyin-flip-sheet {
  --turn-progress: 0;
  position: absolute;
  right: .6%;
  top: 0;
  width: 49.4%;
  height: 100%;
  z-index: 12;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--turn-progress) * -180deg));
  cursor: grab;
  will-change: transform;
}
.douyin-flip-sheet.is-dragging { cursor: grabbing; }
.douyin-flip-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(45,40,34,.14);
  background: linear-gradient(rgba(55,48,38,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(55,48,38,.025) 1px, transparent 1px), #eee8dc;
  background-size: 100% 29px, 29px 100%, auto;
  box-shadow: 6px 5px 14px rgba(0,0,0,.21);
}
.douyin-flip-front { border-radius: 2px 12px 12px 2px; }
.douyin-flip-back { border-radius: 12px 2px 2px 12px; transform: rotateY(180deg); }
.douyin-flip-sheet::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.24), transparent 18%, transparent 78%, rgba(255,255,255,.16)); opacity: calc(.14 + var(--turn-progress) * .28); mix-blend-mode: multiply; }

.douyin-book-spine { position: absolute; left: 50%; top: 3.7%; bottom: 3.7%; z-index: 30; width: 18px; transform: translateX(-50%); border-radius: 10px; background: linear-gradient(90deg, #7e7b76, #e4e0d9 31%, #8a8781 54%, #d8d4cc 73%, #696762); box-shadow: 0 0 18px rgba(0,0,0,.4); pointer-events: none; }
.douyin-ring { position: absolute; left: 50%; z-index: 31; width: 48px; height: 15px; transform: translateX(-50%); border: 4px solid #b9b6b0; border-left-color: #686661; border-right-color: #e5e2dc; border-radius: 50%; box-shadow: 0 3px 4px rgba(0,0,0,.42); pointer-events: none; }
.douyin-ring:nth-child(1) { top: 12%; }
.douyin-ring:nth-child(2) { top: 27%; }
.douyin-ring:nth-child(3) { top: 43%; }
.douyin-ring:nth-child(4) { top: 61%; }
.douyin-ring:nth-child(5) { top: 77%; }
.douyin-ring:nth-child(6) { top: 90%; }

.douyin-drag-hint { position: absolute; left: 50%; bottom: .4vh; z-index: 8; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; color: rgba(23,22,20,.5); font: 500 9px/1 "IBM Plex Mono", monospace; }
.douyin-drag-hint span { width: 54px; height: 1px; background: currentColor; }
.douyin-dragbook-section[data-turned="true"] .douyin-drag-hint b::after { content: "向右拖动可翻回"; }
.douyin-dragbook-section:not([data-turned="true"]) .douyin-drag-hint b::after { content: "长按右页向左拖动"; }

@media (max-width: 900px) {
  .douyin-book-wrap { width: 88vw; top: 61%; }
  .douyin-dragbook-heading { width: 46vw; }
  .douyin-photo-main { left: 6%; width: 55%; }
  .douyin-photo-small, .douyin-page-index { right: 6%; width: 30%; }
}

@media (max-width: 640px) {
  .douyin-dragbook-section { min-height: 112vh; }
  .douyin-dragbook-inner { padding-top: 12vh; }
  .douyin-dragbook-heading { width: calc(100vw - 36px); }
  .douyin-dragbook-heading h2 { max-width: 320px; font-size: 34px; }
  .douyin-role-note { display: none; }
  .douyin-book-wrap { top: 62%; width: 96vw; transform: translate(-50%, -42%); }
  .douyin-book-pages { inset: 5.5% 5.5%; }
  .douyin-photo-frame { padding: 3px; }
  .douyin-photo-main { left: 6%; top: 9%; width: 56%; height: 74%; }
  .douyin-photo-small { right: 6%; top: 10%; width: 29%; height: 25%; }
  .douyin-page-index { right: 6%; width: 29%; bottom: 10%; }
  .douyin-page-index span { display: none; }
  .douyin-book-spine { width: 12px; }
  .douyin-ring { width: 34px; height: 11px; border-width: 3px; }
  .douyin-drag-hint { bottom: 0; }
}