.atp-demo{--ink:#244544;--muted:#6b807a;--paper:#f0f1e9;--line:#d8dfd3;color:var(--ink);font-family:inherit}
.atp-demo *{box-sizing:border-box}.atp-demo [hidden]{display:none!important}
.atp-demo button,.atp-demo summary{font:inherit;cursor:pointer;touch-action:manipulation}
.atp-demo button{min-height:44px}.atp-demo button:focus-visible,.atp-demo input:focus-visible,.atp-demo canvas:focus-visible,.atp-demo summary:focus-visible{outline:2px solid #b6893f;outline-offset:3px}
.experience-main:has(.atp-demo){padding-top:10px}.experience-main:has(.atp-demo) .experience-heading{margin:10px 0 18px}.experience-main:has(.atp-demo) .experience-heading h1{font-size:26px}.experience-main:has(.atp-demo) .experience-heading p{display:none}
.atp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:690px;background:#fdfdf7;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.atp-main{min-width:0;display:flex;flex-direction:column;background:var(--paper)}
.atp-views{display:flex;gap:4px;padding:12px 18px 0;background:var(--paper);position:relative;z-index:3}
.atp-views button{background:none;border:0;border-radius:6px;padding:8px 15px;font-size:11px;color:#788a81;position:relative}
.atp-views button[aria-pressed=true]{color:#234f49;background:#ffffffb3;box-shadow:0 1px 4px #263d2b07}
.atp-viewport{height:590px;min-height:420px;position:relative;isolation:isolate;overflow:hidden}
.atp-viewport canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.atp-viewport canvas:active{cursor:grabbing}
.atp-scene-title{position:absolute;left:30px;top:24px;pointer-events:none;max-width:80%}
.atp-scene-title>span{font:8px ui-monospace,monospace;letter-spacing:2px;color:#81968b}
.atp-scene-title h2{font:400 clamp(22px,2.3vw,31px)/1.5 Georgia,'Noto Serif SC',serif;color:#284b45;margin:11px 0 3px;letter-spacing:.03em}
.atp-scene-title p{font-size:10px;color:#7a9185;line-height:1.7;margin:0}
.atp-scene-tools{position:absolute;right:18px;top:20px;display:flex;gap:5px}
.atp-scene-tools button{width:38px;min-height:38px;border:1px solid #c3d2c180;background:#fafbf68c;border-radius:6px;color:#527568;font-size:15px}
.atp-scene-tools button:first-child{font-family:Georgia,serif;font-size:13px}
.atp-leaders{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;overflow:visible}
.atp-leaders path{fill:none;stroke:#7b9b8a80;stroke-width:.8}.atp-leaders circle{fill:#758e7a}
.atp-labels{position:absolute;inset:0;pointer-events:none}
.atp-label{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;min-height:33px!important;font-size:10px!important;padding:6px 10px;background:#f7f9f0e8;border:1px solid #adbfaa70;border-radius:20px;color:#4b6c5d;pointer-events:auto;backdrop-filter:blur(6px)}
.atp-label i{width:5px;height:5px;border-radius:50%;background:var(--part-color)}.atp-label:hover{background:#fff;border-color:#88b29b}
.atp-site-label{position:absolute;transform:translate(-50%,-50%);background:#fbfcf4ed;padding:8px 10px;border:1px solid var(--state-color);border-radius:16px;font-size:10px;color:#455f52;white-space:nowrap}
.atp-compartment{position:absolute;left:28px;pointer-events:none;font:8px ui-monospace,monospace;letter-spacing:1px;color:#779383}.atp-matrix{top:47%}.atp-ims{bottom:88px}
.atp-scale{position:absolute;left:28px;bottom:28px;display:flex;gap:9px;align-items:center;font:9px ui-monospace,monospace;color:#668273;pointer-events:none}.atp-scale i{position:relative;display:block;width:70px;border-top:1px solid #6d8c78;max-width:170px}.atp-scale i:before,.atp-scale i:after{content:'';position:absolute;top:-3px;width:1px;height:6px;background:#6d8c78}.atp-scale i:before{left:0}.atp-scale i:after{right:0}
.atp-scene-note{position:absolute;right:24px;bottom:23px;text-align:right;font:8px ui-monospace,monospace;letter-spacing:1px;color:#6c8878;pointer-events:none}.atp-scene-note small{display:block;margin-top:8px;font-size:7px;color:#8aa08f}
.atp-loading,.atp-error{position:absolute;top:50%;left:20px;right:20px;text-align:center;font-size:12px;background:#f0f1e9ee;padding:20px;color:#597e6e;border-radius:8px}.atp-error{color:#9a4e36}
.atp-transport{margin-top:auto;display:flex;align-items:center;gap:17px;padding:14px 24px;border-top:1px solid #d6dfd080;background:#e9eee1}
.atp-transport>[data-play]{width:43px;min-width:43px;height:44px;border:1px solid #95ad9770;border-radius:50%;background:#fbfcf3;color:#3c6a57;font-size:15px}
.atp-angle{flex:1;min-width:0}.atp-angle label{display:flex;justify-content:space-between;font-size:9px;color:#6d8977;letter-spacing:1px}.atp-angle output{font:10px ui-monospace,monospace;color:#416953}.atp-demo input[type=range]{accent-color:#608c72;cursor:ew-resize;height:24px;display:block;width:100%;margin:4px 0 0;touch-action:pan-x}.atp-step{border:0;background:none;color:#4c735f;font-size:10px!important;padding:3px 0 3px 6px;white-space:nowrap}.atp-step span{display:block;font:10px ui-monospace,monospace;margin-top:4px;color:#75927b}
.atp-panel{padding:27px 25px 20px;border-left:1px solid var(--line);min-width:0;background:#fcfcf6}
.atp-kicker{font:8px ui-monospace,monospace;letter-spacing:1px;color:#8b9f8b}
.atp-narrative h2{font:400 24px/1.65 Georgia,'Noto Serif SC',serif;margin:15px 0 11px;color:#284d41;text-wrap:balance}
.atp-narrative>p{font-size:11px;line-height:1.95;color:#7a8b7b;margin:0;min-height:65px}
.atp-gradient{margin-top:23px}.atp-gradient label{font-size:11px;display:flex;align-items:center;justify-content:space-between;color:#506f59}.atp-gradient output{font:12px ui-monospace,monospace;color:#5f8664}.atp-gradient-ends{display:flex;justify-content:space-between;font-size:8px;color:#9ba995;margin-top:2px}.atp-gradient p{font-size:9px;line-height:1.7;color:#8a9c86;margin:9px 0 13px}
.atp-section{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0;border:0;background:none;color:#6c8370;font-size:10px!important}.atp-section i{width:30px;height:17px;border-radius:12px;background:#afc2a8;position:relative;flex:0 0 auto}.atp-section i:after{content:'';position:absolute;width:11px;height:11px;top:3px;left:16px;border-radius:50%;background:#fff;transition:left .15s}.atp-section[aria-checked=false] i{background:#d4dcd0}.atp-section[aria-checked=false] i:after{left:3px}
.atp-sites{border-top:1px solid #e0e5d8;margin-top:12px;padding-top:19px}.atp-section-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#59735e}.atp-section-heading>span{font:7px ui-monospace,monospace;color:#a0ad98;letter-spacing:1px}.atp-sites-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:13px}.atp-sites-grid button{display:grid;gap:6px;justify-items:start;background:none;border:1px solid #dae2d3;border-radius:7px;padding:10px 8px;color:#69816b}.atp-sites-grid button>span{font:9px ui-monospace,monospace;color:#a2af97}.atp-sites-grid b{font-size:9px;font-weight:400;white-space:nowrap}.atp-sites-grid i{height:2px;width:18px;background:var(--state-color);border-radius:1px}.atp-sites-grid button[aria-pressed=true]{border-color:#8ba57c;background:#f0f5e8}.atp-sites>p{font-size:9px;color:#8c9b83;line-height:1.8;min-height:34px;margin:10px 0 0}
.atp-results{margin:12px 0 0;padding-top:14px;border-top:1px solid #e0e5d8}.atp-results>div{display:flex;align-items:baseline;gap:11px}.atp-results strong{font:400 42px/1.2 Georgia,serif;color:#5c8060}.atp-results>div>span{font-size:9px;color:#9aaa92}.atp-results p{font-size:9px;color:#91a086;line-height:1.8;margin:7px 0}.atp-results b{font-weight:400;color:#6b8b66}
.atp-structure-list{border-top:1px solid #e0e5d8;margin-top:14px;padding-top:8px}.atp-structure-list summary{min-height:34px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#7f947a;list-style:none}.atp-structure-list summary:after{content:'＋'}.atp-structure-list[open] summary:after{content:'−'}.atp-structure-list>div>button{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;padding:3px;font-size:10px;color:#6e876d;text-align:left}.atp-structure-list button i{width:6px;height:6px;border-radius:50%;background:var(--part-color)}.atp-structure-list button>span{margin-left:auto;color:#a5b69c}.atp-structure-list button[aria-pressed=true]{color:#305f43}
.atp-selected{margin-top:12px;padding:14px 0 0;border-top:1px solid #cbd8bf}.atp-selected>div{display:flex;justify-content:space-between;align-items:center}.atp-selected b{font-size:12px;font-weight:500}.atp-selected button{border:0;background:none;color:#8da381;font-size:20px;width:35px;min-height:30px}.atp-selected p{font-size:10px;line-height:1.9;color:#7e9475;margin:3px 0 0}
.atp-bottom-note{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:16px 2px;color:#92a08b;font:8px ui-monospace,monospace;letter-spacing:1px}.atp-bottom-note>span{padding-top:4px}.atp-bottom-note details{max-width:650px;width:48%}.atp-bottom-note summary{text-align:right;min-height:24px;font-size:9px;letter-spacing:0}.atp-bottom-note p{font:11px/1.9 sans-serif;letter-spacing:0;color:#7f9278}.atp-bottom-note a{color:#557e5f;text-decoration:underline}
@media(min-width:1450px){.atp-viewport{height:650px}.atp-layout{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:900px){.atp-layout{grid-template-columns:minmax(0,1fr) 265px}.atp-panel{padding:22px 18px}.atp-scene-title{left:20px}.atp-scene-title h2{font-size:23px}.atp-views{padding-left:10px}.atp-views button{padding:8px 10px;font-size:10px}.atp-viewport{height:610px}.atp-label{font-size:9px!important}.atp-scene-note{right:16px;max-width:55%;line-height:1.7}}
@media(max-width:700px){
 .experience-main:has(.atp-demo){padding:5px 10px 10px}.experience-main:has(.atp-demo) .experience-heading h1{font-size:21px}.experience-main:has(.atp-demo) .experience-heading{margin-bottom:12px}
 .atp-layout{display:flex;flex-direction:column;border-radius:11px;min-height:0}.atp-views{padding:8px 9px 0;gap:2px}.atp-views button{flex:1;padding:7px 3px;font-size:10px;white-space:nowrap}.atp-viewport{height:470px;min-height:0}.atp-scene-title{top:16px;left:19px;max-width:calc(100% - 70px)}.atp-scene-title>span{font-size:7px}.atp-scene-title h2{font-size:23px;line-height:1.5;margin-top:8px;max-width:240px}.atp-scene-title p{font-size:9px;max-width:210px}.atp-scene-tools{right:12px;top:14px;flex-direction:column}.atp-scene-tools button{width:36px;height:38px;min-height:38px}.atp-label{font-size:9px!important;padding:6px 9px;min-height:36px!important}.atp-compartment{left:16px;font-size:7px;letter-spacing:.5px}.atp-matrix{top:47%}.atp-ims{bottom:84px}.atp-scale{left:16px;bottom:26px;font-size:8px;gap:6px}.atp-scale i{max-width:110px}.atp-scene-note{right:15px;bottom:23px;font-size:7px;letter-spacing:.5px}.atp-scene-note small{font-size:6px;letter-spacing:0}.atp-transport{padding:12px 16px;gap:12px}.atp-angle label{font-size:8px}.atp-step{font-size:9px!important}.atp-panel{border-left:0;border-top:1px solid var(--line);padding:23px 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px}.atp-narrative{grid-column:1/-1}.atp-narrative h2{font-size:23px;line-height:1.5;margin:9px 0 8px;text-wrap:initial}.atp-narrative>p{min-height:0;font-size:11px}.atp-kicker{font-size:8px}.atp-gradient{grid-column:1/-1;margin-top:22px}.atp-section{grid-column:1/-1}.atp-sites{grid-column:1/-1;margin-top:5px}.atp-sites-grid b{font-size:10px}.atp-results{grid-column:1/-1;margin-top:2px}.atp-results>div{gap:14px}.atp-results strong{font-size:38px}.atp-results p{margin-bottom:0}.atp-structure-list,.atp-selected{grid-column:1/-1}.atp-bottom-note{display:block;padding:13px 3px;line-height:1.8;font-size:7px}.atp-bottom-note details{width:100%;max-width:none;margin-top:6px}.atp-bottom-note summary{text-align:left}
}
@media(prefers-reduced-motion:reduce){.atp-section i:after{transition:none}}

.atp-scene-tools button{width:44px;min-height:44px;height:44px}.atp-scene-title{max-width:255px}.atp-scene-title h2{font-size:27px}.atp-label{min-height:44px!important}
@media(max-width:700px){.atp-scene-title{display:none}.atp-scene-tools button{width:44px;height:44px;min-height:44px}.atp-demo[data-view=whole] .atp-compartment{display:none}.atp-label{min-height:44px!important}}
.atp-demo[data-view=head] .atp-compartment{display:none}