/* Keep the experiment and its choices in the same field of view. Home stays untouched. */
.ex-case-between .ts-section{display:grid;grid-template-columns:minmax(0,1fr) 285px;grid-template-areas:"heading heading" "presets presets" "stage controls" "guide controls" "explanation explanation";gap:12px 26px;padding:26px var(--pad) 25px;scroll-margin-top:136px}
.ex-case-between .ts-section .section-head{grid-area:heading;margin:0 0 8px;display:flex;align-items:center;gap:30px}
.ex-case-between .ts-section .section-head h2{font-size:clamp(30px,3.1vw,47px);max-width:none;line-height:1.2}
.ex-case-between .ts-section .section-head p{font-size:11px;max-width:29em;line-height:1.7;margin:0}
.ex-case-between .ts-presets{grid-area:presets;display:flex;margin:0 0 4px;gap:10px}
.ex-case-between .ts-presets button[data-ts-preset]{font-size:12px;padding:10px 14px;min-height:40px}
.ex-case-between .ts-stage{grid-area:stage;min-height:0;align-self:start}
.ex-case-between .ts-canvas{height:clamp(250px,39vh,440px);height:clamp(250px,39svh,440px);padding:25px 0 40px}
.ex-case-between .ts-stage-head{top:14px}.ex-case-between .ts-stage-foot{bottom:11px;gap:12px;font-size:10px}
.ex-case-between .ts-controls{grid-area:controls;display:grid;grid-template-columns:1fr 1fr;gap:18px 15px;align-content:start;padding:3px 0 0;border:0}
.ex-case-between .ts-controls .ts-word{grid-column:1/-1}.ex-case-between .ts-controls label{font-size:11px;gap:9px}
.ex-case-between .ts-controls .ts-word input{min-height:42px;padding:7px 10px;font-size:21px}
.ex-case-between .ts-actions{grid-column:1/-1;display:flex;flex-direction:row;gap:20px;justify-content:space-between;font-size:11px;padding-top:6px}
.ex-case-between .ts-guide-status{grid-area:guide;min-height:1.7em;margin:0;font-size:11px}
.ex-case-between .ts-explanation{grid-area:explanation;margin:0;font-size:11px;border-top:1px solid #153dda35;padding-top:12px}
.ex-case-between #ts-status:empty{display:none}.ex-case-between #ts-status{grid-column:1/-1;margin:0;font-size:11px}
.lab[data-lab=aftergrowth] .lab-canvas{background:#f2f1ec}.lab[data-lab=aftergrowth] [data-nature-drag]{touch-action:none}
.tea-view-switch{display:none}
.lab[data-lab=chuodui] .lab-panel h3{font:600 16px 'Noto Sans SC',sans-serif}.lab[data-lab=chuodui] .lab-field{margin:13px 0}.lab[data-lab=chuodui] .lab-field input{margin-top:6px;min-height:40px;font-size:14px}
.lab[data-lab=chuodui] .lab-options{margin:9px 0 13px}.lab[data-lab=chuodui] .lab-options button{font-size:11px;padding:8px 5px;white-space:normal}
.tea-specs>span{font-size:11px}.lab-panel [data-tea-stick]{display:block;width:100%;text-align:center;background:#342e28;color:#fffdf7;padding:11px;border:0;margin-top:16px}
.architecture-entry .architecture-aside{display:block;font-size:12px;line-height:1.7;color:#59657c;margin-top:9px;max-width:38em}.architecture-aside em{font-style:normal;font-weight:600;color:#153dda;margin-right:12px}
.contact-title{width:100%;text-align:left;border:0;color:inherit;cursor:pointer}.contact-title:focus-visible{outline:2px solid white;outline-offset:10px}.contact-title>b small{display:block;font-size:12px;line-height:1.5;letter-spacing:0;white-space:nowrap;margin-top:12px}
.contact-title:hover>b{transform:translate(6px,-6px)}
.contact-card{width:min(700px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);padding:0;border:0;background:#fafbf9;color:#172347;box-shadow:0 30px 110px #09132b40;overflow:auto;border-radius:4px}
.contact-card::backdrop{background:#10214966;backdrop-filter:blur(7px)}
.contact-card[open]{animation:contact-appear .35s cubic-bezier(.2,.75,.2,1)}
@keyframes contact-appear{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.contact-card-header{padding:28px 31px 22px;border-bottom:1px solid #d7dce4;display:flex;align-items:start;justify-content:space-between;gap:20px;background:#e8edf5}
.contact-card-header small{font:400 12px Archivo,sans-serif;color:#53678b}.contact-card-header h2{font-size:31px;letter-spacing:-.04em;margin-top:9px;font-weight:600}
.contact-card-close{width:36px;height:36px;display:grid;place-items:center;font-size:25px;border:1px solid #a4aec1;border-radius:50%;color:#153dda;line-height:1}
.contact-card-body{display:grid;grid-template-columns:260px 1fr;gap:34px;padding:30px 31px 24px;align-items:center}
.contact-qr{margin:0;text-align:center}.contact-qr-window{position:relative;width:248px;height:248px;background:white;overflow:hidden;border:1px solid #dce1e7}
.contact-qr-window img{position:absolute;max-width:none;width:136.6153846%;height:auto;left:-18.4615385%;top:-44%}
.contact-qr figcaption{font-size:12px;margin-top:13px;color:#59657c}.contact-qr>a{display:inline-block;font-size:11px;margin-top:10px;border-bottom:1px solid #9ba6ba;padding-bottom:3px}
.contact-card-details .contact-person{font-size:25px;font-weight:550;line-height:1.35;letter-spacing:-.03em}.contact-person span{display:block;font:400 16px/1.6 Archivo,sans-serif;color:#6f7d94;margin-top:4px}
.contact-card-details>p{font-size:12px;color:#66728a;line-height:1.8;margin-top:17px;max-width:20em}
.contact-card-details dl{margin-top:24px}.contact-card-details dl>div{padding:13px 0;border-top:1px solid #dce1e7;display:grid;grid-template-columns:1fr auto;gap:8px}.contact-card-details dt{grid-column:1/-1;font-size:10px;color:#6a7791}.contact-card-details dd{font-size:14px;overflow-wrap:anywhere;min-width:0;align-self:center;font-family:Archivo,sans-serif}.contact-card-details button{font-size:11px;color:#153dda;border:1px solid #c4cede;padding:5px 8px;min-height:32px}
.contact-card-status{min-height:1.6em;font-size:11px;line-height:1.6;color:#153dda;padding:0 31px 18px}.contact-card :focus-visible{outline:2px solid #153dda;outline-offset:3px}
@media(max-width:900px){.ex-case-between .ts-section{grid-template-columns:minmax(0,1fr) 250px;gap:12px 19px}.ex-case-between .ts-section .section-head p{max-width:24em}.ex-case-between .ts-stage-foot>span{display:none}}
@media(max-width:759px){
 .tea-view-switch{display:block;margin-bottom:12px}.tea-view-switch .lab-options{display:grid;grid-template-columns:1fr 1fr}.tea-view-switch button{min-height:40px}.lab[data-lab=chuodui] .lab-field input{font-size:16px}
 .lab[data-lab=chuodui] .lab-canvas:has(.tea-flat-ticket):not(:has(.tea-on-cup)){aspect-ratio:500/640;background:#e9e3d7}
 .ex-case-between .ts-section{display:flex;flex-direction:column;padding:24px var(--pad);gap:13px;scroll-margin-top:124px}.ex-case-between .ts-section .section-head{display:block;margin:0}.ex-case-between .ts-section .section-head h2{font-size:30px}.ex-case-between .ts-section .section-head p{font-size:11px;margin-top:10px;max-width:100%}
 .ex-case-between .ts-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;position:relative;margin-top:0;width:100%}.ex-case-between .ts-presets button[data-ts-preset]{justify-content:center;flex-direction:column;gap:7px;min-height:58px;padding:8px 2px;font-size:10px;white-space:nowrap}.ex-case-between .ts-presets button[data-ts-preset] i{width:7px;height:7px}.ex-case-between .ts-presets #ts-replay{grid-column:1/-1;min-height:26px;justify-self:end;padding:0;font-size:10px;margin:0}
 .ex-case-between .ts-stage{width:100%}.ex-case-between .ts-canvas{height:220px;min-height:0;padding:28px 0 36px}.ex-case-between .ts-stage-head{font-size:9px}.ex-case-between .ts-stage-foot{bottom:6px;justify-content:space-between}.ex-case-between .ts-stage-foot button{font-size:10px}
 .ex-case-between .ts-controls{width:100%;grid-template-columns:1fr 1fr;gap:15px;margin-top:0}.ex-case-between .ts-controls .ts-word{grid-column:auto}.ex-case-between .ts-controls .ts-word input{font-size:18px;min-height:39px}.ex-case-between .ts-controls .ts-actions{grid-column:auto;flex-direction:column;gap:8px;justify-content:center}.ex-case-between .ts-guide-status{order:0;font-size:10px;min-height:0;line-height:1.65;margin:0}.ex-case-between .ts-explanation{font-size:10px;line-height:1.75}
 .architecture-entry .architecture-aside{font-size:10px;line-height:1.7;margin-top:7px}.architecture-aside em{display:block;margin-right:0}.contact-title>b small{font-size:9px;margin-top:7px}
 .contact-card{max-width:390px}.contact-card-header{padding:22px 23px 19px}.contact-card-header h2{font-size:26px}.contact-card-body{grid-template-columns:1fr;gap:23px;padding:22px 23px 10px}.contact-qr-window{width:216px;height:216px;margin-inline:auto}.contact-qr figcaption{margin-top:9px;font-size:11px}.contact-qr>a{margin-top:7px}.contact-card-details .contact-person{font-size:21px;display:flex;gap:13px;align-items:baseline}.contact-person span{font-size:13px;margin:0}.contact-card-details>p{margin-top:7px;max-width:none}.contact-card-details dl{margin-top:12px}.contact-card-details dl>div{padding:9px 0}.contact-card-status{padding:0 23px 15px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.contact-card[open]{animation:none}}