/* TPS scroll-craft pages - generated by port/port_css.py from scrollcraft.css + site.css. Do not edit by hand: edit site.css in the localhost build and regenerate. Colours and fonts come from Elementor > Site Settings > Variables. */ /* ─── reset: the page starts from the browser's defaults, as the localhost build did. (1,0,0) - above Elementor's atomic base styles and the theme's element styles, below every design rule that follows. ─── */ #tps-sc :where(:not(svg, svg *, .leaflet-container, .leaflet-container *, #wpadminbar, #wpadminbar *, .wpforms-container, .wpforms-container *, [class*="elementor-editor"], [class*="elementor-editor"] *, [class*="elementor-element-overlay"], [class*="elementor-element-overlay"] *)) { all: revert; } #tps-sc { --d-blue: var(--blue); --d-white: var(--white); --d-paper: var(--paper-2); --d-ink: var(--ink); --d-slate: var(--ink-soft); --d-night: var(--night); --d-deep: var(--deep); --d-pale: var(--pale); --d-onblue: var(--onblue); --d-onblue2: var(--onblue2); --d-rule-p: var(--line); --d-rule-b: var(--rule-blue); --d-rule-d: var(--line-dark); --d-sc-font-display: var(--font-head); --d-sc-font-text: var(--font-body); --d-thai: var(--font-thai); --d-line: var(--d-rule-p); } /* ─── engine ─── */ #tps-sc { --sc-canvas: #08090b; --sc-surface: #101217; --sc-ink: #f4f2ef; --sc-ink-soft: #9a9ba1; --sc-accent: #d8ff3e; --sc-accent-ink: #08090b; --sc-hairline: color-mix(in oklab, var(--sc-ink) 12%, transparent); --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent); --sc-font-mono: "Geist Mono", ui-monospace, monospace; --sc-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --sc-t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); --sc-t-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem); --sc-t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); --sc-t-3xl: clamp(2.8rem, 1.9rem + 4.2vw, 5rem); --sc-t-4xl: clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem); --sc-track-tight: -0.035em; --sc-track-snug: -0.02em; --sc-track-normal: -0.005em; --sc-track-wide: 0.08em; --sc-leading-none: 0.94; --sc-leading-tight: 1.06; --sc-leading-body: 1.62; --sc-measure: 62ch; --sc-1: 0.25rem; --sc-2: 0.5rem; --sc-3: 0.75rem; --sc-4: 1rem; --sc-5: 1.5rem; --sc-6: 2rem; --sc-7: 3rem; --sc-8: 4rem; --sc-9: 6rem; --sc-10: 8rem; --sc-11: 12rem; --sc-section: clamp(4.5rem, 9vw, 11rem); --sc-gutter: clamp(1.25rem, 5vw, 5.5rem); --sc-maxw: 82rem; --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px; --sc-shadow-color: 220 40% 2%; --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20); --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30); --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38), 0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30); --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent); --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --sc-d-fast: 160ms; --sc-d-base: 240ms; --sc-d-slow: 420ms; --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60; } #tps-sc *, #tps-sc *::before, #tps-sc *::after { box-sizing: border-box; } #tps-sc { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { #tps-sc { scroll-behavior: auto; } } #tps-sc body { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--d-sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); letter-spacing: var(--sc-track-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis-weight: none; overflow-x: clip; } #tps-sc img, #tps-sc video, #tps-sc canvas, #tps-sc svg { display: block; max-width: 100%; } #tps-sc button, #tps-sc :is(input,.t-input), #tps-sc :is(select,.t-select), #tps-sc :is(textarea,.t-textarea) { font: inherit; color: inherit; } #tps-sc ::selection { background: var(--sc-accent); color: var(--sc-accent-ink); } #tps-sc { caret-color: var(--sc-accent); accent-color: var(--sc-accent); } #tps-sc :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r-sm); } #tps-sc :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } @supports (scrollbar-color: auto) { #tps-sc { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; } } #tps-sc :where(:is(table,.t-table), .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; } #tps-sc .sc-display { font-family: var(--d-sc-font-display); font-weight: 500; line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); text-wrap: balance; margin: 0; } #tps-sc .sc-display--xl { font-size: var(--sc-t-4xl); } #tps-sc .sc-display--lg { font-size: var(--sc-t-3xl); } #tps-sc .sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); } #tps-sc .sc-lede { font-size: var(--sc-t-lg); line-height: 1.44; letter-spacing: var(--sc-track-snug); color: var(--sc-ink); max-width: 46ch; text-wrap: pretty; margin: 0; } #tps-sc .sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; } #tps-sc .sc-label { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); } #tps-sc .sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); } #tps-sc .sc-section { padding-block: var(--sc-section); } #tps-sc .sc-stack > * + * { margin-top: var(--sc-4); } #tps-sc .sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); } #tps-sc .sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; } #tps-sc .sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; } #tps-sc .sc-act--pinned { position: relative; } #tps-sc .sc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: var(--sc-z-stage); } #tps-sc .sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #tps-sc video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); } #tps-sc .sc-has-clip video[data-sc-scrub] { opacity: 1; } #tps-sc .sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); } #tps-sc .sc-has-clip .sc-stage__poster { opacity: 0; } #tps-sc .sc-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( var(--sc-scrim-angle, 180deg), color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 68%); } #tps-sc .sc-scrim--bottom { --sc-scrim-angle: 0deg; } #tps-sc .sc-scrim--left { --sc-scrim-angle: 90deg; } #tps-sc .sc-scrim--right { --sc-scrim-angle: 270deg; } #tps-sc .sc-scrim--lead { background: linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } #tps-sc .sc-scrim--trail { background: linear-gradient(to top left, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } #tps-sc .sc-scrim--band { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } #tps-sc .sc-scrim--vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 40%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%); } #tps-sc .sc-copy { position: absolute; z-index: var(--sc-z-copy); inset-inline: var(--sc-gutter); max-width: min(46rem, 76vw); will-change: opacity, transform; } #tps-sc .sc-copy--lead { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); } #tps-sc .sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; } #tps-sc .sc-copy--trail { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; } #tps-sc [data-sc-cue] { opacity: 0; will-change: opacity, transform; } #tps-sc .sc-ready [data-sc-cue] { transition: none; } #tps-sc .sc-split { display: inline-block; overflow: hidden; vertical-align: top; } #tps-sc .sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; } #tps-sc .sc-split__i { display: inline-block; will-change: transform, opacity; } #tps-sc .sc-is-split { opacity: 1 !important; } #tps-sc [data-sc-pan] { display: flex; will-change: transform; } #tps-sc .sc-stage.sc-stage--swipe, #tps-sc .sc-stage.sc-stage--flowed { position: relative !important; top: auto !important; height: auto !important; overflow: visible !important; overflow-x: clip !important; } #tps-sc .sc-stage.sc-stage--flowed { min-height: 100svh; } #tps-sc .sc-stage.sc-stage--swipe { display: block !important; min-height: 0 !important; padding-top: clamp(2rem, 7vw, 3.5rem); padding-bottom: clamp(1.75rem, 6vw, 3rem); } #tps-sc .sc-act--swipe [data-sc-pan] { transform: none !important; will-change: auto; display: flex !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } #tps-sc .sc-act--swipe [data-sc-pan] > * { flex-shrink: 0 !important; max-width: 84% !important; scroll-snap-align: start; } @media (hover: none) { #tps-sc .sc-act--swipe [data-sc-pan] { scrollbar-width: none; } #tps-sc .sc-act--swipe [data-sc-pan]::-webkit-scrollbar { display: none; } } #tps-sc [data-sc-reveal] { will-change: clip-path; } #tps-sc [data-sc-parallax] { will-change: transform; } #tps-sc [data-sc-in], #tps-sc [data-sc-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); } #tps-sc [data-sc-in].sc-in, #tps-sc [data-sc-stagger] > .sc-in { opacity: 1; transform: none; } #tps-sc [data-sc-tilt] { transform-style: preserve-3d; will-change: transform; } #tps-sc [data-sc-magnet] { will-change: transform; } #tps-sc [data-sc-spotlight] { isolation: isolate; } #tps-sc :where([data-sc-spotlight]) { position: relative; } #tps-sc [data-sc-spotlight]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( 28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%); opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); } #tps-sc [data-sc-spotlight]:hover::after { opacity: 1; } #tps-sc [data-sc-mode="worldflight"] { position: relative; } #tps-sc .sc-world { position: fixed; inset: 0; overflow: clip; z-index: var(--sc-z-stage); background: var(--sc-canvas); } #tps-sc .sc-world__seg { position: absolute; inset: 0; opacity: 0; will-change: opacity; } #tps-sc .sc-world__seg > :is(video, img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #tps-sc .sc-world__poster { z-index: 0; transform-origin: 50% 50%; transition: opacity 420ms var(--sc-ease-out); } #tps-sc .sc-world__seg > video { z-index: 1; } #tps-sc .sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; } #tps-sc video[data-sc-scrub].sc-has-clip { opacity: 1; } #tps-sc .sc-world__copy { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; } #tps-sc .sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; } #tps-sc [data-sc-copy] { opacity: 0; pointer-events: none; will-change: opacity, transform; } #tps-sc .sc-ready [data-sc-copy] { transition: none; } #tps-sc .sc-world__spacer { pointer-events: none; } #tps-sc [data-sc-progress] { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome); background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } #tps-sc .sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; } #tps-sc .sc-grain::before { content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml; utf8,"); } @media (prefers-reduced-motion: reduce) { #tps-sc [data-sc-in], #tps-sc [data-sc-stagger] > * { transform: none; transition-duration: 220ms; } #tps-sc [data-sc-parallax], #tps-sc [data-sc-pan], #tps-sc .sc-split__i { transform: none !important; } #tps-sc [data-sc-reveal] { clip-path: none !important; } #tps-sc [data-sc-act="pan"] .sc-stage, #tps-sc [data-sc-act="pan"] [data-sc-stage] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } #tps-sc [data-sc-pan] > * { scroll-snap-align: center; } #tps-sc [data-sc-spotlight]::after { display: none; } #tps-sc .sc-world__poster, #tps-sc [data-sc-copy] { transform: none !important; } } @media (max-width: 860px) { #tps-sc .sc-copy { inset-inline: var(--sc-gutter); max-width: none; } #tps-sc .sc-copy--trail { text-align: left; } #tps-sc .sc-stage { height: 100svh; } #tps-sc .sc-scrim--trail { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } } /* ─── design ─── */ #tps-sc { --sc-canvas: var(--d-white); --sc-surface: var(--d-paper); --sc-ink: var(--d-ink); --sc-ink-soft: var(--d-slate); --sc-accent: var(--d-blue); --sc-accent-ink: var(--d-white); --d-line: var(--d-rule-p); --rail-w: 13.5rem; --bench-h: 4.5rem; } #tps-sc { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { #tps-sc { scroll-behavior: auto; } } #tps-sc body { background: var(--d-white); color: var(--d-ink); font-family: var(--d-sc-font-text); font-weight: 400; -webkit-font-smoothing: antialiased; } #tps-sc ::selection { background: var(--d-blue); color: var(--d-white); } #tps-sc [hidden] { display: none !important; } #tps-sc .g-white { background: var(--d-white); --sc-ink: var(--d-ink); --sc-ink-soft: var(--d-slate); --d-line: var(--d-rule-p); color: var(--d-ink); } #tps-sc .g-paper { background: var(--d-paper); --sc-ink: var(--d-ink); --sc-ink-soft: var(--d-slate); --d-line: var(--d-rule-p); color: var(--d-ink); } #tps-sc .g-blue { background: var(--d-blue); --sc-ink: var(--d-white); --sc-ink-soft: var(--d-onblue); --d-line: var(--d-rule-b); color: var(--d-white); } #tps-sc .g-ink { background: var(--d-ink); --sc-ink: var(--d-white); --sc-ink-soft: #8B93A7; --d-line: var(--d-rule-d); color: var(--d-white); } #tps-sc .g-night { background: var(--d-night); --sc-ink: var(--d-white); --sc-ink-soft: #8B93A7; --d-line: var(--d-rule-d); color: var(--d-white); } #tps-sc .g-blue, #tps-sc .g-ink, #tps-sc .g-night { --sc-accent: var(--d-white); --sc-accent-ink: var(--d-blue); } #tps-sc .skip { position: fixed; left: var(--sc-4); top: var(--sc-4); z-index: 200; transform: translateY(-200%); background: var(--d-blue); color: var(--d-white); padding: .6rem 1rem; border-radius: var(--sc-r-sm); font-weight: 500; } #tps-sc .skip:focus-visible { transform: none; } #tps-sc .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #tps-sc .h-page, #tps-sc .h-sec, #tps-sc .h-obj { font-family: var(--d-sc-font-display); font-weight: 400; letter-spacing: 0; text-wrap: balance; margin: 0; } #tps-sc .h-page { font-size: clamp(2.3rem, 6.2vw, 4.6rem); line-height: 1.04; font-weight: 300; } #tps-sc .h-sec { font-size: clamp(1.7rem, 3.3vw, 2.9rem); line-height: 1.06; } #tps-sc .h-obj { font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.12; } #tps-sc .body { font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft); max-width: var(--sc-measure); text-wrap: pretty; margin: var(--sc-3) 0 0; font-weight: 400; } #tps-sc .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } #tps-sc .th { font-family: var(--d-thai); font-weight: 300; margin: var(--sc-2) 0 0; font-size: clamp(.82rem, 1.05vw, 1.02rem); line-height: 1.5; color: var(--sc-ink-soft); } #tps-sc .h-page + .th { font-size: clamp(.95rem, 1.3vw, 1.18rem); } #tps-sc .oid { display: flex; align-items: center; gap: .85rem; margin: 0 0 var(--sc-4); } #tps-sc .oid::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex: none; } #tps-sc .oid__n, #tps-sc .oid__d { font-family: var(--d-sc-font-text); font-size: var(--sc-t-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 500; } #tps-sc .oid__n { color: var(--sc-ink); } #tps-sc .oid__d { color: var(--sc-ink-soft); } #tps-sc .lab { margin: var(--sc-4) 0 0; display: grid; gap: 0; } #tps-sc .lab > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sc-3); padding: .62rem 0; border-top: 1px solid var(--d-line); align-items: baseline; } #tps-sc .lab > div:last-child { border-bottom: 1px solid var(--d-line); } #tps-sc .lab :is(dt,.t-dt) { font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; } #tps-sc .lab :is(dd,.t-dd) { margin: 0; font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink); } #tps-sc .lab :is(dd,.t-dd) span { color: var(--sc-ink-soft); } #tps-sc .lab__name { font-weight: 500; } #tps-sc .lab--tight > div { grid-template-columns: 6.6rem 1fr; padding: .44rem 0; } @media (max-width: 560px) { #tps-sc .lab > div, #tps-sc .lab--tight > div { grid-template-columns: 1fr; gap: .15rem; } } #tps-sc .idx { position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 1100; display: flex; flex-direction: column; gap: var(--sc-5); padding: var(--sc-5) var(--sc-4) calc(var(--bench-h) + var(--sc-4)); border-right: 1px solid var(--d-rule-p); background: color-mix(in oklab, var(--d-white) 90%, transparent); backdrop-filter: blur(14px); } #tps-sc .idx__mark { display: block; width: 8.6rem; } #tps-sc .idx__mark img { width: 100%; height: auto; display: block; } #tps-sc .idx__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } #tps-sc .idx__list a { display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: baseline; gap: .5rem; padding: .5rem .55rem; border-radius: var(--sc-r-sm); color: var(--d-slate); text-decoration: none; transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .idx__n { font-size: var(--sc-t-xs); color: var(--d-slate); opacity: .6; font-variant-numeric: tabular-nums; } #tps-sc .idx__l { font-family: var(--d-sc-font-display); font-size: var(--sc-t-sm); font-weight: 400; } #tps-sc .idx__c { font-size: var(--sc-t-xs); color: var(--d-slate); opacity: .8; border: 1px solid var(--d-rule-p); border-radius: var(--sc-r-pill); padding: .05rem .4rem; } @media (hover: hover) and (pointer: fine) { #tps-sc .idx__list a:hover { background: var(--d-paper); color: var(--d-ink); } } #tps-sc .idx__list a:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc .idx__list [aria-current="page"] a { color: var(--d-white); background: var(--d-blue); } #tps-sc .idx__list [aria-current="page"] .idx__n { color: var(--d-onblue); opacity: 1; } #tps-sc .idx__list [aria-current="page"] .idx__c { color: var(--d-onblue); border-color: var(--d-rule-b); } #tps-sc .idx__foot { margin: auto 0 0; font-size: var(--sc-t-xs); } #tps-sc .idx__foot a { color: var(--d-slate); text-decoration: none; } #tps-sc .idx__foot a:hover { color: var(--d-blue); } #tps-sc .bench { position: fixed; inset: auto 0 0 var(--rail-w); z-index: 1200; height: var(--bench-h); display: grid; grid-template-columns: minmax(11rem, 19rem) 1fr auto auto auto; align-items: center; gap: var(--sc-4); padding: 0 var(--sc-5); border-top: 1px solid var(--d-rule-p); background: color-mix(in oklab, var(--d-white) 94%, transparent); backdrop-filter: blur(16px); } #tps-sc .bench__brand { display: flex; align-items: center; gap: .7rem; } #tps-sc .bench__brand :is(label,.t-label) { font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--d-slate); font-weight: 500; white-space: nowrap; } #tps-sc .bench__brand :is(input,.t-input) { flex: 1; min-width: 0; background: transparent; color: var(--d-ink); border: 0; border-bottom: 1px solid var(--d-rule-p); border-radius: 0; font: 400 var(--sc-t-base)/1.2 var(--d-sc-font-display); padding: .34rem .1rem; } #tps-sc .bench__brand :is(input,.t-input)::placeholder { color: #A9AEB8; } #tps-sc .bench__brand :is(input,.t-input):focus-visible { outline: none; border-bottom-color: var(--d-blue); } #tps-sc .bench__swatch { width: 1.55rem; height: 1.55rem; flex: none; border-radius: var(--sc-r-sm); border: 1px solid var(--d-rule-p); background: var(--d-blue); cursor: pointer; transition: transform var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .bench__swatch[data-on="white"] { background: var(--d-white); } #tps-sc .bench__swatch:active { transform: scale(.94); } #tps-sc .bench__swatch:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc .bench__tray { font-size: var(--sc-t-sm); color: var(--d-slate); min-width: 0; } #tps-sc .bench__full :is(b,.t-b) { color: var(--d-ink); font-weight: 600; } #tps-sc .bench__full :is(i,.t-i) { display: inline-block; width: 1px; height: .8em; background: var(--d-rule-p); margin: 0 .7rem; } #tps-sc .bench__go, #tps-sc .lnk.lnk--go { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--d-blue); color: var(--d-white); border: 0; cursor: pointer; font: 600 .72rem/1 var(--d-sc-font-text); letter-spacing: .09em; text-transform: uppercase; padding: .78rem 1.45rem; border-radius: var(--sc-r-pill); text-decoration: none; box-shadow: 0 1px 2px rgba(19,23,34,.16); transition: filter var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .lnk.lnk--go::after, #tps-sc .bench__go::after { content: none; display: none; } #tps-sc .bench__go:hover, #tps-sc .lnk.lnk--go:hover { box-shadow: 0 3px 10px rgba(19,23,34,.22); } #tps-sc .bench__go:hover, #tps-sc .lnk.lnk--go:hover { filter: brightness(1.12); } #tps-sc .bench__go:active, #tps-sc .lnk.lnk--go:active { transform: translateY(1px); } #tps-sc .bench__go:focus-visible, #tps-sc .lnk.lnk--go:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 3px; } #tps-sc .g-blue .lnk.lnk--go, #tps-sc .g-ink .lnk.lnk--go, #tps-sc .g-night .lnk.lnk--go { background: var(--d-white); color: var(--d-blue); box-shadow: 0 1px 2px rgba(0,0,0,.2); } #tps-sc .g-blue .lnk.lnk--go:focus-visible, #tps-sc .g-ink .lnk.lnk--go:focus-visible { outline-color: var(--d-white); } #tps-sc .bench.is-bump .bench__go { animation: bump .42s var(--sc-ease-out); } @keyframes bump { 40% { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { #tps-sc .bench.is-bump .bench__go { animation: none; } } #tps-sc :not(body).page { margin-left: var(--rail-w); padding-bottom: calc(var(--bench-h) + var(--sc-5)); } #tps-sc .wrap { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin-inline: auto; } #tps-sc .act { position: relative; } #tps-sc .flowsec { padding-block: var(--sc-section); } #tps-sc .act[data-sc-act="pin"] + .flowsec, #tps-sc .act[data-sc-act="scrub"] + .flowsec { padding-top: calc(var(--sc-section) * .55); } #tps-sc .secHead { margin-bottom: var(--sc-7); } #tps-sc .secMore { margin-top: var(--sc-7); } #tps-sc .lnk { display: inline-flex; align-items: center; gap: .45rem; color: var(--sc-accent); text-decoration: none; font-weight: 500; font-size: var(--sc-t-sm); border-bottom: 1px solid color-mix(in oklab, currentColor 45%, transparent); padding-bottom: .1rem; } #tps-sc .lnk::after { content: "\2192"; transition: transform var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .lnk:hover { border-bottom-color: currentColor; } #tps-sc .lnk:hover::after { transform: translateX(3px); } #tps-sc .lnk:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } #tps-sc .roads { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; } #tps-sc .roads svg { width: 100%; height: auto; display: block; } #tps-sc .plate > .wrap, #tps-sc .plate > .foot { position: relative; z-index: 1; } #tps-sc .first { display: grid; grid-template-columns: 1.35fr .82fr; align-items: center; gap: var(--sc-7); padding: var(--sc-6) var(--sc-gutter); } #tps-sc .first__media { position: relative; } #tps-sc .first__lab { max-width: 30rem; } #tps-sc .first__act { margin-top: var(--sc-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-3); } #tps-sc .first__hint { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: 24rem; line-height: 1.5; } #tps-sc .h-obj + .lab, #tps-sc .th + .lab { margin-top: var(--sc-4); } #tps-sc .paste { position: relative; display: block; border-radius: var(--sc-r-md); overflow: hidden; } #tps-sc .paste img { width: 100%; height: auto; display: block; } #tps-sc .first__media .paste img { max-height: 62vh; object-fit: cover; } #tps-sc .art { position: absolute; left: 0; top: 0; overflow: hidden; background: var(--d-blue); font-family: var(--d-sc-font-display); display: flex; flex-direction: column; justify-content: center; padding: 0 calc(var(--fh) * .085); box-sizing: border-box; box-shadow: inset 0 calc(var(--fh) * -.5) calc(var(--fh) * .5) rgba(0,0,0,.2); } #tps-sc .art--white { background: var(--d-white); } #tps-sc .art :is(b,.t-b) { display: block; font-weight: 400; line-height: .98; color: var(--d-white); font-size: calc(var(--fh) * .28); white-space: nowrap; transform-origin: left center; } #tps-sc .art--white :is(b,.t-b) { color: var(--d-blue); } #tps-sc .art :is(i,.t-i) { display: block; font-style: normal; font-family: var(--d-sc-font-text); font-weight: 400; font-size: calc(var(--fh) * .1); color: var(--d-onblue); margin-top: calc(var(--fh) * .055); white-space: nowrap; } #tps-sc .art--white :is(i,.t-i) { color: var(--d-slate); } #tps-sc .art :is(em,.t-em) { position: absolute; right: calc(var(--fh) * .075); top: calc(var(--fh) * .075); font-style: normal; font-family: var(--d-sc-font-text); font-weight: 500; font-size: calc(var(--fh) * .07); letter-spacing: .16em; color: var(--d-onblue); } #tps-sc .art--white :is(em,.t-em) { color: var(--d-slate); } #tps-sc .hold { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 600; background: transparent; color: var(--sc-ink); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); font: 600 .72rem/1 var(--d-sc-font-text); letter-spacing: .09em; text-transform: uppercase; padding: .66rem 1.1rem; transition: border-color var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .hold__x { width: .5rem; height: .5rem; border-radius: 50%; flex: none; border: 1px solid currentColor; position: relative; opacity: .55; transition: opacity var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { #tps-sc .hold:hover { border-color: var(--sc-accent); } } #tps-sc .hold:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } #tps-sc .hold:active { transform: translateY(1px); } #tps-sc .hold[aria-pressed="true"] { background: var(--d-blue); color: var(--d-white); border-color: var(--d-blue); } #tps-sc .hold[aria-pressed="true"] .hold__x { opacity: 1; background: currentColor; } #tps-sc .hold[aria-pressed="true"] .hold__x::after { opacity: 1; } #tps-sc .g-blue .hold[aria-pressed="true"], #tps-sc .g-ink .hold[aria-pressed="true"] { background: var(--d-white); color: var(--d-blue); border-color: var(--d-white); } #tps-sc .hold--wide { padding: .8rem 1.25rem; } #tps-sc .rail { display: flex; align-items: center; gap: var(--sc-6); padding-inline: var(--sc-gutter); height: 100%; } #tps-sc .rail__lead { flex: none; width: min(34rem, 78vw); padding-right: var(--sc-5); } #tps-sc .rail__end { flex: none; width: min(26rem, 74vw); } #tps-sc .rail__end .lnk { margin-top: var(--sc-4); } #tps-sc .clu { flex: none; width: min(23rem, 74vw); } #tps-sc .clu__img { display: block; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--d-line); background: var(--d-deep); } #tps-sc .clu__img img { width: 100%; height: 13.5rem; object-fit: cover; display: block; transition: transform var(--sc-d-slow) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { #tps-sc .clu__img:hover img { transform: scale(1.03); } } #tps-sc .clu__img:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } #tps-sc .clu h3 { margin: var(--sc-4) 0 0; font-family: var(--d-sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); } #tps-sc .clu__note { margin: .4rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; } @media (prefers-reduced-motion: no-preference) { #tps-sc .rail > * { opacity: .55; transform: translateY(14px); transition: opacity .5s var(--sc-ease-out), transform .5s var(--sc-ease-out); } #tps-sc .rail > .rail__lead { opacity: 1; transform: none; } #tps-sc .rail.is-live > * { opacity: 1; transform: none; } } #tps-sc .drive { overflow: clip; } #tps-sc .drive .sc-scrim--band { background: linear-gradient(to top, rgba(19,23,34,.94) 0%, rgba(19,23,34,.88) 22%, rgba(19,23,34,.62) 42%, rgba(19,23,34,.24) 60%, transparent 76%); } #tps-sc .drive video, #tps-sc .drive .sc-stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #tps-sc .drive__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sc-7) var(--sc-gutter); max-width: 46rem; color: var(--d-white); } #tps-sc .drive__copy .h-sec { color: var(--d-white); } #tps-sc .drive__copy .body { color: #DCE3F4; } #tps-sc .drive__copy .th { color: var(--d-onblue2); } #tps-sc .drive__copy .oid__n { color: var(--d-white); } #tps-sc .drive__copy .oid__d { color: var(--d-onblue); } #tps-sc .builds { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-7); } #tps-sc .bld { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); align-items: center; } #tps-sc .bld:nth-child(even) { direction: rtl; } #tps-sc .bld:nth-child(even) > * { direction: ltr; } #tps-sc .bld :is(figure,.t-figure) { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--d-line); } #tps-sc .bld :is(figure,.t-figure) img { width: 100%; height: 100%; max-height: 22rem; object-fit: cover; display: block; } #tps-sc .bld .lab { margin-top: 0; } #tps-sc .bench-act { --wb-lit: 0; } #tps-sc .wb { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sc-6); align-items: center; padding: var(--sc-6) var(--sc-gutter); } #tps-sc .wb__stage { position: relative; border-radius: var(--sc-r-lg); overflow: hidden; min-height: min(30rem, 52vh); display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 120%, rgba(45,80,160,.4), transparent 62%), #0a0f1f; border: 1px solid var(--d-rule-d); } #tps-sc .wb__wall { position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: linear-gradient(rgba(198,210,236,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(198,210,236,.045) 1px, transparent 1px); background-size: 100% 2.4rem, 5.2rem 100%; mask-image: radial-gradient(75% 60% at 50% 45%, #000 20%, transparent 78%); } #tps-sc .wb__sign { position: relative; z-index: 1; padding: var(--sc-4) var(--sc-5); max-width: 100%; } #tps-sc .wb__word { display: block; font-family: var(--d-sc-font-display); font-weight: 500; font-size: clamp(2.2rem, 7vw, 5.6rem); line-height: 1; white-space: nowrap; transition: color .5s var(--sc-ease-out), text-shadow .5s var(--sc-ease-out); } #tps-sc .wb__glow { position: absolute; inset: 8%; z-index: -1; border-radius: 50%; opacity: calc(var(--wb-lit) * .8); background: radial-gradient(closest-side, rgba(198,210,236,.42), transparent 72%); filter: blur(26px); transition: opacity .6s var(--sc-ease-out); } #tps-sc .wb__sign[data-finish="front"] .wb__word { color: color-mix(in oklab, #FFFFFF calc(var(--wb-lit) * 100%), #2C3350); text-shadow: 0 0 calc(var(--wb-lit) * 30px) rgba(198,210,236,calc(var(--wb-lit) * .55)); } #tps-sc .wb__sign[data-finish="halo"] .wb__word { color: #0d1226; -webkit-text-stroke: 2px color-mix(in oklab, #8B93A7 calc(65% - var(--wb-lit) * 25%), transparent); text-shadow: 0 0 calc(var(--wb-lit) * 26px) rgba(198,210,236,calc(var(--wb-lit) * .95)), 0 0 calc(var(--wb-lit) * 62px) rgba(90,120,189,calc(var(--wb-lit) * .6)); } #tps-sc .wb__sign[data-finish="neon"] .wb__word { color: color-mix(in oklab, #FFFFFF calc(var(--wb-lit) * 100%), #262c46); -webkit-text-stroke: 1px color-mix(in oklab, #C6D2EC calc(var(--wb-lit) * 90%), #333a58); text-shadow: 0 0 calc(var(--wb-lit) * 8px) rgba(255,255,255,calc(var(--wb-lit) * .95)), 0 0 calc(var(--wb-lit) * 24px) rgba(198,210,236,calc(var(--wb-lit) * .9)), 0 0 calc(var(--wb-lit) * 58px) rgba(90,120,189,calc(var(--wb-lit) * .8)), 0 0 calc(var(--wb-lit) * 100px) rgba(45,80,160,calc(var(--wb-lit) * .7)); } @media (prefers-reduced-motion: no-preference) { #tps-sc .wb__sign.is-strike .wb__word { animation: strike .62s steps(1) 1; } @keyframes strike { 0%,14%{opacity:.25} 16%,22%{opacity:1} 24%,30%{opacity:.35} 32%,44%{opacity:1} 46%,52%{opacity:.55} 54%,100%{opacity:1} } } #tps-sc .wb__panel { max-width: 32rem; } #tps-sc .wb__panel .h-sec { font-size: clamp(1.5rem, 2.5vw, 2.2rem); } #tps-sc .wb__panel .lab > div { padding: .44rem 0; } #tps-sc .wb__controls { margin-top: var(--sc-4); display: grid; gap: var(--sc-3); } #tps-sc .fld { margin: 0; display: grid; gap: .45rem; } #tps-sc .fld :is(label,.t-label), #tps-sc .fld :is(legend,.t-legend) { font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; padding: 0; display: flex; gap: .6rem; align-items: baseline; } #tps-sc .fld :is(label,.t-label) :is(output,.t-output) { color: var(--sc-ink); letter-spacing: 0; } #tps-sc .fld :is(input,.t-input)[type="text"], #tps-sc .flds :is(input,.t-input), #tps-sc .flds :is(textarea,.t-textarea) { background: rgba(255,255,255,.06); color: var(--sc-ink); border: 1px solid var(--d-line); border-radius: var(--sc-r-sm); font: 400 var(--sc-t-base)/1.3 var(--d-sc-font-display); padding: .62rem .8rem; width: 100%; box-sizing: border-box; } #tps-sc .page--doc .flds :is(input,.t-input), #tps-sc .page--doc .flds :is(textarea,.t-textarea) { background: var(--d-white); font-family: var(--d-sc-font-text); } #tps-sc .fld :is(input,.t-input)[type="text"]:focus-visible, #tps-sc .flds :is(input,.t-input):focus-visible, #tps-sc .flds :is(textarea,.t-textarea):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; } #tps-sc .fld--seg { border: 0; padding: 0; margin: 0; } #tps-sc .seg { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; } #tps-sc .seg__b { flex: 1 1 auto; cursor: pointer; background: transparent; color: var(--sc-ink-soft); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); font: 600 .7rem/1 var(--d-sc-font-text); letter-spacing: .08em; text-transform: uppercase; padding: .64rem .5rem; transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .seg__b.is-on { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); } #tps-sc .seg__b:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; } #tps-sc .fld :is(input,.t-input)[type="range"] { width: 100%; accent-color: var(--sc-accent); } #tps-sc .wb__switch { margin: 0; } #tps-sc .pwr { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; background: transparent; color: var(--sc-ink); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); padding: .68rem 1.1rem; font: 600 .72rem/1 var(--d-sc-font-text); letter-spacing: .09em; text-transform: uppercase; } #tps-sc .pwr__d { width: .55rem; height: .55rem; border-radius: 50%; background: #2C3350; transition: background var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out); } #tps-sc .pwr[aria-pressed="true"] { border-color: var(--sc-accent); } #tps-sc .pwr[aria-pressed="true"] .pwr__d { background: var(--sc-accent); box-shadow: 0 0 12px 2px rgba(198,210,236,.5); } #tps-sc .pwr:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } #tps-sc .wb__spec { margin-top: var(--sc-4); } #tps-sc .wb__add { margin: var(--sc-4) 0 0; display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; } #tps-sc .wb__note { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: 18rem; line-height: 1.5; } #tps-sc .wb__col { display: grid; gap: var(--sc-4); align-content: center; min-width: 0; } #tps-sc .wb__tools { display: grid; gap: .6rem; } #tps-sc .wb__fnote.is-quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; } #tps-sc .wb__row { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .3rem .7rem; align-items: start; } #tps-sc .seg.seg--t { margin-top: 0; gap: .3rem; } #tps-sc .seg--t .seg__b { flex: 0 1 auto; padding: .48rem .64rem; } #tps-sc .wb__sign { display: flex; align-items: center; justify-content: center; } #tps-sc .wb__word[hidden], #tps-sc .wb__logo[hidden] { display: none !important; } #tps-sc .wb__logo { display: block; flex: none; width: auto; max-width: none; height: 4rem; object-fit: contain; transition: filter .5s var(--sc-ease-out); } #tps-sc .wb__sign[data-finish="front"] .wb__logo { filter: brightness(0) invert(calc(.17 + var(--wb-lit) * .83)) drop-shadow(0 0 calc(var(--wb-lit) * 14px) rgba(198,210,236,calc(var(--wb-lit) * .6))); } #tps-sc .wb__sign[data-finish="halo"] .wb__logo { filter: brightness(calc(.5 + var(--wb-lit) * .38)) drop-shadow(0 0 calc(var(--wb-lit) * 10px) rgba(198,210,236,calc(var(--wb-lit) * .95))) drop-shadow(0 0 calc(var(--wb-lit) * 34px) rgba(90,120,189,calc(var(--wb-lit) * .7))); } #tps-sc .wb__sign[data-finish="neon"] .wb__logo { filter: url(#wbNeonEdge) brightness(calc(.32 + var(--wb-lit) * .68)) drop-shadow(0 0 calc(var(--wb-lit) * 5px) rgba(255,255,255,calc(var(--wb-lit) * .9))) drop-shadow(0 0 calc(var(--wb-lit) * 20px) rgba(90,120,189,calc(var(--wb-lit) * .85))); } #tps-sc .wb__fnote { margin: .35rem 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.45; } #tps-sc .wb__fnote:empty { display: none; } #tps-sc .wb__lab { font-size: .8rem; line-height: 1.3; color: var(--sc-ink-soft); font-weight: 500; padding-top: .55rem; } #tps-sc .wb__lrow { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; } #tps-sc .wb__lrow .seg { margin-top: 0; } #tps-sc .wb__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); } #tps-sc .wb__up { display: inline-flex; align-items: center; flex: 0 1 auto; padding: .48rem .8rem; } #tps-sc .wb__file:focus-visible + .wb__up { outline: 2px solid var(--sc-accent); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { #tps-sc .wb__up:hover { border-color: var(--sc-accent); color: var(--sc-ink); } } #tps-sc .wb__rm, #tps-sc .wb__dl { background: none; border: 0; padding: .4rem .2rem; cursor: pointer; color: var(--sc-ink); font: 500 var(--sc-t-xs)/1.3 var(--d-sc-font-text); text-decoration: underline; text-underline-offset: .2em; } #tps-sc .wb__rm:focus-visible, #tps-sc .wb__dl:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; } #tps-sc .wb__flab { font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; } #tps-sc .wb__logo-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem; margin: 0; } #tps-sc .wb__logo-ctl .wb__lrow { display: contents; } #tps-sc .wb__logo-ctl .wb__fnote { flex: 1 0 100%; margin: 0; } #tps-sc .wb__wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-4); align-items: end; } #tps-sc .wb--more .oid { display: none; } #tps-sc .wb--more .wb__controls { margin-top: var(--sc-3); gap: .7rem; } #tps-sc .wb--more .wb__spec { margin-top: var(--sc-3); } #tps-sc .wb--more .wb__panel .lab > div { padding: .2rem 0; } #tps-sc .wb--more .wb__panel .lab :is(dd,.t-dd) { font-size: var(--sc-t-xs); } @media (min-width: 1001px) { #tps-sc .wb.wb--more { padding-bottom: calc(var(--bench-h) + var(--sc-3)); } #tps-sc .wb--more .wb__panel { max-height: calc(100vh - var(--bench-h) - var(--sc-5)); overflow-y: auto; scrollbar-width: thin; box-sizing: border-box; padding-right: .4rem; } } #tps-sc .wb__fonts .seg { margin-top: .4rem; } #tps-sc .wb__where { display: grid; gap: .3rem; } #tps-sc .wb__dlrow { margin: 0; } #tps-sc .wb__acts { margin-top: var(--sc-4); display: flex; flex-wrap: wrap; align-items: center; gap: .7rem var(--sc-5); } #tps-sc .wb__go { display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; background: var(--d-blue); color: var(--d-white); border: 1px solid var(--d-blue); border-radius: var(--sc-r-pill); font: 600 .74rem/1 var(--d-sc-font-text); letter-spacing: .09em; text-transform: uppercase; padding: .9rem 1.4rem; } #tps-sc .wb__go:hover { background: var(--d-deep, #1D357A); border-color: var(--d-deep, #1D357A); } #tps-sc .wb__go:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } #tps-sc .wb__more { background: none; border: 0; padding: .3rem 0; cursor: pointer; color: var(--sc-ink); font: 500 var(--sc-t-sm)/1.3 var(--d-sc-font-text); text-decoration: underline; text-underline-offset: .22em; } #tps-sc .wb__more:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; } #tps-sc .wb__acts .wb__note { flex: 1 0 100%; margin: 0; max-width: 26rem; } #tps-sc .wb__said { flex: 1 0 100%; margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink); } #tps-sc .wb__said:empty { display: none; } #tps-sc:lang(th) .wb__go, #tps-sc:lang(th) .wb__flab { text-transform: none; letter-spacing: .01em; } #tps-sc:lang(th) .wb__go { font-size: .84rem; } #tps-sc .wb__sign[data-finish="lightbox"] { padding: 1rem 1.8rem; border-radius: 4px; background: color-mix(in oklab, #F4F7FF calc(var(--wb-lit) * 100%), #3A4058); box-shadow: 0 0 0 10px #1B2030, 0 0 calc(var(--wb-lit) * 70px) calc(var(--wb-lit) * 6px) rgba(198,210,236,calc(var(--wb-lit) * .4)); transition: background .5s var(--sc-ease-out), box-shadow .5s var(--sc-ease-out); } #tps-sc .wb__sign[data-finish="lightbox"] .wb__word { color: #131722; text-shadow: none; } #tps-sc .wb__sign[data-finish="lightbox"] .wb__glow { display: none; } #tps-sc .wb__sign[data-finish="lightbox"] .wb__logo { filter: brightness(calc(.55 + var(--wb-lit) * .45)); } #tps-sc [hidden] { display: none !important; } #tps-sc .wbm { --sc-ink: var(--d-ink); --sc-ink-soft: var(--d-slate); --d-line: var(--d-rule-p); --sc-accent: var(--d-blue); --sc-accent-ink: var(--d-white); width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: var(--sc-6); border: 0; border-radius: var(--sc-r-lg); background: var(--d-white); color: var(--d-ink); font-family: var(--d-sc-font-text); } #tps-sc .wbm::backdrop { background: rgba(9,12,22,.78); } #tps-sc .wbm__x { position: absolute; top: var(--sc-3); right: var(--sc-3); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: var(--d-paper); color: var(--d-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; } #tps-sc .wbm__x:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc .wbm__form, #tps-sc .wbm__done { display: grid; gap: var(--sc-4); } #tps-sc .wbm__done:focus { outline: none; } #tps-sc .wbm__h { margin: 0; padding-right: 2.6rem; font: 400 clamp(1.4rem, 3vw, 1.85rem)/1.15 var(--d-sc-font-display); } #tps-sc .wbm__h3 { margin: var(--sc-3) 0 0; font: 400 var(--sc-t-lg)/1.2 var(--d-sc-font-display); } #tps-sc .wbm__p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--d-slate); } #tps-sc .wbm__p--sm { font-size: var(--sc-t-xs); } #tps-sc .wbm__signs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } #tps-sc .wbm__sign { display: flex; gap: var(--sc-4); align-items: center; font-size: var(--sc-t-sm); line-height: 1.4; } #tps-sc .wbm__sign img { width: 8.5rem; flex: none; border-radius: var(--sc-r-sm); display: block; } #tps-sc .wbm__sign :is(b,.t-b) { display: block; font-weight: 500; } #tps-sc .wbm__where { color: var(--d-slate); } #tps-sc .wbm__prompts { display: grid; gap: var(--sc-5); } #tps-sc .wbm__one { display: grid; gap: .6rem; } #tps-sc .wbm__name { margin: 0; font-weight: 500; font-size: var(--sc-t-sm); } #tps-sc .wbm__lab { margin-bottom: -.3rem; } #tps-sc[data-theme="dark"] .wbm__where { color: #A9B1C3; } #tps-sc .wbm__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3); } #tps-sc .wbm .fld :is(input,.t-input)[type="text"], #tps-sc .wbm .fld :is(input,.t-input)[type="email"] { background: var(--d-white); color: var(--d-ink); border: 1px solid #B9BFCB; border-radius: var(--sc-r-sm); font: 400 var(--sc-t-base)/1.3 var(--d-sc-font-text); padding: .62rem .8rem; width: 100%; box-sizing: border-box; } #tps-sc .wbm .fld :is(input,.t-input):focus-visible { outline: 2px solid var(--d-blue); outline-offset: 1px; border-color: transparent; } #tps-sc .wbm .fld :is(input,.t-input)[aria-invalid="true"] { border-color: var(--d-ink); box-shadow: inset 0 0 0 1px var(--d-ink); } #tps-sc .wbm .seg__b { flex: 0 1 auto; padding-inline: .9rem; } #tps-sc .wbm__chk { margin: 0; display: flex; gap: .6rem; align-items: flex-start; font-size: var(--sc-t-sm); line-height: 1.45; } #tps-sc .wbm__chk :is(input,.t-input) { width: 1.1rem; height: 1.1rem; margin: .12rem 0 0; accent-color: var(--d-blue); flex: none; } #tps-sc .wbm__chk :is(input,.t-input):focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc .wbm__fine { margin: 0; font-size: var(--sc-t-xs); color: var(--d-slate); line-height: 1.5; } #tps-sc .wbm a { color: var(--d-blue); text-underline-offset: .2em; } #tps-sc .wbm__go, #tps-sc .wbm__acts { margin: 0; display: flex; gap: var(--sc-3); align-items: center; flex-wrap: wrap; } #tps-sc .wbm__send { cursor: pointer; border: 1px solid var(--d-blue); background: var(--d-blue); color: var(--d-white); border-radius: var(--sc-r-pill); padding: .86rem 1.4rem; font: 500 .76rem/1 var(--d-sc-font-text); letter-spacing: .08em; text-transform: uppercase; } #tps-sc .wbm__send:disabled { opacity: .55; cursor: progress; } #tps-sc .wbm__send:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 3px; } #tps-sc .wbm .btn2 { color: var(--d-ink); border-color: #B9BFCB; text-decoration: none; } #tps-sc .wbm .wb__rm { color: var(--d-ink); } #tps-sc .wbm__status, #tps-sc .wbm__copied { margin: 0; font-size: var(--sc-t-sm); color: var(--d-ink); } #tps-sc .wbm__status:empty { display: none; } #tps-sc .wbm__lab { font-size: var(--sc-t-xs); font-weight: 600; color: var(--d-slate); margin-bottom: -.6rem; } #tps-sc .wbm__prompt { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid #B9BFCB; border-radius: var(--sc-r-sm); background: var(--d-paper); color: var(--d-ink); padding: .7rem .8rem; font: 400 .78rem/1.5 var(--d-sc-font-text); } #tps-sc .wbm__prompt:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 1px; } #tps-sc .wbm__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: var(--sc-t-sm); line-height: 1.45; } #tps-sc[data-theme="dark"] .wbm { --sc-ink: var(--d-white); --sc-ink-soft: #8B93A7; --d-line: var(--d-rule-d); --sc-accent: var(--d-white); --sc-accent-ink: var(--d-blue); background: var(--d-night); color: var(--d-white); } #tps-sc[data-theme="dark"] .wbm__p, #tps-sc[data-theme="dark"] .wbm__fine, #tps-sc[data-theme="dark"] .wbm__lab { color: #A9B1C3; } #tps-sc[data-theme="dark"] .wbm__x { background: rgba(255,255,255,.1); color: var(--d-white); } #tps-sc[data-theme="dark"] .wbm .fld :is(input,.t-input)[type="text"], #tps-sc[data-theme="dark"] .wbm .fld :is(input,.t-input)[type="email"], #tps-sc[data-theme="dark"] .wbm__prompt { background: #141A2C; color: var(--d-white); border-color: var(--d-rule-d); } #tps-sc[data-theme="dark"] .wbm .btn2, #tps-sc[data-theme="dark"] .wbm .wb__rm, #tps-sc[data-theme="dark"] .wbm__status, #tps-sc[data-theme="dark"] .wbm__copied { color: var(--d-white); } #tps-sc[data-theme="dark"] .wbm a:not(.btn2) { color: var(--d-pale); } #tps-sc:lang(th) .wbm__send { text-transform: none; letter-spacing: .01em; } @media (max-width: 1000px) { #tps-sc .wb__col { display: contents; } #tps-sc .wb--more .wb__stage { position: sticky; top: 4rem; z-index: 3; } } @media (max-width: 560px) { #tps-sc .wb__row { grid-template-columns: 1fr; } #tps-sc .wb__lab { padding-top: 0; } #tps-sc .wbm { padding: var(--sc-5); } #tps-sc .wbm__two { grid-template-columns: 1fr; } } #tps-sc .plate { padding-top: var(--sc-section); padding-bottom: 0; position: relative; overflow: clip; } #tps-sc .plate__in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-7); align-items: center; } #tps-sc .plate__l .lnk--go, #tps-sc .plate__l .lnk { margin-top: var(--sc-5); } #tps-sc .plate__lab { margin-top: 0; } #tps-sc .paste--plate { border: 1px solid var(--d-line); } #tps-sc .bignum { font-family: var(--d-sc-font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; margin: var(--sc-4) 0 0; } #tps-sc .bignum a { color: var(--sc-accent); text-decoration: none; } #tps-sc .page--doc { padding-top: var(--sc-8); } #tps-sc .docHead { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto var(--sc-8); } #tps-sc .docHead--pad { margin-bottom: var(--sc-7); } #tps-sc .mapsec { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto var(--sc-8); display: grid; grid-template-columns: 1.45fr .85fr; gap: var(--sc-6); align-items: start; } #tps-sc .mapwrap { border: 1px solid var(--d-line); border-radius: var(--sc-r-md); overflow: hidden; background: var(--d-paper); position: relative; z-index: 0; isolation: isolate; } #tps-sc #map { width: 100%; height: 34rem; } #tps-sc .map__note { margin: 0; padding: var(--sc-3) var(--sc-4); font-size: var(--sc-t-xs); color: var(--d-slate); line-height: 1.5; border-top: 1px solid var(--d-line); } #tps-sc .drop svg { display: block; filter: drop-shadow(0 2px 3px rgba(19,23,34,.35)); transition: transform .18s var(--sc-ease-out); transform-origin: 50% 100%; } #tps-sc .drop.is-on svg, #tps-sc .leaflet-marker-icon:hover .drop svg { transform: scale(1.18); } #tps-sc .drop.is-held svg { filter: drop-shadow(0 3px 8px rgba(45,80,160,.75)); } #tps-sc .leaflet-container { font-family: var(--d-sc-font-text) !important; background: var(--d-paper) !important; } #tps-sc .leaflet-tile-pane { filter: grayscale(1) contrast(.9) brightness(1.08); } #tps-sc .leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.82) !important; } #tps-sc .leaflet-bar a { color: var(--d-ink) !important; } #tps-sc .leaflet-popup-content-wrapper { border-radius: var(--sc-r-md); box-shadow: 0 8px 28px rgba(19,23,34,.18); } #tps-sc .leaflet-popup-content { margin: .9rem 1rem; font-size: var(--sc-t-sm); } #tps-sc .pop__n { font-family: var(--d-sc-font-display); font-weight: 400; font-size: 1.05rem; color: var(--d-ink); display: block; } #tps-sc .pop__m { color: var(--d-slate); font-size: var(--sc-t-xs); display: block; margin: .25rem 0 .6rem; } #tps-sc .mapidx { display: grid; gap: var(--sc-5); } #tps-sc .grp__h { margin: 0 0 .5rem; font-family: var(--d-sc-font-display); font-size: var(--sc-t-sm); font-weight: 400; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--d-line); padding-bottom: .4rem; } #tps-sc .grp__h .num { color: var(--d-blue); font-size: var(--sc-t-xs); font-family: var(--d-sc-font-text); font-weight: 500; } #tps-sc .grp__l { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; } #tps-sc .grp__l a { color: var(--d-slate); text-decoration: none; font-size: var(--sc-t-xs); line-height: 1.45; } #tps-sc .grp__l a:hover { color: var(--d-blue); } #tps-sc .tablesec { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto var(--sc-8); overflow-x: auto; } #tps-sc .tbl { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); } #tps-sc .tbl :is(th,.t-th), #tps-sc .tbl :is(td,.t-td) { text-align: left; padding: .8rem; border-bottom: 1px solid var(--d-line); vertical-align: top; } #tps-sc .tbl :is(thead,.t-thead) :is(th,.t-th) { font-size: var(--sc-t-xs); letter-spacing: .15em; text-transform: uppercase; color: var(--d-slate); font-weight: 500; white-space: nowrap; } #tps-sc .tbl :is(tbody,.t-tbody) :is(th,.t-th) { font-weight: 500; } #tps-sc .tbl :is(tbody,.t-tbody) :is(tr,.t-tr) { transition: background var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .tbl :is(tbody,.t-tbody) :is(tr,.t-tr):target, #tps-sc .tbl :is(tbody,.t-tbody) :is(tr,.t-tr).is-on { background: var(--d-paper); } #tps-sc .t-id { color: var(--d-blue); font-weight: 600; width: 3.4rem; } #tps-sc .t-name { display: block; } #tps-sc .t-clu { display: block; font-size: var(--sc-t-xs); color: var(--d-slate); margin-top: .15rem; } #tps-sc .t-flow { color: var(--d-slate); max-width: 22rem; } #tps-sc .t-act { white-space: nowrap; } #tps-sc .t-map { display: inline-block; margin-left: .6rem; font-size: var(--sc-t-xs); color: var(--d-slate); } #tps-sc .t-map:hover { color: var(--d-blue); } #tps-sc .tbl--builds :is(tbody,.t-tbody) :is(th,.t-th) { width: 16rem; } #tps-sc .svc__i { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); align-items: center; margin-bottom: var(--sc-8); } #tps-sc .svc__i--flip { direction: rtl; } #tps-sc .svc__i--flip > * { direction: ltr; } #tps-sc .svc__i :is(figure,.t-figure) { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--d-line); } #tps-sc .svc__i :is(figure,.t-figure) img { width: 100%; height: 100%; max-height: 24rem; object-fit: cover; display: block; } #tps-sc .ticks { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: grid; gap: .5rem; } #tps-sc .ticks :is(li,.t-li) { position: relative; padding-left: 1.4rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; } #tps-sc .ticks :is(li,.t-li)::before { content: ""; position: absolute; left: 0; top: .5em; width: .62rem; height: 1px; background: var(--sc-accent); } #tps-sc .rail--work .wk { flex: none; width: min(19rem, 68vw); } #tps-sc .wk > div { border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--d-line); } #tps-sc .wk img { width: 100%; height: 14rem; object-fit: cover; display: block; } #tps-sc .brands { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } #tps-sc .brands :is(li,.t-li) { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); padding: .2rem .6rem; } #tps-sc .two { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sc-7); align-items: center; } #tps-sc .fig { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--d-line); } #tps-sc .fig img { width: 100%; height: auto; display: block; } #tps-sc .habits, #tps-sc .road { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); } #tps-sc .habits { grid-template-columns: repeat(2, 1fr); } #tps-sc .habits__n, #tps-sc .road__d { color: var(--sc-accent); font-size: var(--sc-t-xs); letter-spacing: .16em; font-weight: 500; text-transform: uppercase; } #tps-sc .habits h3, #tps-sc .road h3 { margin: .5rem 0 0; font-family: var(--d-sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); } #tps-sc .habits .body, #tps-sc .road .body { margin-top: .4rem; font-size: var(--sc-t-sm); } #tps-sc .road { grid-template-columns: repeat(5, 1fr); gap: var(--sc-4); } #tps-sc .road :is(li,.t-li) { border-top: 1px solid var(--d-line); padding-top: var(--sc-3); } #tps-sc .floor__h { margin: var(--sc-8) 0 var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; } #tps-sc .floorlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; } #tps-sc .floorlist :is(li,.t-li) { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); padding: .28rem .7rem; } #tps-sc .res { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto var(--sc-8); display: grid; gap: var(--sc-8); } #tps-sc .res .h-sec { font-size: clamp(1.3rem, 2.2vw, 1.8rem); } #tps-sc .held { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: 0; } #tps-sc .held :is(li,.t-li) { display: grid; grid-template-columns: 3.6rem 1fr auto auto; gap: var(--sc-4); align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--d-line); font-size: var(--sc-t-sm); } #tps-sc .held :is(li,.t-li):last-child { border-bottom: 1px solid var(--d-line); } #tps-sc .held :is(li,.t-li).held__empty { display: block; color: var(--d-slate); } #tps-sc .held__empty .lnk { margin-left: .6rem; } #tps-sc .held__id { color: var(--d-blue); font-weight: 600; } #tps-sc .held__meta { color: var(--d-slate); font-size: var(--sc-t-xs); } #tps-sc .held__rm { background: transparent; border: 1px solid var(--d-line); color: var(--d-slate); border-radius: var(--sc-r-pill); font: 600 .68rem/1 var(--d-sc-font-text); letter-spacing: .08em; text-transform: uppercase; padding: .4rem .72rem; cursor: pointer; } #tps-sc .held__rm:hover { border-color: var(--d-blue); color: var(--d-blue); } #tps-sc .held__rm:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc .res__tot { margin-top: var(--sc-5); max-width: 32rem; } #tps-sc .res__note { margin: var(--sc-4) 0 0; font-size: var(--sc-t-xs); color: var(--d-slate); max-width: 42rem; line-height: 1.55; } #tps-sc .res__sub { margin: var(--sc-3) 0 var(--sc-4); font-size: var(--sc-t-sm); color: var(--d-slate); } #tps-sc .months { display: flex; flex-wrap: wrap; gap: .4rem; } #tps-sc .mo { cursor: pointer; background: var(--d-white); color: var(--d-slate); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); font: 600 .72rem/1 var(--d-sc-font-text); letter-spacing: .08em; text-transform: uppercase; padding: .72rem 1.05rem; transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .mo[aria-pressed="true"] { background: var(--d-blue); color: var(--d-white); border-color: var(--d-blue); } #tps-sc .mo:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc .months__out { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--d-slate); } #tps-sc .flds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); margin-top: var(--sc-5); } #tps-sc .fld--wide { grid-column: 1 / -1; } #tps-sc .res__send { margin-top: var(--sc-6); display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; } #tps-sc .res__fine { margin: 0; font-size: var(--sc-t-xs); color: var(--d-slate); max-width: 26rem; line-height: 1.5; } #tps-sc .res__you .wpforms-container { margin: var(--sc-5) 0 0; padding: 0; max-width: none; } #tps-sc .res__you .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); } #tps-sc .res__you .wpforms-field { margin: 0; padding: 0; display: grid; gap: .45rem; min-width: 0; } #tps-sc .res__you .wpforms-field.tps-wide { grid-column: 1 / -1; } #tps-sc .res__you .wpforms-field.tps-auto { display: none !important; } #tps-sc .res__you .wpforms-field-label { margin: 0; padding: 0; font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; line-height: 1.3; font-family: var(--d-sc-font-text); } #tps-sc .res__you .wpforms-required-label { color: var(--sc-accent); } #tps-sc .res__you .wpforms-field-description { margin: .35rem 0 0; padding: 0; font: 400 var(--sc-t-xs)/1.5 var(--d-sc-font-text); color: var(--sc-ink-soft); } #tps-sc .res__you .wpforms-field-description a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 2px; } #tps-sc .res__you .wpforms-field :is(input,.t-input), #tps-sc .res__you .wpforms-field :is(textarea,.t-textarea) { background: rgba(255,255,255,.06); color: var(--sc-ink); border: 1px solid var(--d-line); border-radius: var(--sc-r-sm); box-shadow: none; font: 400 var(--sc-t-base)/1.3 var(--d-sc-font-display); padding: .62rem .8rem; width: 100%; max-width: none; height: auto; box-sizing: border-box; } #tps-sc .res__you .wpforms-field :is(textarea,.t-textarea) { min-height: 5.6rem; resize: vertical; } #tps-sc .res__you .wpforms-field :is(input,.t-input)::placeholder, #tps-sc .res__you .wpforms-field :is(textarea,.t-textarea)::placeholder { color: var(--sc-ink-soft); opacity: .7; } #tps-sc .res__you .wpforms-field :is(input,.t-input):focus, #tps-sc .res__you .wpforms-field :is(textarea,.t-textarea):focus { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; box-shadow: none; } #tps-sc .res__you .wpforms-error, #tps-sc .res__you :is(label,.t-label).wpforms-error { margin: .2rem 0 0; font-size: var(--sc-t-xs); color: #d63637; } #tps-sc .res__you .wpforms-submit-container { margin: var(--sc-6) 0 0; padding: 0; display: flex; align-items: center; gap: var(--sc-4); } #tps-sc .res__you button.wpforms-submit { display: inline-flex; align-items: center; justify-content: center; height: auto; white-space: nowrap; background: var(--d-blue); color: var(--d-white); border: 0; cursor: pointer; font: 600 .72rem/1 var(--d-sc-font-text); letter-spacing: .09em; text-transform: uppercase; padding: .78rem 1.45rem; border-radius: var(--sc-r-pill); box-shadow: 0 1px 2px rgba(19,23,34,.16); transition: filter var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .res__you button.wpforms-submit:hover { filter: brightness(1.12); box-shadow: 0 3px 10px rgba(19,23,34,.22); } #tps-sc .res__you button.wpforms-submit:active { transform: translateY(1px); } #tps-sc .res__you button.wpforms-submit:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 3px; } #tps-sc .res__you .wpforms-confirmation-container-full { margin: var(--sc-5) 0 0; padding: var(--sc-5); background: rgba(45,80,160,.08); border: 1px solid var(--d-line); border-radius: var(--sc-r-md); color: var(--sc-ink); font: 400 var(--sc-t-base)/1.5 var(--d-sc-font-text); } #tps-sc .res__you .wpforms-confirmation-container-full p { margin: 0; color: var(--sc-ink); } @media (max-width: 700px) { #tps-sc .res__you .wpforms-field-container { grid-template-columns: 1fr; } } #tps-sc .foot { margin-top: var(--sc-8); padding-top: var(--sc-7); border-top: 1px solid var(--d-line); } #tps-sc .foot__in { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto; } #tps-sc .foot__line { margin: 0 0 var(--sc-6); font-family: var(--d-sc-font-display); font-size: var(--sc-t-xl); font-weight: 300; } #tps-sc .foot__c { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); margin: 0; } #tps-sc .foot__c :is(dt,.t-dt) { font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; margin-bottom: .4rem; } #tps-sc .foot__c :is(dd,.t-dd) { margin: 0; font-size: var(--sc-t-sm); line-height: 1.55; } #tps-sc .foot__c :is(dd,.t-dd) span { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); } #tps-sc .foot__c a { color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--d-line); } #tps-sc .foot__c a:hover { color: var(--sc-accent); border-color: var(--sc-accent); } #tps-sc .foot__fine { margin: var(--sc-7) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); } @media (max-width: 1000px) { #tps-sc { --rail-w: 0rem; --bench-h: 4rem; } #tps-sc .idx { inset: 0 0 auto 0; width: auto; height: auto; flex-direction: row; align-items: center; gap: var(--sc-4); padding: .6rem var(--sc-gutter); border-right: 0; border-bottom: 1px solid var(--d-rule-p); overflow-x: auto; scrollbar-width: none; } #tps-sc .idx::-webkit-scrollbar { display: none; } #tps-sc .idx__mark { width: 6.2rem; flex: none; } #tps-sc .idx__list { grid-auto-flow: column; gap: .15rem; } #tps-sc .idx__list a { grid-template-columns: auto auto; padding: .4rem .55rem; white-space: nowrap; } #tps-sc .idx__n, #tps-sc .idx__foot { display: none; } #tps-sc :not(body).page { padding-top: 3.6rem; } #tps-sc .page--doc { padding-top: 5.6rem; } #tps-sc .bench { inset: auto 0 0 0; grid-template-columns: minmax(2.5rem, 1fr) auto auto auto auto; gap: .35rem; padding: 0 .6rem; } #tps-sc .bench__go { padding: .7rem 1rem; } #tps-sc .bench__swatch { width: 1.3rem; height: 1.3rem; } #tps-sc .bench__brand :is(label,.t-label), #tps-sc .bench__empty, #tps-sc .bench__full :is(i,.t-i) { display: none; } #tps-sc .bench__tray { font-size: var(--sc-t-xs); white-space: nowrap; } #tps-sc .bench__full { display: inline-flex; gap: .3rem; align-items: baseline; } #tps-sc .bench__full [data-tray-area], #tps-sc .bench__full [data-tray-traffic] { display: none; } #tps-sc .bench__full .u { display: none; } #tps-sc .bench__full .u:first-of-type { display: inline; } #tps-sc .first { grid-template-columns: 1fr; gap: var(--sc-5); align-content: center; } #tps-sc .first__lab { max-width: none; } #tps-sc .wb { grid-template-columns: 1fr; gap: var(--sc-5); } #tps-sc .wb__stage { min-height: 11rem; } #tps-sc .plate__in, #tps-sc .two, #tps-sc .bld, #tps-sc .svc__i, #tps-sc .mapsec { grid-template-columns: 1fr; } #tps-sc .bld:nth-child(even), #tps-sc .svc__i--flip { direction: ltr; } #tps-sc .habits { grid-template-columns: 1fr; } #tps-sc .road { grid-template-columns: 1fr 1fr; } #tps-sc .flds, #tps-sc .foot__c { grid-template-columns: 1fr; } #tps-sc #map { height: 24rem; } } @media (max-width: 700px) { #tps-sc .h-page { font-size: clamp(1.9rem, 8.4vw, 2.7rem); } #tps-sc .h-sec { font-size: clamp(1.45rem, 6vw, 2rem); } #tps-sc .road { grid-template-columns: 1fr; } #tps-sc .wb__word { font-size: clamp(1.8rem, 10vw, 3rem); } #tps-sc .t-flow, #tps-sc .tbl :is(thead,.t-thead) :is(th,.t-th):nth-child(3) { display: none; } } @media (prefers-reduced-motion: reduce) { #tps-sc .clu__img img, #tps-sc .lnk::after, #tps-sc .drop svg { transition: none; } #tps-sc .wb__word, #tps-sc .wb__glow { transition: opacity .2s linear; } } #tps-sc .ovt__stage { display: grid; place-items: center; position: relative; overflow: clip; } #tps-sc .ovt__in { text-align: center; padding: var(--sc-6) var(--sc-gutter); position: relative; z-index: 1; } #tps-sc .ovt__mark { width: clamp(7.6rem, 15vw, 12rem); height: auto; display: block; margin: 0 auto var(--sc-5); opacity: calc(1 - var(--sc-p, 0) * 1.3); transform: translateY(calc(var(--sc-p, 0) * -34px)); } #tps-sc .ovt__disc { fill: none; stroke: var(--d-white); stroke-width: 10; stroke-dasharray: 1180; stroke-dashoffset: calc(1180 - min(var(--sc-p, 0) * 3.4, 1) * 1180); } #tps-sc .ovt__inner, #tps-sc .ovt__roads { fill: var(--d-white); opacity: clamp(0, calc((var(--sc-p, 0) - .12) * 6), 1); } #tps-sc .ovt__word { fill: var(--d-onblue); opacity: clamp(0, calc((var(--sc-p, 0) - .16) * 7), 1); } #tps-sc .ovt__line { margin: var(--sc-4) 0 0; font-family: var(--d-sc-font-display); font-weight: 300; font-size: clamp(1.8rem, 4.6vw, 3.4rem); line-height: 1.1; color: var(--d-white); opacity: clamp(0, calc((var(--sc-p, 0) - .26) * 6), 1); transform: translateY(calc(18px - var(--sc-p, 0) * 44px)); } #tps-sc .ovt__th { color: var(--d-onblue2); margin-top: var(--sc-3); opacity: clamp(0, calc((var(--sc-p, 0) - .38) * 6), 1); transform: translateY(calc(14px - var(--sc-p, 0) * 40px)); } #tps-sc .ovt__band { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 34vh; opacity: .1; pointer-events: none; } #tps-sc .ovt__band path { fill: var(--d-white); } @media (prefers-reduced-motion: reduce) { #tps-sc .ovt__mark, #tps-sc .ovt__line, #tps-sc .ovt__th { transform: none; opacity: 1; } #tps-sc .ovt__disc { stroke-dashoffset: 0; } #tps-sc .ovt__inner, #tps-sc .ovt__roads, #tps-sc .ovt__word { opacity: 1; } } #tps-sc .soc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; } #tps-sc .soc a { display: grid; place-items: center; width: 1.95rem; height: 1.95rem; border-radius: 50%; color: var(--sc-ink-soft); transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .soc svg { width: 1.02rem; height: 1.02rem; fill: currentColor; display: block; } #tps-sc .soc a:hover { background: var(--d-blue); color: var(--d-white); } #tps-sc .soc a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; } #tps-sc .g-blue .soc a:hover, #tps-sc .g-ink .soc a:hover { background: var(--d-white); color: var(--d-blue); } #tps-sc .soc--rail { margin-top: var(--sc-4); gap: .15rem; } #tps-sc .soc--rail a { width: 1.7rem; height: 1.7rem; } #tps-sc .soc--rail svg { width: .9rem; height: .9rem; } #tps-sc .soc--foot { margin-top: var(--sc-6); } #tps-sc .idx__c2 { margin: 0; display: grid; gap: .6rem; } #tps-sc .idx__c2 :is(dt,.t-dt) { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--d-slate); opacity: .75; font-weight: 500; margin-bottom: .1rem; } #tps-sc .idx__c2 :is(dd,.t-dd) { margin: 0; font-size: .72rem; line-height: 1.4; color: var(--d-slate); } #tps-sc .idx__c2 a { color: var(--d-slate); text-decoration: none; } #tps-sc .idx__c2 a:hover { color: var(--d-blue); } #tps-sc .bench { transition: transform .32s var(--sc-ease-out), opacity .2s var(--sc-ease-out); } #tps-sc .bench.is-hidden { transform: translateY(105%); opacity: 0; pointer-events: none; } #tps-sc .bench__hide, #tps-sc .bench__peek { display: grid; place-items: center; cursor: pointer; background: transparent; border: 1px solid var(--d-rule-p); border-radius: var(--sc-r-pill); color: var(--d-slate); width: 2rem; height: 2rem; padding: 0; flex: none; transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .bench__hide svg, #tps-sc .bench__peek svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #tps-sc .bench__hide:hover, #tps-sc .bench__peek:hover { color: var(--d-blue); border-color: var(--d-blue); } #tps-sc .bench__hide:focus-visible, #tps-sc .bench__peek:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc .bench__peek { position: fixed; right: var(--sc-5); bottom: var(--sc-4); z-index: 1300; width: auto; height: 2.5rem; padding: 0 .9rem; gap: .5rem; grid-auto-flow: column; align-items: center; background: var(--d-white); box-shadow: 0 4px 18px rgba(19,23,34,.18); font: 600 .7rem/1 var(--d-sc-font-text); letter-spacing: .09em; text-transform: uppercase; color: var(--d-ink); border-color: transparent; } #tps-sc .bench__peek :is(b,.t-b) { color: var(--d-white); background: var(--d-blue); border-radius: var(--sc-r-pill); padding: .12rem .42rem; font-size: .66rem; } #tps-sc .legal__upd { margin: var(--sc-4) 0 0; font-size: var(--sc-t-xs); color: var(--d-slate); } #tps-sc .legal__nav { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto var(--sc-7); } #tps-sc .legal__nav :is(ul,.t-ul) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } #tps-sc .legal__nav a { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); color: var(--d-slate); text-decoration: none; font: 600 .7rem/1 var(--d-sc-font-text); letter-spacing: .08em; text-transform: uppercase; } #tps-sc .legal__nav a:hover { border-color: var(--d-blue); color: var(--d-blue); } #tps-sc .legal__nav [aria-current="page"] a { background: var(--d-blue); color: var(--d-white); border-color: var(--d-blue); } #tps-sc .legal { width: min(100% - var(--sc-gutter) * 2, 52rem); margin: 0 auto var(--sc-8); } #tps-sc .legal__s { margin-bottom: var(--sc-7); } #tps-sc .legal__s h2 { margin: 0 0 var(--sc-3); font-family: var(--d-sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); color: var(--d-ink); } #tps-sc .legal__s .body { margin-top: var(--sc-2); } #tps-sc .legal__s .ticks { margin-top: var(--sc-3); } #tps-sc .page--legal .docHead { margin-bottom: var(--sc-6); } #tps-sc .foot__base { margin-top: var(--sc-7); padding-top: var(--sc-4); border-top: 1px solid var(--d-line); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-5); flex-wrap: wrap; } #tps-sc .foot__base .foot__fine { margin: 0; } #tps-sc .foot__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-4); } #tps-sc .foot__legal a { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-xs); } #tps-sc .foot__legal a:hover { color: var(--sc-ink); } @media (max-width: 1000px) { #tps-sc .idx__c2 { display: none; } #tps-sc .soc--rail { display: none; } #tps-sc .bench__peek { right: var(--sc-3); bottom: var(--sc-3); } #tps-sc .foot__base { flex-direction: column; gap: var(--sc-3); } } #tps-sc[data-theme="dark"] { --sc-canvas: var(--d-night); --sc-ink: var(--d-white); --sc-ink-soft: #8B93A7; --d-line: var(--d-rule-d); } #tps-sc[data-theme="dark"] body { background: var(--d-night); color: var(--d-white); } #tps-sc[data-theme="dark"] .g-white { background: var(--d-ink); --sc-ink: var(--d-white); --sc-ink-soft: #8B93A7; --d-line: var(--d-rule-d); color: var(--d-white); } #tps-sc[data-theme="dark"] .g-paper { background: var(--d-night); --sc-ink: var(--d-white); --sc-ink-soft: #8B93A7; --d-line: var(--d-rule-d); color: var(--d-white); } #tps-sc[data-theme="dark"] .g-blue { background: var(--d-deep); } #tps-sc[data-theme="dark"] .g-ink { background: #090c16; } #tps-sc[data-theme="dark"] .g-white, #tps-sc[data-theme="dark"] .g-paper { --sc-accent: var(--d-white); --sc-accent-ink: var(--d-blue); } #tps-sc[data-theme="dark"] .g-white .lnk.lnk--go, #tps-sc[data-theme="dark"] .g-paper .lnk.lnk--go { background: var(--d-white); color: var(--d-blue); } #tps-sc[data-theme="dark"] .g-white .hold[aria-pressed="true"], #tps-sc[data-theme="dark"] .g-paper .hold[aria-pressed="true"] { background: var(--d-white); color: var(--d-blue); border-color: var(--d-white); } #tps-sc[data-theme="dark"] .idx { background: color-mix(in oklab, var(--d-night) 90%, transparent); border-right-color: var(--d-rule-d); } #tps-sc[data-theme="dark"] .idx__mark img { content: url("/wp-content/uploads/2026/09/logo-lockup-white.png"); } #tps-sc[data-theme="dark"] .idx__list a { color: #8B93A7; } #tps-sc[data-theme="dark"] .idx__list a:hover { background: rgba(255,255,255,.06); color: var(--d-white); } #tps-sc[data-theme="dark"] .idx__c { border-color: var(--d-rule-d); color: #8B93A7; } #tps-sc[data-theme="dark"] .idx__c2 :is(dd,.t-dd), #tps-sc[data-theme="dark"] .idx__c2 a, #tps-sc[data-theme="dark"] .idx__c2 :is(dt,.t-dt) { color: #8B93A7; } #tps-sc[data-theme="dark"] .idx__c2 a:hover { color: var(--d-white); } #tps-sc[data-theme="dark"] .soc a:hover { background: var(--d-white); color: var(--d-blue); } #tps-sc[data-theme="dark"] .bench { background: color-mix(in oklab, var(--d-night) 94%, transparent); border-top-color: var(--d-rule-d); } #tps-sc[data-theme="dark"] .bench__brand :is(label,.t-label), #tps-sc[data-theme="dark"] .bench__tray { color: #8B93A7; } #tps-sc[data-theme="dark"] .bench__brand :is(input,.t-input) { color: var(--d-white); border-bottom-color: var(--d-rule-d); } #tps-sc[data-theme="dark"] .bench__full :is(b,.t-b) { color: var(--d-white); } #tps-sc[data-theme="dark"] .bench__go { background: var(--d-white); color: var(--d-blue); } #tps-sc[data-theme="dark"] .bench__hide { border-color: var(--d-rule-d); color: #8B93A7; } #tps-sc[data-theme="dark"] .bench__peek { background: var(--d-ink); color: var(--d-white); box-shadow: 0 4px 18px rgba(0,0,0,.5); } #tps-sc[data-theme="dark"] .bench__swatch { border-color: var(--d-rule-d); } #tps-sc[data-theme="dark"] .page--doc .flds :is(input,.t-input), #tps-sc[data-theme="dark"] .page--doc .flds :is(textarea,.t-textarea) { background: rgba(255,255,255,.06); color: var(--d-white); } #tps-sc[data-theme="dark"] .mo { background: transparent; color: #8B93A7; } #tps-sc[data-theme="dark"] .tbl :is(tbody,.t-tbody) :is(tr,.t-tr):target, #tps-sc[data-theme="dark"] .tbl :is(tbody,.t-tbody) :is(tr,.t-tr).is-on { background: rgba(255,255,255,.06); } #tps-sc[data-theme="dark"] .mapwrap { background: var(--d-ink); } #tps-sc[data-theme="dark"] .leaflet-tile-pane { filter: grayscale(1) invert(1) contrast(.86) brightness(.92); } #tps-sc[data-theme="dark"] .leaflet-container { background: var(--d-ink) !important; } #tps-sc[data-theme="dark"] .leaflet-control-attribution { background: rgba(19,23,34,.82) !important; color: #8B93A7 !important; } #tps-sc[data-theme="dark"] .leaflet-control-attribution a { color: #C6D2EC !important; } #tps-sc[data-theme="dark"] .leaflet-popup-content-wrapper, #tps-sc[data-theme="dark"] .leaflet-popup-tip { background: var(--d-ink); color: var(--d-white); } #tps-sc[data-theme="dark"] .pop__n { color: var(--d-white); } #tps-sc[data-theme="dark"] .legal__nav a { border-color: var(--d-rule-d); color: #8B93A7; } #tps-sc .idx__switch { display: flex; align-items: center; gap: .35rem; margin-top: -.4rem; } #tps-sc .lang { display: inline-flex; border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); overflow: hidden; } #tps-sc .lang a { padding: .3rem .55rem; font: 600 .64rem/1 var(--d-sc-font-text); letter-spacing: .08em; color: var(--sc-ink-soft); text-decoration: none; } #tps-sc .lang a[aria-current="true"] { background: var(--d-blue); color: var(--d-white); } #tps-sc[data-theme="dark"] .lang a[aria-current="true"] { background: var(--d-white); color: var(--d-blue); } #tps-sc .lang a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; } #tps-sc .themebtn { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; flex: none; border: 1px solid var(--d-line); border-radius: 50%; background: transparent; color: var(--sc-ink-soft); cursor: pointer; transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .themebtn svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #tps-sc .themebtn:hover { color: var(--sc-accent); border-color: var(--sc-accent); } #tps-sc .themebtn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; } #tps-sc .themebtn .t-sun { display: none; } #tps-sc[data-theme="dark"] .themebtn .t-sun { display: block; } #tps-sc[data-theme="dark"] .themebtn .t-moon { display: none; } @media (max-width: 1000px) { #tps-sc .idx__switch { margin: 0 0 0 auto; } } #tps-sc:lang(th) .h-page { line-height: 1.34; } #tps-sc:lang(th) .h-sec { line-height: 1.36; } #tps-sc:lang(th) .h-obj { line-height: 1.34; } #tps-sc:lang(th) .ovt__line { line-height: 1.38; } #tps-sc:lang(th) .wb__word { line-height: 1.3; } #tps-sc:lang(th) .clu h3, #tps-sc:lang(th) .habits h3, #tps-sc:lang(th) .road h3, #tps-sc:lang(th) .legal__s h2, #tps-sc:lang(th) .foot__line { line-height: 1.4; } #tps-sc:lang(th) .body { line-height: 1.85; } #tps-sc:lang(th) .lab :is(dd,.t-dd) { line-height: 1.7; } #tps-sc:lang(th) .oid__n, #tps-sc:lang(th) .oid__d { letter-spacing: .1em; } #tps-sc:lang(th) .bench__go, #tps-sc:lang(th) .lnk.lnk--go, #tps-sc:lang(th) .hold, #tps-sc:lang(th) .seg__b, #tps-sc:lang(th) .pwr, #tps-sc:lang(th) .mo, #tps-sc:lang(th) .held__rm, #tps-sc:lang(th) .legal__nav a { text-transform: none; letter-spacing: .01em; font-size: .82rem; } #tps-sc:lang(th) .lab :is(dt,.t-dt), #tps-sc:lang(th) .fld :is(label,.t-label), #tps-sc:lang(th) .fld :is(legend,.t-legend), #tps-sc:lang(th) .foot__c :is(dt,.t-dt), #tps-sc:lang(th) .idx__c2 :is(dt,.t-dt), #tps-sc:lang(th) .floor__h, #tps-sc:lang(th) .habits__n, #tps-sc:lang(th) .road__d, #tps-sc:lang(th) .bench__brand :is(label,.t-label) { text-transform: none; letter-spacing: .04em; } #tps-sc .mapwrap { position: sticky; top: var(--sc-5); } #tps-sc #map { height: min(36rem, 72vh); } #tps-sc .bp { display: grid; } #tps-sc .bp__tools { display: grid; grid-template-columns: 1fr auto; gap: var(--sc-3); align-items: end; margin-bottom: var(--sc-3); } #tps-sc .bp__q :is(input,.t-input), #tps-sc .bp__s :is(select,.t-select) { width: 100%; box-sizing: border-box; background: var(--d-white); color: var(--sc-ink); border: 1px solid var(--d-line); border-radius: var(--sc-r-sm); font: 400 var(--sc-t-sm)/1.3 var(--d-sc-font-text); padding: .58rem .7rem; } #tps-sc[data-theme="dark"] .bp__q :is(input,.t-input), #tps-sc[data-theme="dark"] .bp__s :is(select,.t-select) { background: rgba(255,255,255,.06); color: var(--d-white); } #tps-sc .bp__q :is(input,.t-input):focus-visible, #tps-sc .bp__s :is(select,.t-select):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; } #tps-sc .bp__count { margin: 0 0 var(--sc-2); font-size: var(--sc-t-xs); color: var(--d-slate); } #tps-sc .bp__rows { list-style: none; margin: 0; padding: 0; max-height: min(30rem, 62vh); overflow-y: auto; } #tps-sc .bp__rows button { display: grid; width: 100%; text-align: left; gap: .1rem; cursor: pointer; background: transparent; border: 0; border-bottom: 1px solid var(--d-line); padding: .62rem .2rem; position: relative; font-family: inherit; transition: background var(--sc-d-fast) var(--sc-ease-out); } #tps-sc .bp__rows button:hover { background: var(--d-paper); } #tps-sc[data-theme="dark"] .bp__rows button:hover { background: rgba(255,255,255,.05); } #tps-sc .bp__rows button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; } #tps-sc .bp__nm { font-family: var(--d-sc-font-display); font-size: var(--sc-t-sm); color: var(--sc-ink); } #tps-sc .bp__meta { font-size: var(--sc-t-xs); color: var(--d-slate); } #tps-sc .bp__clu { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--d-slate); opacity: .7; } #tps-sc:lang(th) .bp__clu { text-transform: none; letter-spacing: .02em; } #tps-sc .bp__held { position: absolute; right: .3rem; top: .95rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--d-blue); } #tps-sc[data-theme="dark"] .bp__held { background: var(--d-white); } #tps-sc .bp__back { background: transparent; border: 0; cursor: pointer; padding: 0 0 var(--sc-3); color: var(--d-slate); font: 500 var(--sc-t-xs)/1 var(--d-sc-font-text); } #tps-sc .bp__back:hover { color: var(--sc-accent); } #tps-sc .bp__back:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; } #tps-sc .bp__flow { margin: .3rem 0 0; font-size: var(--sc-t-sm); color: var(--d-slate); line-height: 1.5; } #tps-sc .bp__act { margin: var(--sc-4) 0 0; display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; } #tps-sc .pfbar { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto var(--sc-6); display: flex; flex-wrap: wrap; gap: .35rem; } #tps-sc .pfb { cursor: pointer; background: transparent; color: var(--d-slate); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); font: 600 .7rem/1 var(--d-sc-font-text); letter-spacing: .07em; text-transform: uppercase; padding: .6rem .95rem; display: inline-flex; gap: .45rem; align-items: baseline; transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc:lang(th) .pfb { text-transform: none; letter-spacing: .02em; font-size: .8rem; } #tps-sc .pfb .num { opacity: .55; font-size: .64rem; } #tps-sc .pfb:hover { border-color: var(--d-blue); color: var(--d-blue); } #tps-sc .pfb.is-on { background: var(--d-blue); color: var(--d-white); border-color: var(--d-blue); } #tps-sc[data-theme="dark"] .pfb.is-on { background: var(--d-white); color: var(--d-blue); border-color: var(--d-white); } #tps-sc .pfb:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; } #tps-sc .pfgrid { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto var(--sc-8); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sc-5); } #tps-sc .pf__b { display: block; width: 100%; padding: 0; cursor: pointer; position: relative; background: transparent; border: 1px solid var(--d-line); border-radius: var(--sc-r-md); overflow: hidden; } #tps-sc .pf__im { display: block; } #tps-sc .pf__b img { width: 100%; height: 12.5rem; object-fit: cover; display: block; transition: transform var(--sc-d-slow) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { #tps-sc .pf__b:hover img { transform: scale(1.04); } } #tps-sc .pf__b:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } #tps-sc .pf__n { position: absolute; right: .5rem; bottom: .5rem; background: rgba(19,23,34,.72); color: #fff; border-radius: var(--sc-r-pill); padding: .16rem .5rem; font: 600 .66rem/1.4 var(--d-sc-font-text); font-variant-numeric: tabular-nums; } #tps-sc .pf .lab { margin-top: var(--sc-3); } #tps-sc .lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; overflow: hidden; } #tps-sc .lb::backdrop { background: rgba(9,12,22,.92); } #tps-sc .lb__fig { margin: 0; height: 100%; display: grid; place-items: center; gap: var(--sc-4); padding: var(--sc-6); box-sizing: border-box; } #tps-sc .lb__fig img { max-width: min(92vw, 1200px); max-height: 76vh; object-fit: contain; border-radius: var(--sc-r-sm); display: block; } #tps-sc .lb__cap { display: flex; gap: var(--sc-4); align-items: baseline; color: #fff; flex-wrap: wrap; justify-content: center; } #tps-sc .lb__cap :is(b,.t-b) { font-family: var(--d-sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); } #tps-sc .lb__cap span { color: #8B93A7; font-size: var(--sc-t-sm); } #tps-sc .lb__x, #tps-sc .lb__nav { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; } #tps-sc .lb__x { top: var(--sc-4); right: var(--sc-4); } #tps-sc .lb__nav--prev { left: var(--sc-4); top: 50%; transform: translateY(-50%); } #tps-sc .lb__nav--next { right: var(--sc-4); top: 50%; transform: translateY(-50%); } #tps-sc .lb__x:hover, #tps-sc .lb__nav:hover { background: rgba(255,255,255,.22); } #tps-sc .lb__x:focus-visible, #tps-sc .lb__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #tps-sc .btn2 { display: inline-flex; align-items: center; cursor: pointer; background: transparent; color: var(--sc-ink); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); font: 600 .72rem/1 var(--d-sc-font-text); letter-spacing: .09em; text-transform: uppercase; padding: .74rem 1.2rem; transition: border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc:lang(th) .btn2 { text-transform: none; letter-spacing: .01em; font-size: .82rem; } #tps-sc .btn2:hover { border-color: var(--sc-accent); color: var(--sc-accent); } #tps-sc .btn2:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } #tps-sc .plate__else { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: var(--sc-measure); } @media (prefers-reduced-motion: no-preference) { #tps-sc [data-tellus].is-arrive .plate__l { animation: arrive .9s var(--sc-ease-out); } @keyframes arrive { 0% { opacity: .35; transform: translateY(10px); } 100% { opacity: 1; transform: none; } } } @media (max-width: 1000px) { #tps-sc .mapwrap { position: relative; top: auto; } #tps-sc .bp__rows { max-height: none; } #tps-sc .pfgrid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sc-4); } #tps-sc .pf__b img { height: 9rem; } } #tps-sc .t-aud { color: var(--d-slate); max-width: 15rem; font-size: var(--sc-t-xs); line-height: 1.5; } @media (max-width: 1200px) { #tps-sc .t-aud, #tps-sc .tbl :is(thead,.t-thead) :is(th,.t-th):nth-last-child(2) { display: none; } } #tps-sc .foot.g-ink { margin-top: 0; padding-top: var(--sc-8); padding-bottom: var(--sc-7); border-top: 0; } #tps-sc .plate > .foot.g-ink { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); } #tps-sc .plate > .wrap { margin-bottom: var(--sc-section); } #tps-sc .plate:not(:has(> .foot)) { padding-bottom: var(--sc-section); } #tps-sc .plate:not(:has(> .foot)) > .wrap { margin-bottom: 0; } #tps-sc .foot__line { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; margin-bottom: var(--sc-2); } #tps-sc .foot__line :is(i,.t-i) { font-style: normal; opacity: .4; } #tps-sc .foot__quote { margin: 0 0 .2rem; font-family: var(--d-thai); font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.24rem); color: var(--d-onblue2); } #tps-sc .foot__where { margin: 0 0 var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); display: flex; gap: .6rem; flex-wrap: wrap; } #tps-sc .foot__where :is(i,.t-i) { font-style: normal; opacity: .4; } #tps-sc .foot__where a { color: var(--sc-ink-soft); text-decoration: none; border-bottom: 1px solid var(--d-rule-d); } #tps-sc .foot__where a:hover { color: var(--d-white); } #tps-sc .foot__en { margin: 0 0 var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } #tps-sc .foot__id { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-5); align-items: start; margin-bottom: var(--sc-7); } #tps-sc .foot__mark { width: clamp(3rem, 4.4vw, 4.2rem); height: auto; display: block; margin-top: .15rem; } #tps-sc .foot__idt { min-width: 0; } #tps-sc .foot__idt .foot__where { margin-bottom: 0; } @media (max-width: 700px) { #tps-sc .foot__id { grid-template-columns: 1fr; gap: var(--sc-4); } #tps-sc .foot__mark { width: 2.8rem; } } #tps-sc .bp__about { margin-top: var(--sc-3); font-size: var(--sc-t-sm); } #tps-sc .pop__c { display: block; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--d-slate); margin-bottom: .2rem; } #tps-sc:lang(th) .pop__c { text-transform: none; letter-spacing: .02em; } #tps-sc .pop__o { display: block; margin: .5rem 0 .2rem; color: var(--d-slate); line-height: 1.55; font-size: var(--sc-t-xs); } #tps-sc .bench__see { display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; background: transparent; color: var(--sc-ink); border: 1px solid var(--d-line); border-radius: var(--sc-r-pill); padding: .72rem 1.05rem; font: 600 .72rem/1 var(--d-sc-font-text); letter-spacing: .09em; text-transform: uppercase; transition: border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } #tps-sc:lang(th) .bench__see { text-transform: none; letter-spacing: .01em; font-size: .82rem; } #tps-sc .bench__see:hover { border-color: var(--d-blue); color: var(--d-blue); } #tps-sc .bench__see[aria-expanded="true"] { background: var(--d-blue); color: var(--d-white); border-color: var(--d-blue); } #tps-sc .bench__see:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc[data-theme="dark"] .bench__see { border-color: var(--d-rule-d); color: var(--d-white); } #tps-sc[data-theme="dark"] .bench__see[aria-expanded="true"] { background: var(--d-white); color: var(--d-blue); border-color: var(--d-white); } #tps-sc .traypanel { position: fixed; left: var(--rail-w); right: 0; bottom: var(--bench-h); z-index: 1250; background: var(--d-white); border-top: 1px solid var(--d-line); box-shadow: 0 -12px 34px rgba(19,23,34,.14); max-height: min(24rem, 52vh); overflow-y: auto; } #tps-sc[data-theme="dark"] .traypanel { background: var(--d-ink); border-top-color: var(--d-rule-d); box-shadow: 0 -12px 34px rgba(0,0,0,.5); } #tps-sc .traypanel__in { width: min(100% - var(--sc-gutter) * 2, var(--sc-maxw)); margin: 0 auto; padding: var(--sc-4) 0 var(--sc-5); } #tps-sc .traypanel__h { margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; } #tps-sc:lang(th) .traypanel__h { text-transform: none; letter-spacing: .04em; } #tps-sc .traypanel__x { background: transparent; border: 0; cursor: pointer; color: var(--sc-ink-soft); font-size: 1.4rem; line-height: 1; padding: 0 .2rem; } #tps-sc .traypanel__x:hover { color: var(--sc-ink); } #tps-sc .traypanel__x:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } #tps-sc .traypanel .held { margin-top: var(--sc-3); } #tps-sc .traypanel__f { margin: var(--sc-4) 0 0; display: flex; gap: var(--sc-4); align-items: center; flex-wrap: wrap; } @media (max-width: 1000px) { #tps-sc .traypanel { left: 0; } #tps-sc .bench__see { padding: .62rem .7rem; font-size: .64rem; letter-spacing: .04em; } #tps-sc .bench__go { padding: .62rem .72rem; font-size: .64rem; letter-spacing: .04em; } } @media (max-width: 760px) { #tps-sc .held :is(li,.t-li) { grid-template-columns: 1fr auto; grid-template-areas: "n x" "m x"; gap: .1rem var(--sc-3); align-items: center; } #tps-sc .held__id { display: none; } #tps-sc .held :is(li,.t-li) > span:nth-of-type(2) { grid-area: n; } #tps-sc .held__meta { grid-area: m; } #tps-sc .held__rm { grid-area: x; align-self: center; } #tps-sc .traypanel__f { gap: var(--sc-3); } #tps-sc .traypanel__f .btn2, #tps-sc .traypanel__f .lnk--go { flex: 1 1 8rem; justify-content: center; } } /* ─── bootstrap states: what the page looks like for the moment before tps-sc-boot.js has restored attributes, tags and controls ─── */ #tps-sc .sc-hidden, #tps-sc div.t-dialog, #tps-sc .sc-fill { display: none !important; } #tps-sc .sc-ctl { visibility: hidden; } #tps-sc .sc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } #tps-sc .e-svg-base { display: inline-block; line-height: 0; } #tps-sc .e-svg-base > svg { width: 100%; height: 100%; } /* Jetpack's stats pixel: still loads, takes no space */ #tps-sc #wpstats { display: none; }