* { box-sizing: border-box; }
:root {
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #19231b;
  background: #fcfcfa;
  --header: 70px;
}
body { margin: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid #047b54; outline-offset: -2px; }
.site-header {
  height: var(--header);
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0 clamp(18px, 3vw, 46px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4e8dd;
  background: #fcfcfa;
}
.wordmark { font-size: 22px; line-height: .87; font-weight: 900; letter-spacing: -1px; text-decoration: none; }
.site-header button {
  border: 1px solid #d6dfd2;
  border-radius: 24px;
  background: transparent;
  padding: 9px 15px;
  font-size: 13px;
}
main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); height: calc(100dvh - var(--header)); }
#portfolio { overflow: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #a7bb9f transparent; min-width: 0; }
.sheet { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 1920 / var(--height); }
.layer { position: absolute; display: block; margin: 0; max-width: none; }
.layer-text { line-height: 1.23; white-space: pre-line; letter-spacing: -.02em; }
#concept .layer-text:nth-of-type(3) { font-weight: 600; }
button.layer { padding: 0; border: 0; background: transparent; }
button.layer img { display: block; width: 100%; height: 100%; }
aside {
  min-width: 0;
  container-type: inline-size;
  overflow: auto;
  overscroll-behavior: contain;
  border-left: 1px solid #c3e2f0;
  padding: clamp(14px, 2.2vh, 24px) 20px 20px;
  text-align: center;
  background: #d9f3ff;
}
.preview-heading {
  width: 100%;
  container-type: inline-size;
  margin: 0 auto 12px;
  color: #101110;
  text-align: left;
}
.preview-title {
  position: relative;
  padding: min(10px, 2.5cqw) min(10px, 2.6cqw) 0;
}
.preview-title h1 {
  margin: 0;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: min(50px, 12cqw);
  font-weight: 900;
  letter-spacing: -.083em;
  line-height: .9;
}
.preview-title h1 span { display: block; width: max-content; }
.preview-id {
  position: absolute;
  top: min(16px, 4cqw);
  right: min(10px, 2.6cqw);
  font-size: min(13px, 3.2cqw);
  font-weight: 800;
  line-height: .85;
  text-align: right;
}
.preview-labels {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: min(21px, 5cqw);
  padding: 0 min(10px, 2.6cqw) min(8px, 2cqw);
  font-size: min(14px, 3.4cqw);
  font-weight: 800;
  line-height: .95;
}
.preview-labels strong { font-size: min(25px, 6.1cqw); font-weight: 900; text-align: right; }
.preview { width: min(100%, max(50%, 310px)); margin-inline: auto; }
.tabs, .cover-controls { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tabs { width: max-content; margin: 0 auto 12px; padding: 3px; background: #c5e7f6; border-radius: 24px; gap: 2px; }
.tabs button { padding: 6px 14px; background: transparent; border: 0; border-radius: 20px; font-size: 12px; }
.tabs button[aria-pressed="true"] { background: #fff; color: #19566f; font-weight: 700; }
.phone {
  position: relative;
  width: min(calc(100% - 24px), clamp(148px, calc((100dvh - 357px) / 1.97), 300px));
  aspect-ratio: 658 / 1296;
  margin: auto;
  filter: drop-shadow(0 9px 18px #263d2326);
  isolation: isolate;
}
.phone-frame, .device-overlay { pointer-events: none; user-select: none; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone-screen { position: absolute; inset: 2.8% 7.15% 2.9% 8.05%; background: white; overflow: hidden; border-radius: 13% / 6%; text-align: left; }
#covers-panel, #details-panel { position: absolute; inset: 0; }
.product-screen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.product-screen-top { height: 74.96%; }
#details-panel:not([hidden]) { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.detail-header { display: block; width: 100%; height: auto; }
#covers-panel .cover-window { position: absolute; inset: 6.294% 0 auto; height: 46.14%; }
.detail-scroll { overflow: hidden auto; overscroll-behavior-y: contain; scrollbar-width: none; touch-action: pan-y; }
.detail-art { position: relative; aspect-ratio: 539.785 / 6008.041; }
.detail-art img { width: 100%; height: 100%; display: block; }
.detail-art .detail-photo { position: absolute; border-radius: 5% / 3.8%; object-fit: cover; }
.cover-track { display: flex; width: 100%; height: 100%; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cover-track img { width: 100%; height: 100%; flex: 0 0 100%; min-width: 0; object-fit: cover; scroll-snap-align: start; display: block; }
.cover-icons { position: absolute; inset: 0; pointer-events: none; }
.cover-icons img { position: absolute; display: block; height: auto; }
.cover-track, .detail-scroll { cursor: grab; user-select: none; }
.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cover-controls { margin-top: 13px; font-size: 12px; }
.cover-controls[hidden] { display: none; }
.cover-controls button { border: 1px solid #d5dfd0; border-radius: 50%; background: #fff; height: 29px; width: 29px; font-size: 20px; line-height: 1; padding: 0 0 2px; }
.cover-controls button:disabled { opacity: .38; cursor: default; }
#position { min-width: 46px; font-variant-numeric: tabular-nums; }
.focus main { grid-template-columns: minmax(0, 1fr); }
.focus aside { display: none; }
.focus .sheet { max-width: 1560px; margin: auto; }
@media (max-width: 720px) {
  :root { --header: 54px; }
  .wordmark { font-size: 18px; }
  main { display: flex; flex-direction: column; height: auto; }
  #portfolio { max-height: 68dvh; }
  aside { border: 0; border-top: 1px solid #c3e2f0; }
  .phone { width: min(245px, calc(100% - 40px)); }
  .focus #portfolio { max-height: calc(100dvh - var(--header)); }
}