:root {
  --ink: #342921;
  --muted: #88796d;
  --line: #e9dfd4;
  --paper: #f5f0e9;
  --cream: #fffdfa;
  --clay: #bf6d48;
  --clay-dark: #97462e;
  --pink: #e9b6ab;
  --sage: #98a184;
  --sun: #efb651;
  --serif: "Noto Serif SC", Georgia, serif;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: var(--sans);
  background: var(--paper);
  background-image: radial-gradient(rgba(114, 88, 64, .07) .65px, transparent .8px);
  background-size: 7px 7px;
}
button { font: inherit; cursor: pointer; }
.page-shell { width: min(1440px, 100%); margin: 0 auto; padding: 0 52px 56px; overflow: hidden; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(75, 54, 38, .13); }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand > span:last-child { display: grid; gap: 1px; line-height: 1; }
.brand strong { font: 700 19px var(--serif); letter-spacing: .08em; }
.brand em { font: 500 8px var(--mono); letter-spacing: .17em; color: var(--muted); font-style: normal; }
.brand-mark { width: 36px; height: 36px; display: inline-flex; justify-content: center; align-items: flex-end; gap: 2px; transform: rotate(-7deg); }
.brand-mark i { display:block; width: 7px; background: var(--clay); border-radius: 9px 9px 3px 3px; }
.brand-mark i:nth-child(1) { height: 16px; }.brand-mark i:nth-child(2) { height: 26px; background: #9ca28b; }.brand-mark i:nth-child(3) { height: 20px; background: var(--sun); }
.topbar-actions { display:flex; align-items:center; gap: 22px; }.studio-status { color: #697257; font-size: 12px; font-weight: 700; }.studio-status b { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background:#8da26d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(141,162,109,.12); }.avatar { width: 38px; height: 38px; border: 0; border-radius: 50%; color:#fffaf3; font-weight:700; background:#3b322b; }

.intro { min-height: 242px; padding: 54px 3.2% 40px; display:flex; align-items:center; justify-content:space-between; gap:32px; }.eyebrow { margin:0 0 11px; color:var(--clay-dark); font: 500 10px var(--mono); letter-spacing:.16em; }.eyebrow span { display:inline-block; width:28px; height:1px; background: currentColor; margin:0 0 3px 8px; }.intro h1 { margin: 0; font: 700 clamp(31px, 3.3vw, 48px)/1.27 var(--serif); letter-spacing: -.06em; }.intro-copy { margin: 15px 0 0; color:var(--muted); font-size:13px; font-weight:600; line-height:1.75; }
.arrival-card { width: 320px; flex:0 0 auto; padding: 17px 17px 17px 15px; display:flex; gap:12px; align-items:center; background: rgba(255,253,250,.8); border:1px solid #e5dad0; border-radius: 16px; box-shadow: 0 12px 32px rgba(78,54,37,.05); }.arrival-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; color:var(--clay-dark); background:#f5ddd4; border-radius:13px; font: 26px var(--serif); }.arrival-card p { margin:0 0 3px; color:var(--muted); font-size:11px; font-weight:700; }.arrival-card strong { display:block; font:700 13px var(--serif); }.arrival-card span { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.round-button { width:29px; height:29px; flex:none; margin-left:auto; border:1px solid #ddcec1; border-radius:50%; color:var(--clay-dark); background:transparent; transition:.2s ease; }.round-button:hover { color:#fff; background:var(--clay-dark); transform:translate(2px,-2px); }

.journey-panel { padding: 35px 36px 39px; background:var(--cream); border:1px solid #e8ddd2; border-radius: 28px; box-shadow: 0 18px 45px rgba(79, 58, 42, .06); }.journey-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }.journey-heading h2 { margin:0; font:700 24px var(--serif); letter-spacing:-.05em; }.progress-summary { width:260px; display:flex; align-items:center; gap:9px; color:var(--muted); font: 500 10px var(--mono); white-space:nowrap; }.progress-track { height:5px; flex:1; overflow:hidden; border-radius:8px; background:#eee5dc; }.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:var(--clay); transition:width .55s cubic-bezier(.22,.75,.25,1); }
.timeline-wrap { overflow-x:auto; margin: 31px -9px 27px; padding: 2px 9px 12px; scrollbar-width:thin; scrollbar-color:#d7c4b2 transparent; }.timeline { min-width:805px; margin:0; padding:0; display:grid; grid-template-columns:repeat(12, 1fr); list-style:none; position:relative; }.timeline::before { content:""; height:1px; position:absolute; top:14px; left:23px; right:23px; background:#e5d9ce; }.stage-item { position:relative; display:grid; justify-items:center; gap:8px; color:#b6a99d; text-align:center; }.stage-button { width:29px; height:29px; z-index:1; display:grid; place-items:center; padding:0; border:1px solid #ded1c5; border-radius:50%; color:inherit; background:var(--cream); font:500 9px var(--mono); transition:.25s ease; }.stage-item small { width:64px; color:inherit; font-size:10px; font-weight:700; line-height:1.25; }.stage-item:hover .stage-button { border-color:var(--clay); color:var(--clay-dark); transform:translateY(-2px); }.stage-item.is-done { color:#867468; }.stage-item.is-done .stage-button { color:#fff; border-color:#a68069; background:#a68069; }.stage-item.is-current { color:var(--clay-dark); }.stage-item.is-current .stage-button { width:34px; height:34px; margin-top:-2px; color:#fff; border:0; background:var(--clay); box-shadow:0 0 0 5px #f7e2db; }.stage-item.is-current small { font-weight:800; }
.detail-grid { display:grid; grid-template-columns: minmax(0, 1.02fr) minmax(350px, .98fr); min-height:365px; overflow:hidden; border:1px solid #e9ddd2; border-radius:20px; }.status-card { padding: 35px clamp(27px,4vw,58px) 31px; display:flex; flex-direction:column; background:linear-gradient(135deg,#fffdfa, #fcf8f2); }.status-topline { display:flex; align-items:center; justify-content:space-between; }.step-number { color:#a28e80; font:500 11px var(--mono); }.live-state { display:flex; align-items:center; color:#788166; font-size:11px; font-weight:800; }.live-state i { width:7px; height:7px; margin-right:6px; border-radius:50%; background:#9ba77d; box-shadow:0 0 0 4px rgba(155,167,125,.14); animation:pulse 2s infinite; }.card-kicker { min-height:15px; margin:32px 0 8px; color:var(--clay-dark); font:500 10px var(--mono); letter-spacing:.16em; }.status-card h3 { min-height:77px; margin:0; font:700 clamp(24px,2.45vw,34px)/1.38 var(--serif); letter-spacing:-.06em; }.stage-description { min-height:42px; max-width:410px; margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.8; font-weight:600; }.time-note { display:flex; align-items:center; gap:9px; margin-top:22px; }.time-orbit { width:33px; height:33px; display:grid; place-items:center; color:var(--clay-dark); border:1px solid #ead6ca; border-radius:50%; font-size:18px; }.time-note div { display:grid; gap:1px; }.time-note small { color:#a08f83; font-size:9px; font-weight:700; }.time-note strong { font:700 12px var(--serif); }.date-pill { margin-left:auto; padding:6px 9px; border-radius:20px; color:#847264; background:#f3ece4; font:500 9px var(--mono); }.action-area { margin-top:auto; padding-top:25px; }.primary-action { width:100%; min-height:48px; padding:0 17px; display:flex; align-items:center; justify-content:space-between; border:0; border-radius:11px; color:#fff; background:var(--clay-dark); box-shadow:0 9px 16px rgba(151,70,46,.17); font-size:13px; font-weight:800; transition:.25s ease; }.primary-action b { font-size:21px; font-weight:400; line-height:1; transition:transform .2s; }.primary-action:hover { background:#783522; transform:translateY(-2px); box-shadow:0 11px 19px rgba(151,70,46,.22); }.primary-action:hover b { transform:translateX(4px); }.action-area p { min-height:17px; margin:8px 2px 0; color:#a18d80; font-size:10px; font-weight:600; text-align:center; }

.scene-card { position:relative; min-height:365px; overflow:hidden; isolation:isolate; background:#e9d6c6; }.scene-caption { z-index:3; position:absolute; top:17px; right:18px; display:flex; align-items:center; gap:7px; padding:6px 9px; color:#7a5a48; border:1px solid rgba(255,255,255,.45); border-radius:30px; background:rgba(255,250,244,.5); backdrop-filter:blur(5px); font:500 9px var(--mono); }.scene-caption i { width:5px; height:5px; border-radius:50%; background:#bd6847; animation:pulse 1.8s infinite; }.scene { position:absolute; inset:0; opacity:0; transform:scale(.94); transition:opacity .48s ease, transform .55s cubic-bezier(.22,.75,.25,1); }.scene.is-active { opacity:1; transform:scale(1); }.soft-circle { position:absolute; border-radius:50%; }.circle-one { width:260px; height:260px; top:-105px; left:-73px; background:#f4e3c1; opacity:.66; }.circle-two { width:190px; height:190px; bottom:-85px; right:-49px; background:#bb7761; opacity:.28; }.scene-legend { z-index:4; position:absolute; bottom:20px; left:23px; display:grid; gap:3px; }.scene-legend span:first-child { font:700 19px var(--serif); letter-spacing:-.05em; }.scene-legend span:last-child { color:#78655a; font-size:11px; font-weight:700; }
.calendar-card { position:absolute; top:89px; left:50%; width:137px; padding:13px 11px 15px; text-align:center; background:#fffaf2; border-radius:12px 12px 25px 25px; box-shadow:0 19px 23px rgba(111,70,48,.18); transform:translateX(-50%) rotate(-4deg); animation:float 3.8s ease-in-out infinite; }.calendar-card::before { content:""; position:absolute; top:32px; left:11px; right:11px; height:1px; background:#ead6c8; }.calendar-card span,.calendar-card em { display:block; color:#a98976; font:500 9px var(--mono); font-style:normal; }.calendar-card b { display:block; margin:9px 0 6px; color:#a64d31; font:900 47px/.9 var(--serif); }.tiny-leaf { position:absolute; color:#839371; font:44px var(--serif); }.leaf-one { top:79px; left:23%; transform:rotate(26deg); }.leaf-two { right:19%; bottom:85px; font-size:55px; transform:rotate(-27deg); }
.studio-door { position:absolute; left:50%; bottom:45px; width:150px; height:212px; padding-top:80px; color:#f1e5d6; border-radius:73px 73px 0 0; background:#9d604b; box-shadow:inset 0 0 0 9px #d8b095, 0 12px 25px rgba(93,57,38,.18); text-align:center; font:500 12px/1.5 var(--mono); letter-spacing:.12em; transform:translateX(-50%); }.studio-door i { position:absolute; width:8px; height:8px; right:23px; top:110px; border-radius:50%; background:#f0c267; }.door-sun { position:absolute; width:92px; height:92px; top:72px; left:50%; border-radius:50%; background:#f1bd61; transform:translateX(-50%); animation:glow 2.8s ease-in-out infinite; }.door-plant { position:absolute; bottom:43px; left:23%; color:#799070; font:70px var(--serif); transform:rotate(-12deg); }
.wheel { position:absolute; bottom:57px; left:50%; width:224px; height:53px; border-radius:50%; background:#8e5341; box-shadow:inset 0 -11px 0 #744333, 0 12px 20px rgba(97,54,39,.19); transform:translateX(-50%); }.wheel i { position:absolute; width:154px; height:27px; top:9px; left:35px; border-radius:50%; background:#d9b29b; box-shadow:inset 0 7px 0 #b48069; animation:spin 4s linear infinite; }.clay-vessel { position:absolute; bottom:95px; left:50%; width:83px; height:132px; border-radius:30% 30% 39% 39% / 14% 14% 42% 42%; background:#c87857; box-shadow:inset 14px 0 rgba(255,226,201,.28), inset -9px 0 rgba(101,47,33,.14); transform:translateX(-50%); animation:shape 3.2s ease-in-out infinite; }.clay-vessel::before { content:""; position:absolute; top:-11px; left:19px; width:44px; height:22px; border:8px solid #c87857; border-radius:50%; background:#895543; box-shadow:inset 0 5px 0 #604031; }.clay-vessel i { position:absolute; left:16px; right:17px; top:50%; height:2px; background:rgba(105,53,38,.23); border-radius:10px; }.hand { position:absolute; bottom:145px; width:100px; height:36px; border-radius:50px; background:#e5af8f; }.hand-left { left:15%; transform:rotate(18deg); }.hand-right { right:15%; transform:rotate(-18deg); }.clay-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:#bc6b4b; }.dot-one { top:101px; left:29%; animation:fall 2.4s linear infinite; }.dot-two { top:144px; right:24%; animation:fall 2.8s .8s linear infinite; }
.sun { position:absolute; top:65px; right:26%; width:57px; height:57px; border-radius:50%; background:#edbb57; box-shadow:0 0 0 12px rgba(239,182,81,.12); animation:glow 3s ease-in-out infinite; }.sun i,.sun::before,.sun::after { content:""; position:absolute; background:#e9af42; border-radius:8px; }.sun i { width:3px; height:16px; top:-24px; left:27px; }.sun::before { width:16px; height:3px; left:-24px; top:27px; }.sun::after { width:12px; height:3px; right:-20px; top:7px; transform:rotate(45deg); }.dry-vessel { position:absolute; bottom:55px; left:50%; width:107px; height:150px; border:7px solid #b66b4e; border-top:0; border-radius:27% 27% 43% 43% / 11% 11% 30% 30%; background:rgba(247,211,182,.35); box-shadow:inset 16px 0 rgba(255,244,222,.48); transform:translateX(-50%); }.dry-vessel::before { content:""; position:absolute; top:-10px; left:20px; width:54px; height:18px; border:6px solid #b66b4e; border-radius:50%; background:#d9a78b; }.air-line { position:absolute; color:#a1b08e; font:36px var(--serif); animation:drift 3s ease-in-out infinite; }.air-one { left:20%; top:115px; }.air-two { right:21%; top:149px; animation-delay:.7s; }.air-three { left:33%; top:66px; font-size:25px; animation-delay:1.4s; }
.temperature { position:absolute; top:71px; left:50%; z-index:2; color:#f8c46c; font:500 26px var(--mono); text-shadow:0 3px 8px rgba(67,23,14,.33); transform:translateX(-50%); }.temperature span { font-size:11px; }.kiln { position:absolute; bottom:36px; left:50%; width:230px; height:216px; border-radius:116px 116px 21px 21px; background:#a54f34; box-shadow:inset 17px 0 rgba(242,173,118,.28), inset -14px 0 rgba(90,38,28,.2), 0 15px 24px rgba(80,42,31,.2); transform:translateX(-50%); }.kiln::before { content:""; position:absolute; top:29px; left:27px; right:27px; height:1px; background:rgba(86,36,27,.25); }.kiln > i { position:absolute; left:50%; bottom:-12px; width:266px; height:24px; border-radius:50%; background:#80412f; transform:translateX(-50%); }.kiln-door { position:absolute; left:37px; top:55px; width:156px; height:135px; overflow:hidden; border:9px solid #7a3427; border-radius:84px 84px 8px 8px; background:#512821; box-shadow:inset 0 0 24px #ea6330; }.kiln-pot { position:absolute; z-index:2; bottom:15px; left:50%; width:45px; height:62px; border-radius:35% 35% 45% 45%; background:#f2a253; box-shadow:inset 7px 0 #ffd37d; transform:translateX(-50%); }.kiln-pot::before { content:""; position:absolute; top:-7px; left:10px; width:25px; height:12px; border:4px solid #f2a253; border-radius:50%; background:#6e2d24; }.fire { position:absolute; bottom:-13px; width:44px; height:96px; border-radius:60% 40% 50% 50%; background:#f05a2a; filter:blur(.2px); transform:rotate(16deg); transform-origin:bottom; animation:flame 1.25s ease-in-out infinite alternate; }.fire::after { content:""; position:absolute; bottom:0; left:11px; width:20px; height:54px; border-radius:60% 40% 50% 50%; background:#ffd264; }.fire-a { left:3px; }.fire-b { left:50px; height:82px; animation-delay:.3s; }.fire-c { right:5px; height:87px; animation-delay:.5s; }.heat-wave { position:absolute; color:#dd8a5d; font:40px var(--serif); animation:drift 1.8s ease-in-out infinite; }.heat-one { left:21%; top:89px; }.heat-two { right:20%; top:120px; animation-delay:.7s; }
.glaze-vessel { position:absolute; bottom:48px; left:50%; width:122px; height:162px; border:7px solid #946a61; border-top:0; border-radius:27% 27% 43% 43% / 11% 11% 30% 30%; background:linear-gradient(130deg,#698e8a 0 50%, #f3ded0 50%); box-shadow:inset 14px 0 rgba(255,255,255,.2); transform:translateX(-50%); }.glaze-vessel::before { content:""; position:absolute; top:-10px; left:25px; width:61px; height:18px; border:6px solid #946a61; border-radius:50%; background:#63908c; }.glaze-vessel i { position:absolute; left:0; top:52%; width:100%; height:7px; background:#4c7473; border-radius:0 0 30px 30px; }.brush { position:absolute; top:78px; right:18%; width:15px; height:130px; border-radius:10px; background:#a26543; transform:rotate(34deg); transform-origin:bottom; animation:brush 2.4s ease-in-out infinite; }.brush i { position:absolute; bottom:-17px; left:-8px; width:31px; height:35px; border-radius:60% 30% 60% 30%; background:#648d8c; }.glaze-drop { position:absolute; width:10px; height:15px; border-radius:70% 30% 70% 30%; background:#6d9896; animation:drop 2.4s linear infinite; }.drop-one { top:112px; left:36%; }.drop-two { top:81px; left:40%; animation-delay:.8s; }.drop-three { top:135px; left:31%; animation-delay:1.6s; }
.finished-vessel { position:absolute; z-index:2; bottom:60px; left:50%; width:145px; height:163px; border-radius:29% 29% 42% 42% / 11% 11% 35% 35%; background:linear-gradient(110deg,#5c898a,#8fb7ae 50%,#4f7578); box-shadow:inset 18px 3px rgba(255,255,255,.23), inset -15px -7px rgba(25,77,79,.24), 0 17px 20px rgba(74,63,51,.18); transform:translateX(-50%); animation:float 3.8s ease-in-out infinite; }.finished-vessel::before { content:""; position:absolute; top:-10px; left:32px; width:82px; height:23px; border:8px solid #528083; border-radius:50%; background:#315e64; box-shadow:inset 0 4px 0 rgba(255,255,255,.1); }.finished-vessel i { position:absolute; width:21px; height:58px; right:-25px; top:43px; border:7px solid #568084; border-left:0; border-radius:0 29px 29px 0; }.shadow-disc { position:absolute; bottom:48px; left:50%; width:188px; height:23px; border-radius:50%; background:rgba(97,70,51,.16); filter:blur(4px); transform:translateX(-50%); }.spark { position:absolute; z-index:3; color:#fff4bf; text-shadow:0 1px 5px rgba(93,66,35,.2); animation:twinkle 1.8s ease-in-out infinite; }.spark-one { top:91px; left:26%; }.spark-two { top:141px; right:23%; animation-delay:.6s; }.spark-three { top:72px; right:33%; font-size:11px; animation-delay:1.2s; }

.comfort-zone { display:grid; grid-template-columns: .8fr 1.45fr auto; gap:35px; align-items:center; padding: 47px 3.2% 18px; }.comfort-title h2 { margin:0; font:700 24px/1.46 var(--serif); letter-spacing:-.05em; }.comfort-list { display:grid; gap:10px; }.comfort-list article { display:flex; align-items:center; gap:12px; }.comfort-icon { display:grid; place-items:center; width:30px; height:30px; color:var(--clay-dark); border-radius:9px; background:#eee0d5; font-size:15px; }.comfort-list strong { font-size:11px; }.comfort-list p { margin:2px 0 0; color:var(--muted); font-size:10px; font-weight:600; line-height:1.45; }.help-link { align-self:end; padding:0; color:var(--clay-dark); border:0; border-bottom:1px solid #bb8b74; background:transparent; font-size:11px; font-weight:800; white-space:nowrap; }.help-link span { margin-left:5px; font-size:16px; }
.toast { position:fixed; z-index:10; bottom:28px; left:50%; display:flex; align-items:center; gap:9px; min-width:240px; padding:12px 16px; color:#fff; border-radius:12px; background:#3c322b; box-shadow:0 14px 28px rgba(45,31,21,.22); opacity:0; pointer-events:none; transform:translate(-50%, 22px); transition:.35s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }.toast span { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#48613f; background:#dce7c7; font-size:11px; font-weight:900; }.toast p { margin:0; font-size:12px; font-weight:700; }
.booking-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:22px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }.booking-modal.is-open { opacity:1; visibility:visible; }.booking-backdrop { position:absolute; inset:0; background:rgba(47,35,26,.52); backdrop-filter:blur(5px); }.booking-dialog { position:relative; width:min(780px, 100%); overflow:hidden; border:1px solid rgba(255,255,255,.65); border-radius:23px; background:#fffaf4; box-shadow:0 25px 70px rgba(31,19,12,.28); transform:translateY(16px) scale(.98); transition:transform .3s cubic-bezier(.22,.75,.25,1); }.booking-modal.is-open .booking-dialog { transform:translateY(0) scale(1); }.close-booking { position:absolute; top:17px; right:18px; display:grid; place-items:center; width:31px; height:31px; border:1px solid #e5d8cb; border-radius:50%; color:#816b5c; background:#fffaf5; font-size:22px; line-height:1; transition:.2s ease; }.close-booking:hover { color:#fff; border-color:var(--clay-dark); background:var(--clay-dark); }.booking-intro { padding:31px 42px 22px; border-bottom:1px solid #eadfd4; background:linear-gradient(104deg,#fffaf3,#f3dfcf); }.booking-intro h2 { margin:0; font:700 27px var(--serif); letter-spacing:-.06em; }.booking-intro > p:last-child { margin:8px 0 0; color:var(--muted); font-size:11px; font-weight:700; }.booking-content { display:grid; grid-template-columns:1.14fr .86fr; }.calendar-pane { padding:25px 32px 29px; }.calendar-topline { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; }.calendar-topline strong { font:700 14px var(--serif); }.calendar-topline span { color:#a18e7e; font-size:10px; font-weight:700; }.weekday-row,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; text-align:center; }.weekday-row { margin-bottom:4px; color:#ad9b8d; font-size:9px; font-weight:800; }.calendar-grid > span { display:grid; place-items:center; min-height:36px; color:#c8b9ad; font-size:11px; font-weight:700; }.calendar-grid .outside-day,.calendar-grid .muted-day { opacity:.36; }.date-option { min-height:45px; display:grid; place-items:center; gap:1px; padding:3px 0; border:1px solid #e1d4c7; border-radius:9px; color:#6a4e3d; background:#fffdfa; transition:.2s ease; }.date-option span { font:700 13px var(--serif); }.date-option em { color:#9b8170; font-size:7px; font-style:normal; font-weight:800; }.date-option:hover,.date-option.is-selected { color:#fff; border-color:var(--clay-dark); background:var(--clay-dark); box-shadow:0 6px 11px rgba(151,70,46,.2); transform:translateY(-2px); }.date-option.is-selected em { color:#f4c8b6; }.time-pane { padding:27px 27px 22px; border-left:1px solid #eadfd4; background:#f6eee5; }.slot-label { margin:0 0 14px; color:#7c6454; font-size:10px; font-weight:800; }.slot-label span { display:block; margin-top:3px; color:var(--clay-dark); font:500 9px var(--mono); }.time-options { display:grid; gap:8px; }.time-option { display:flex; align-items:center; gap:10px; padding:10px 11px; border:1px solid #e2d3c6; border-radius:9px; color:#6d5546; background:#fffaf4; text-align:left; transition:.2s ease; }.time-option b { width:41px; color:#a05035; font:500 11px var(--mono); }.time-option span { font-size:10px; font-weight:800; }.time-option:hover,.time-option.is-selected { border-color:#a95c41; background:#f3d8cb; transform:translateX(3px); }.time-option.is-selected b { color:#803923; }.booking-note { display:flex; gap:7px; margin-top:16px; padding:10px; border-radius:8px; color:#856f60; background:#eee2d5; }.booking-note span { color:#aa563a; font:17px var(--serif); }.booking-note p { margin:0; font-size:9px; font-weight:700; line-height:1.55; }.booking-footer { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 28px 13px 35px; border-top:1px solid #eadfd4; background:#fffdf9; }.booking-footer p { margin:0; color:#957f70; font-size:10px; font-weight:700; }.confirm-booking { display:flex; align-items:center; gap:17px; flex:none; padding:11px 15px; border:0; border-radius:9px; color:#fff; background:var(--clay-dark); box-shadow:0 7px 13px rgba(151,70,46,.17); font-size:11px; font-weight:800; transition:.2s ease; }.confirm-booking span { font-size:17px; font-weight:400; }.confirm-booking:disabled { cursor:not-allowed; color:#aa998c; background:#e8ddd2; box-shadow:none; }.confirm-booking:not(:disabled):hover { background:#783522; transform:translateY(-2px); }
.process-modal { position:fixed; z-index:22; inset:0; display:grid; place-items:center; padding:22px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }.process-modal.is-open { opacity:1; visibility:visible; }.process-backdrop { position:absolute; inset:0; background:rgba(47,35,26,.54); backdrop-filter:blur(6px); }.process-dialog { position:relative; width:min(600px,100%); max-height:calc(100vh - 44px); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.68); border-radius:22px; background:#fffaf4; box-shadow:0 25px 70px rgba(31,19,12,.3); transform:translateY(16px) scale(.98); transition:transform .3s cubic-bezier(.22,.75,.25,1); }.process-modal.is-open .process-dialog { transform:translateY(0) scale(1); }.process-header { position:relative; flex:none; padding:27px 66px 20px 31px; border-bottom:1px solid #eadfd4; background:linear-gradient(105deg,#fffaf4,#efe0d1); }.process-header h2 { margin:0; font:700 24px var(--serif); letter-spacing:-.06em; }.process-header .eyebrow { margin-bottom:7px; }.process-code { display:inline-block; margin-top:9px; padding:4px 7px; border-radius:4px; color:#987766; background:rgba(255,255,255,.54); font:500 8px var(--mono); letter-spacing:.08em; }.process-content { overflow:auto; padding:22px 31px; }.process-footer { flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 26px 13px 31px; border-top:1px solid #eadfd4; background:#fffdf9; }.process-footer p { max-width:250px; margin:0; color:#967f70; font-size:9px; font-weight:700; line-height:1.45; }.mock-label { margin:0 0 9px; color:#9c7d6b; font:500 9px var(--mono); letter-spacing:.11em; }.mock-card { padding:14px; border:1px solid #e6d9cd; border-radius:12px; background:#fffdf9; }.mock-list { margin:0; padding:0; list-style:none; }.mock-list li { display:flex; justify-content:space-between; gap:15px; padding:8px 0; border-bottom:1px dashed #eaded4; color:#937f70; font-size:10px; font-weight:700; }.mock-list li:last-child { border-bottom:0; }.mock-list strong { color:#4b3930; font-size:11px; text-align:right; }.mock-notice { display:flex; gap:10px; margin-top:12px; padding:11px; border-radius:10px; color:#786353; background:#f1e6da; }.mock-notice span { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:8px; color:#fff; background:#b76648; font-size:12px; }.mock-notice p { margin:0; font-size:10px; font-weight:700; line-height:1.55; }.qr-panel { display:grid; grid-template-columns:105px 1fr; gap:17px; align-items:center; }.fake-qr { display:grid; grid-template-columns:repeat(5,1fr); aspect-ratio:1; gap:3px; padding:8px; background:#fff; border:6px solid #342921; }.fake-qr i { background:#342921; }.fake-qr i:nth-child(3n),.fake-qr i:nth-child(5n + 2),.fake-qr i:nth-child(7n + 1) { background:transparent; }.mock-field { display:grid; gap:7px; }.mock-field span { color:#8e7869; font-size:10px; font-weight:800; }.mock-field input { width:100%; padding:10px 11px; outline:0; border:1px solid #ded0c4; border-radius:8px; color:#49382f; background:#fffdf9; font-size:12px; font-weight:700; }.mock-field input:focus { border-color:#ad6043; box-shadow:0 0 0 3px #f3ded4; }.progress-log { display:grid; gap:10px; }.progress-row { display:grid; grid-template-columns:42px 1fr 35px; gap:10px; align-items:center; color:#927c6d; font:500 9px var(--mono); }.progress-row i { height:6px; overflow:hidden; border-radius:8px; background:#eee2d8; }.progress-row i b { display:block; height:100%; border-radius:inherit; background:#b66b4e; }.progress-row strong { color:#6f594a; font-size:9px; text-align:right; }.mock-kiln { position:relative; min-height:126px; display:grid; place-items:center; overflow:hidden; border-radius:12px; color:#ffeac0; background:radial-gradient(circle at 50% 84%,#f7883c 0 13%,#742f25 14% 31%,#412621 58%); }.mock-kiln::before { content:""; position:absolute; width:160px; height:160px; bottom:-82px; border:11px solid #b35739; border-radius:50%; box-shadow:inset 0 0 0 8px #703126; }.mock-kiln strong { z-index:1; font:500 31px var(--mono); text-shadow:0 2px 8px #421c18; }.mock-kiln span { z-index:1; margin-top:-62px; font-size:10px; font-weight:800; }.swatch-options,.pickup-options { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.swatch-option,.pickup-option { min-height:77px; padding:9px; border:1px solid #e1d3c6; border-radius:10px; color:#705a4c; background:#fffdf9; text-align:left; transition:.2s ease; }.swatch-option i { display:block; width:25px; height:25px; margin-bottom:7px; border-radius:50% 46% 54% 50%; }.swatch-option b,.pickup-option b { display:block; font-size:10px; }.swatch-option span,.pickup-option span { display:block; margin-top:2px; color:#9a8476; font-size:8px; font-weight:700; }.swatch-option:hover,.swatch-option.is-selected,.pickup-option:hover,.pickup-option.is-selected { border-color:#a7583d; box-shadow:0 5px 10px rgba(147,70,45,.12); transform:translateY(-2px); }.mock-temperature { display:grid; grid-template-columns:repeat(6,1fr); align-items:end; height:112px; gap:8px; padding:15px 14px 13px; border-radius:12px; background:linear-gradient(180deg,#f4e1d0,#eed0bc); }.mock-temperature i { position:relative; display:block; border-radius:6px 6px 1px 1px; background:linear-gradient(#b54f33,#e99a4e); }.mock-temperature i::after { content:attr(data-temp); position:absolute; top:-16px; left:50%; color:#8b503d; font:500 8px var(--mono); transform:translateX(-50%); }.quality-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.quality-grid div { padding:12px 8px; border-radius:9px; background:#f3e9df; text-align:center; }.quality-grid strong { display:block; color:#5d493d; font:700 13px var(--serif); }.quality-grid span { display:block; margin-top:3px; color:#977f70; font-size:8px; font-weight:800; }.share-preview { padding:17px; border-radius:12px; color:#fdf3e7; background:linear-gradient(135deg,#547b7e,#8eb0a8); }.share-preview p { margin:0; color:#e2f1e9; font:500 9px var(--mono); letter-spacing:.12em; }.share-preview strong { display:block; margin-top:13px; font:700 23px var(--serif); }.share-preview span { display:block; margin-top:5px; font-size:10px; font-weight:700; }.minor-action { margin-top:10px; padding:0; border:0; color:#a24f34; background:transparent; font-size:10px; font-weight:800; }.minor-action:hover { text-decoration:underline; }
@keyframes pulse { 50% { opacity:.45; transform:scale(.78); } } @keyframes float { 50% { transform:translateX(-50%) translateY(-8px) rotate(-2deg); } } @keyframes glow { 50% { box-shadow:0 0 0 19px rgba(239,182,81,.06); transform:scale(1.06); } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes shape { 50% { border-radius:24% 24% 43% 43% / 12% 12% 42% 42%; transform:translateX(-50%) scaleX(.92); } } @keyframes fall { 0% { transform:translate(0,-5px); opacity:0; } 25% { opacity:1; } 100% { transform:translate(8px,65px); opacity:0; } } @keyframes drift { 50% { transform:translateY(-11px) translateX(5px); opacity:.42; } } @keyframes flame { to { transform:rotate(-10deg) scaleY(.78); } } @keyframes brush { 50% { transform:rotate(21deg) translateY(7px); } } @keyframes drop { 0% { transform:translateY(-12px); opacity:0; } 20% { opacity:1; } 78% { opacity:1; } 100% { transform:translateY(64px); opacity:0; } } @keyframes twinkle { 50% { opacity:.25; transform:scale(.72) rotate(25deg); } }
@media (max-width: 900px) { .page-shell { padding:0 24px 44px; }.intro { padding-left:0; padding-right:0; }.comfort-zone { grid-template-columns:1fr; gap:24px; }.help-link { justify-self:start; }.comfort-list { grid-template-columns:repeat(3,1fr); }.comfort-list article { align-items:flex-start; }.arrival-card { width:300px; }.detail-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 680px) { .page-shell { padding:0 15px 35px; }.topbar { height:72px; }.studio-status { display:none; }.intro { min-height:auto; padding:40px 8px 31px; display:grid; }.intro h1 { font-size:35px; }.arrival-card { width:100%; }.journey-panel { padding:27px 16px 23px; border-radius:21px; }.journey-heading { display:grid; align-items:start; }.progress-summary { width:100%; }.timeline-wrap { margin-top:24px; margin-bottom:21px; }.detail-grid { display:flex; flex-direction:column; }.status-card { min-height:380px; padding:27px 24px 26px; }.scene-card { min-height:320px; }.status-card h3 { min-height:auto; }.stage-description { min-height:44px; }.comfort-zone { padding:37px 8px 8px; }.comfort-list { grid-template-columns:1fr; gap:16px; }.comfort-list article { align-items:center; }.comfort-list p { font-size:11px; }.scene-legend { bottom:18px; }.scene-legend span:first-child { font-size:17px; } }
@media (max-width: 610px) { .booking-modal { padding:11px; align-items:end; }.booking-dialog { max-height:calc(100vh - 22px); overflow-y:auto; border-radius:19px; }.booking-intro { padding:27px 24px 19px; }.booking-intro h2 { font-size:23px; }.booking-content { grid-template-columns:1fr; }.calendar-pane { padding:21px 21px 24px; }.time-pane { padding:20px 21px; border-top:1px solid #eadfd4; border-left:0; }.time-options { grid-template-columns:repeat(3,1fr); gap:6px; }.time-option { display:grid; gap:2px; justify-items:center; padding:9px 3px; text-align:center; }.time-option b { width:auto; }.time-option span { font-size:8px; }.booking-footer { padding:12px 20px; }.booking-footer p { max-width:135px; font-size:9px; }.confirm-booking { gap:8px; padding:11px 12px; font-size:10px; } }
@media (max-width: 520px) { .process-modal { padding:10px; align-items:end; }.process-dialog { max-height:calc(100vh - 20px); border-radius:18px; }.process-header { padding:24px 54px 17px 22px; }.process-header h2 { font-size:21px; }.process-content { padding:18px 22px; }.process-footer { padding:12px 20px; }.process-footer p { max-width:145px; font-size:8px; }.qr-panel { grid-template-columns:82px 1fr; gap:12px; }.swatch-options,.pickup-options { gap:6px; }.swatch-option,.pickup-option { min-height:71px; padding:8px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; scroll-behavior:auto !important; transition-duration:.001ms !important; } }