.trick{border:1px solid var(--line);border-radius:var(--r);background:var(--cream);padding:28px;margin:0 0 20px}
.trick:last-child{margin-bottom:0}
.trick h3{margin-bottom:4px}
.trick .lede{margin-bottom:20px}


.tk-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.tk-label{font-size:14px;letter-spacing:.02em;color:var(--muted)}
.tk-val{font-family:var(--font-display);font-variant-numeric:lining-nums tabular-nums;font-size:20px;color:var(--ink)}


.tk-slider{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0 0 18px;cursor:pointer}
.tk-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}
.tk-slider::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
.tk-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--olive);
  border:3px solid var(--cream);margin-top:-11px;box-shadow:0 1px 3px rgba(35,37,26,.25);
  transition:transform var(--t-micro) var(--ease-hover)}
.tk-slider::-webkit-slider-thumb:active{transform:scale(1.12)}
.tk-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--olive);border:3px solid var(--cream);
  box-shadow:0 1px 3px rgba(35,37,26,.25)}
.tk-slider:focus-visible{outline:2px solid var(--olive);outline-offset:4px}


.tk-seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tk-seg button{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);
  color:var(--ink);font:inherit;font-size:14px;cursor:pointer;
  transition:background-color var(--t-micro) var(--ease-hover),border-color var(--t-micro) var(--ease-hover),color var(--t-micro) var(--ease-hover)}
.tk-seg button[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--white)}
.tk-seg button:focus-visible{outline:2px solid var(--olive);outline-offset:2px}


.tk-price-out{border-top:1px solid var(--line);padding-top:18px;margin-top:6px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tk-price-fig{font-family:var(--font-display);font-variant-numeric:lining-nums tabular-nums;font-size:clamp(34px,5vw,46px);color:var(--olive-d);line-height:1}
.tk-price-note{font-size:13px;color:var(--muted);margin-top:4px}
.tk-price-cta{margin-top:14px}


.tk-quiz-q{margin-bottom:22px}
.tk-quiz-q:last-of-type{margin-bottom:0}
.tk-quiz-opts{display:flex;flex-wrap:wrap;gap:8px}
.tk-quiz-opts button{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:10px;background:var(--white);
  color:var(--ink);font:inherit;font-size:15px;cursor:pointer;text-align:left;
  transition:background-color var(--t-micro) var(--ease-hover),border-color var(--t-micro) var(--ease-hover)}
.tk-quiz-opts button:hover{border-color:var(--olive-l)}
.tk-quiz-opts button[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--white)}
.tk-quiz-progress{height:2px;background:var(--line);border-radius:1px;margin-bottom:24px;overflow:hidden}
.tk-quiz-progress > span{display:block;height:100%;background:var(--gold-line);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease-io)}
.tk-quiz-result{border-top:1px solid var(--line);padding-top:20px;margin-top:4px}
.tk-quiz-result[hidden]{display:none}
.tk-quiz-result .tk-price-fig{font-size:clamp(28px,4vw,36px)}
.tk-quiz-result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}


.tk-rooms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tk-rooms button{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--white);
  color:var(--ink);font:inherit;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background-color var(--t-micro) var(--ease-hover),border-color var(--t-micro) var(--ease-hover),color var(--t-micro) var(--ease-hover)}
.tk-rooms button[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--white)}
.tk-rooms button svg{width:17px;height:17px;flex:none}
.tk-room-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tk-room-list li{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.tk-room-list .ck{flex:none;width:19px;height:19px;color:var(--olive);margin-top:1px}
.tk-room-list em{font-style:normal;color:var(--ink)}


.tk-field{margin-bottom:18px}
.tk-field label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.tk-field input[type="number"]{width:100%;max-width:160px;height:48px;border:1px solid var(--line);border-radius:10px;
  padding:0 14px;font:inherit;font-size:16px;background:var(--white);color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums}
.tk-field input[type="number"]:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.tk-time-out{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);padding-top:18px}
.tk-time-stat .tk-price-fig{font-size:clamp(30px,4.5vw,40px)}
.tk-time-stat .tk-label{display:block;margin-top:2px}


.tk-ba{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  touch-action:none;user-select:none;background:var(--sand);margin-bottom:14px}
.tk-ba-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:18px;color:var(--muted);letter-spacing:.01em;text-align:center;padding:20px}

.tk-ba-after{background:var(--sand)}

.tk-ba-before{
  background-color:#e4e2d9;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(88,92,80,.10) 0 1px, transparent 1px),
    radial-gradient(circle at 34% 68%, rgba(88,92,80,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 58% 30%, rgba(88,92,80,.09) 0 1px, transparent 1px),
    radial-gradient(circle at 76% 74%, rgba(88,92,80,.07) 0 1px, transparent 1px),
    radial-gradient(circle at 88% 18%, rgba(88,92,80,.09) 0 1px, transparent 1px),
    radial-gradient(circle at 22% 88%, rgba(88,92,80,.07) 0 1px, transparent 1px),
    radial-gradient(circle at 46% 12%, rgba(88,92,80,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 66% 54%, rgba(88,92,80,.1) 0 1px, transparent 1px);
  background-size:38px 38px;
  clip-path:inset(0 calc(100% - var(--ba,50%)) 0 0)
}
.tk-ba-before .tk-ba-icon{color:var(--muted);opacity:.75}
.tk-ba-before b{color:var(--muted)}
.tk-ba-handle{position:absolute;top:0;bottom:0;left:var(--ba,50%);width:2px;background:var(--gold);transform:translateX(-1px);pointer-events:none}
.tk-ba-grip{position:absolute;top:50%;left:var(--ba,50%);width:44px;height:44px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(35,37,26,.18);cursor:grab}
.tk-ba-grip:active{cursor:grabbing}
.tk-ba-grip svg{width:16px;height:16px;color:var(--olive)}
.tk-ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:grab;margin:0}
.tk-ba-caption{font-size:13px;color:var(--muted);text-align:center}

@media (max-width:520px){
  .trick{padding:22px 18px}
  .tk-time-out{grid-template-columns:1fr}
  .tk-price-out{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .tk-slider::-webkit-slider-thumb,.tk-seg button,.tk-quiz-opts button,.tk-rooms button{transition:none}
  .tk-quiz-progress > span{transition:none}
}


[data-trick="beforeafter"]{max-width:760px;margin-inline:auto}
.tk-ba{aspect-ratio:3/2}
.tk-ba-frame{flex-direction:column;gap:6px;font-size:15px}
.tk-ba-frame b{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:26px;color:var(--ink)}
.tk-ba-icon{width:26px;height:26px;color:var(--olive-l);margin-bottom:2px}

.tk-ba-before{align-items:flex-start;text-align:left;padding-left:64px}
.tk-ba-after{align-items:flex-end;text-align:right;padding-right:64px}
.tk-ba-before > *{opacity:var(--ba-label-before,1);transition:opacity var(--t-micro) var(--ease-hover)}
.tk-ba-after > *{opacity:var(--ba-label-after,1);transition:opacity var(--t-micro) var(--ease-hover)}

@media(max-width:500px){.tk-ba-frame{font-size:12px}.tk-ba-frame b{font-size:18px;line-height:1.15}.tk-ba-before{padding-left:14px}.tk-ba-after{padding-right:14px}.tk-ba-icon{width:22px;height:22px}
  .tk-ba-frame > :not(svg){max-width:calc(50% - 40px)}.tk-ba-frame > svg{flex:none}}
@media (prefers-reduced-motion:reduce){.tk-ba-before > *,.tk-ba-after > *{transition:none}}


.tk-ba-gallery{position:relative;outline:none}
.tk-ba-gallery:focus-visible .tk-ba{outline:2px solid var(--olive);outline-offset:3px}
.tk-ba-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--olive-d);cursor:pointer;box-shadow:0 2px 8px rgba(35,37,26,.16);z-index:3;
  transition:background-color var(--t-micro) var(--ease-hover),transform var(--t-micro) var(--ease-hover)}
.tk-ba-arrow:hover{background:var(--sand)}
.tk-ba-arrow:active{transform:translateY(-50%) scale(.94)}
.tk-ba-arrow:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.tk-ba-arrow svg{width:20px;height:20px}
.tk-ba-prev{left:10px}
.tk-ba-next{right:10px}

.tk-ba-nav-row{display:none}
.tk-ba-arrow-flat{position:static;transform:none;box-shadow:none}
.tk-ba-arrow-flat:active{transform:scale(.94)}
.tk-ba-below{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.tk-ba-tabs{display:flex;flex-wrap:wrap;gap:8px}
.tk-ba-tabs button{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);
  color:var(--ink);font:inherit;font-size:13px;cursor:pointer;flex:none;
  transition:background-color var(--t-micro) var(--ease-hover),border-color var(--t-micro) var(--ease-hover),color var(--t-micro) var(--ease-hover)}
.tk-ba-tabs button[aria-selected="true"]{background:var(--olive);border-color:var(--olive);color:var(--white)}
.tk-ba-tabs button:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.tk-ba-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}


.tk-ba-out-l{transition:transform var(--t-micro) var(--ease-in),opacity var(--t-micro) var(--ease-in);transform:translateX(-14px);opacity:0}
.tk-ba-out-r{transition:transform var(--t-micro) var(--ease-in),opacity var(--t-micro) var(--ease-in);transform:translateX(14px);opacity:0}
.tk-ba-in-r{animation:tk-ba-in-r var(--t-minor) var(--ease-out)}
.tk-ba-in-l{animation:tk-ba-in-l var(--t-minor) var(--ease-out)}
@keyframes tk-ba-in-r{from{transform:translateX(14px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes tk-ba-in-l{from{transform:translateX(-14px);opacity:0}to{transform:translateX(0);opacity:1}}

@media(max-width:500px){
  
  .tk-ba-prev,.tk-ba-next{display:none}
  .tk-ba-nav-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px}
  .tk-ba-below{margin-top:10px}
  .tk-ba-below .tk-ba-count{display:none}
  
  .tk-ba-tabs{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;margin:0 -4px;padding-left:4px;padding-right:4px}
  .tk-ba-tabs::-webkit-scrollbar{display:none}
  .tk-ba-tabs button{scroll-snap-align:center}
}

@media (prefers-reduced-motion:reduce){
  .tk-ba-arrow{transition:none}
  .tk-ba-tabs button{transition:none}
  .tk-ba-out-l,.tk-ba-out-r{transition:none;transform:none;opacity:1}
  .tk-ba-in-r,.tk-ba-in-l{animation:none}
}