:root{--sample-1-a:#3b4652;--sample-1-b:#d9c9a6;--sample-2-a:#7a3f2c;--sample-2-b:#cfc6b8;--sample-3-a:#4d5233;--sample-3-b:#ece2c4;--sample-4-a:#4f3a4f;--sample-4-b:#cfd0d4;--sample-5-a:#3e5653;--sample-5-b:#e6dfcf;--sample-6-a:#823b31;--sample-6-b:#e3d5b8;--sample-ink:#f6f2e8}.th-box{aspect-ratio:1224/780;width:100%;position:relative;container-type:size}.th-box[data-box=phone]{aspect-ratio:410/776;max-width:380px;margin-inline:auto}@media (max-width:839.98px){.th-box[data-box=auto]{aspect-ratio:410/776;max-width:380px;margin-inline:auto}}.th-frame{--fw:1200;--fh:720;--fc:36;--fb:12;--ow:calc(var(--fw) + 2 * var(--fb));--oh:calc(var(--fh) + var(--fc) + 2 * var(--fb));--k:min(tan(atan2(100cqw, calc(var(--ow) * 1px))), tan(atan2(100cqh, calc(var(--oh) * 1px))));width:calc(var(--ow) * 1px);height:calc(var(--oh) * 1px);transform-origin:0 0;transform:translate(calc((100cqw - var(--ow) * 1px * var(--k)) / 2), calc((100cqh - var(--oh) * 1px * var(--k)) / 2)) scale(var(--k));padding:calc(var(--fb) * 1px);border-radius:calc(var(--radius-board) / var(--k,1));background-color:var(--color-board);box-shadow:0 0 0 1px var(--color-board-edge);color:var(--color-on-board);-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0}@media (max-width:839.98px){.th-frame[data-auto]{--fw:390;--fb:10}}.th-strip{height:calc(var(--fc) * 1px);justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:10px;display:flex}.th-address{border-radius:var(--radius-flap);background-color:var(--color-flap);min-width:0;max-width:60%;height:26px;box-shadow:var(--shadow-flap);color:var(--color-on-board);font-family:var(--font-mono);white-space:nowrap;align-items:center;padding:0 10px;font-size:12px;line-height:1;display:inline-flex;position:relative}.th-address[data-external]{padding-left:14px}.th-address[data-external]:before{content:"";border-radius:var(--radius-flap) 0 0 var(--radius-flap);background-color:var(--color-board-info);width:3px;position:absolute;top:0;bottom:0;left:0}.th-strip-end{flex-shrink:0;align-items:center;gap:12px;height:26px;display:inline-flex}.th-remark .flap-row{font-size:12px}.th-sample{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-board-muted);white-space:nowrap;font-size:11px;font-weight:700}.th-screen{width:calc(var(--fw) * 1px);height:calc(var(--fh) * 1px);isolation:isolate;background-color:var(--color-bg);color:var(--color-text);border-radius:4px;position:relative;overflow:hidden}.th-content{width:100%;height:100%;position:relative;overflow:hidden;container-type:inline-size}.th-content :where([data-surface=board]){color:var(--color-on-board)}.th-cursor{z-index:50;pointer-events:none;opacity:0;transition:opacity .2s var(--ease-std);position:absolute;top:0;left:0}.th-cursor[data-on]{opacity:1}.th-cursor>[data-shape]{display:none;position:absolute}.th-cursor[data-mode=pointer]>[data-shape=pointer],.th-cursor[data-mode=text]>[data-shape=text],.th-cursor[data-mode=touch]>[data-shape=touch]{display:block}.th-cursor [data-shape=pointer]{transform-origin:2px 2px;transition:transform .1s var(--ease-sign);top:-2px;left:-2px}.th-cursor-fill{fill:var(--color-text);stroke:var(--color-bg)}.th-cursor [data-shape=text]{background-color:var(--color-text);width:2px;height:22px;box-shadow:0 0 0 1px var(--color-bg);top:-11px;left:-1px}.th-cursor [data-shape=touch]{border:2px solid var(--color-accent);width:28px;height:28px;transition:transform .24s var(--ease-sign), opacity .24s var(--ease-std);border-radius:50%;top:-14px;left:-14px}.th-cursor[data-down] [data-shape=pointer]{transform:scale(.88)}.th-cursor[data-down] [data-shape=touch]{transform:scale(.6)}.th-ring{border:2px solid var(--color-accent);opacity:0;border-radius:50%;width:28px;height:28px;position:absolute;top:-14px;left:-14px}.th-cursor[data-mode=touch] .th-ring[data-pulse]{animation:th-ring .24s var(--ease-sign) forwards}@keyframes th-ring{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1)}}.th-content [data-press]{transform:translateY(1px)}.th-content [data-demo]{transition-property:transform,background-color,border-color,color,box-shadow,opacity;transition-duration:var(--dur-ui);transition-timing-function:var(--ease-sign)}.th-content [data-hover].departure{border-color:var(--color-border-hover);box-shadow:var(--shadow-card-hover)}.th-content [data-hover].departure [data-card-link]{text-decoration-line:underline;text-decoration-thickness:2px;-webkit-text-decoration-color:var(--color-link-line);text-decoration-color:var(--color-link-line);text-underline-offset:3px}.th-content [data-hover]:is(button,[role=button]){filter:brightness(1.04)}.th-spot{z-index:40;pointer-events:none;opacity:0;outline:2px solid var(--color-accent);outline-offset:0;box-shadow:0 0 0 100vmax var(--color-scrim);transition:opacity .25s var(--ease-std), left .3s var(--ease-sign), top .3s var(--ease-sign), width .3s var(--ease-sign), height .3s var(--ease-sign);border-radius:6px;position:absolute}.th-tip{z-index:41;pointer-events:none;opacity:0;border-radius:var(--radius-control);background-color:var(--color-raised);max-width:300px;color:var(--color-text);box-shadow:var(--shadow-overlay);transition:opacity .25s var(--ease-std), transform .25s var(--ease-sign);padding:10px 12px;font-size:14px;line-height:1.45;position:absolute;transform:translateY(4px)}.th-spot[data-on],.th-tip[data-on]{opacity:1;transform:none}.th-root[data-paused] .th-frame *,.th-root[data-paused] .th-frame :before,.th-root[data-paused] .th-frame :after{animation-play-state:paused!important}.th-knob{border:1.5px solid var(--color-text);width:44px;height:44px;color:var(--color-text);cursor:pointer;transition:background-color var(--dur-micro) var(--ease-std);background-color:#0000;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.th-knob:active{transform:translateY(1px)}@media (hover:hover) and (pointer:fine){.th-knob:hover{background-color:var(--color-bg-secondary)}}.th-tabs{border-radius:var(--radius-board);border:1px solid var(--color-board-edge);background-color:var(--color-board);color:var(--color-on-board);flex-direction:column;padding:6px;display:flex;position:relative}.th-tab{cursor:pointer;text-align:left;min-height:48px;color:var(--color-on-board);transition:background-color var(--dur-micro) var(--ease-std);border-radius:4px;grid-template-columns:auto minmax(0,1fr) auto 7.5em;align-items:center;column-gap:14px;padding:0 10px;display:grid;position:relative}.th-tab+.th-tab{box-shadow:0 -1px 0 var(--color-board-edge)}.th-tab[data-active]{background-color:var(--color-flap);box-shadow:none}.th-tab[data-active]+.th-tab{box-shadow:none}@media (hover:hover) and (pointer:fine){.th-tab:not([data-active]):hover{background-color:color-mix(in srgb, var(--color-flap) 55%, var(--color-board))}}.th-tab:focus-visible{outline:2px solid var(--color-focus-on-board);outline-offset:-2px}.th-tab-label{font-family:var(--font-display);padding-top:2px;font-size:15px;font-weight:700;line-height:1.1}.th-tab-time{font-family:var(--font-mono);color:var(--color-on-board-muted);font-size:12px}.th-tab-remark{justify-content:flex-end;display:flex}.th-layout{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}.th-layout-split{grid-template-areas:"head""tabs""stage""steps";gap:24px}.th-layout-head{grid-area:head}.th-layout-tabs{grid-area:tabs;min-width:0}.th-layout-stage{grid-area:stage;min-width:0}.th-layout-steps{grid-area:steps;min-width:0}@media (max-width:1023.98px){.th-layout-split .th-tabs{margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter);scroll-padding-inline:var(--gutter);border-inline:0;border-radius:0;flex-direction:row;gap:4px;overflow-x:auto}.th-layout-split .th-tab{min-height:44px;box-shadow:none;flex:none;grid-template-columns:auto auto}.th-layout-split .th-tab-time,.th-layout-split .th-tab-remark{display:none}}@media (min-width:1024px){.th-layout-split{grid-template:"stage head""stage tabs""stage steps"1fr/minmax(0,8fr) minmax(0,4fr);align-items:start;gap:28px 48px}}.th-steps{margin:0;padding:0;list-style:none}.th-step{grid-template-columns:14px minmax(0,1fr);column-gap:14px;padding-bottom:16px;display:grid;position:relative}.th-step:not(:last-child):before{content:"";background-color:var(--color-stop);width:3px;position:absolute;top:14px;bottom:0;left:5.5px}.th-step[data-state=current]:before,.th-step[data-state=upcoming]:before{border-left:3px dashed var(--color-rule);background-color:#0000;width:0}.th-step-stop{z-index:1;border:3px solid var(--color-stop);background-color:var(--color-bg);width:14px;height:14px;color:var(--color-bg);border-radius:50%;justify-content:center;align-items:center;margin-top:4px;display:inline-flex;position:relative}.th-step[data-state=done] .th-step-stop{background-color:var(--color-stop)}.th-step[data-state=current] .th-step-stop{background-color:var(--color-accent)}.th-step[data-state=upcoming] .th-step-stop{border-color:var(--color-rule)}.th-step-text{color:var(--color-text);font-size:15px;line-height:1.45}.th-step[data-state=upcoming] .th-step-text,.th-step[data-state=done] .th-step-text{color:var(--color-text-secondary)}.th-mini .th-frame{box-shadow:0 0 0 1px var(--color-board-edge)}.th-rise{animation:sign-in var(--dur-panel) var(--ease-sign) calc(var(--i,0) * 70ms) both}.th-slide{animation:th-slide var(--dur-panel) var(--ease-sign) both}@keyframes th-slide{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}.th-arrive{animation:th-arrive .26s var(--ease-sign) both}@keyframes th-arrive{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.th-pop{animation:panel-drop var(--dur-ui) var(--ease-sign) both}.th-caret{vertical-align:-.18em;background-color:var(--color-text);width:2px;height:1.1em;margin-left:1px;display:inline-block}@media (prefers-reduced-motion:reduce){.th-rise,.th-slide,.th-arrive,.th-pop{animation:none}}