:root{--maroon:#c30909;--ink:#42251d;--muted:#816552;--line:#e3c9af;--panel:#ffffffef}*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,Helvetica,sans-serif;color:var(--ink);background:#f5e3d1;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 12px;border-radius:9px;min-height:42px}button:hover{background:#faeddc}button.active{background:var(--maroon);color:#fff;border-color:var(--maroon)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e46242;outline-offset:2px}header{position:fixed;z-index:4;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;pointer-events:none;color:var(--maroon);text-align:left}.brand{font-weight:700;font-size:34px}.brand span{font-size:23px}h1{font:26px/1.2 Arial,Helvetica,sans-serif;margin:0}h1 span{font-family:Arial,sans-serif;font-size:12px;letter-spacing:1px;display:block;margin-top:5px}header p{font-size:12px;margin:5px 0;color:var(--muted)}.edition{display:none}main{height:100dvh;position:relative}.workspace{position:absolute;inset:0}#viewport{position:absolute;inset:0;overflow:hidden}canvas{display:block;touch-action:none}aside{position:absolute;z-index:5;background:var(--panel);backdrop-filter:blur(14px);border:1px solid #fff;box-shadow:0 7px 30px #4c173b0a;border-radius:20px;padding:20px;overflow:auto;scrollbar-width:thin;scrollbar-color:#d7c1ca transparent}.program-panel{left:14px;top:14px;bottom:14px;width:270px}.inspector{right:14px;top:330px;bottom:14px;width:270px}.control-panel{right:14px;top:14px;width:270px;height:302px}.section-title{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.section-title strong{font:21px Arial,Helvetica,sans-serif;color:var(--maroon)}.section-title span{margin-left:auto}.help{font-size:14px;line-height:1.6;color:var(--muted);margin:12px 0}nav{display:flex;gap:5px;margin:14px 0}nav button{flex:1;padding:7px 0;font-size:14px}#palette{display:grid;gap:7px}.card{width:100%;text-align:left;display:flex;gap:10px;align-items:center;border-color:transparent;background:transparent;padding:10px 4px;border-bottom:1px solid var(--line);border-radius:0}.card b{background:var(--c);color:#fff;font-size:21px;font-weight:700;min-width:59px;text-align:center;padding:4px;border-radius:7px}.card span{min-width:0}.card span strong{font-size:14px;font-weight:500}.card small{display:none}.card.selected{border:1px solid var(--c);border-radius:10px;background:#fff}.footnote{margin-top:18px;font-size:13px;color:var(--muted)}.toolbar{display:block}.views{display:flex;gap:4px}.views button{flex:1;font-size:13px;padding:6px}.layers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.layers label{font-size:14px;display:flex;align-items:center;gap:7px}input[type=checkbox]{accent-color:var(--maroon);width:17px;height:17px}h2{font:21px Arial,Helvetica,sans-serif;margin:0 0 14px;color:var(--maroon)}.caption{position:absolute;top:110px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:1.7px;color:#906d7c;text-align:center;pointer-events:none}.caption span{display:block;margin-top:5px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#f5e3d1;z-index:3}#status{position:absolute;bottom:98px;left:50%;transform:translateX(-50%);max-width:calc(100% - 600px);font-size:14px;padding:9px 15px;border-radius:12px;background:#fffffff0;text-align:center;pointer-events:none}.camera-help{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--muted);white-space:nowrap;pointer-events:none}.bottom{position:absolute;z-index:4;bottom:38px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid #fff;box-shadow:0 5px 25px #4c173b0a;border-radius:16px;display:flex;gap:18px;padding:11px 16px;align-items:center;max-width:calc(100% - 600px)}.bottom div:last-child{display:flex;gap:5px}.bottom button{font-size:12px;white-space:nowrap;padding:6px 10px;min-height:36px}#summary{font-size:13px;white-space:nowrap}#summary strong{font-size:22px;color:var(--maroon)}#summary span{display:block;font-size:11px;color:var(--muted)}.rule{border-top:1px solid var(--line);margin:22px 0}.count{display:flex;gap:7px;align-items:center;font-size:13px;margin:12px 0}.count strong{margin-left:auto}.swatch{width:8px;height:8px;border-radius:50%;background:var(--c)}.bar{height:3px;background:#eee6e9;margin-top:-7px}.bar i{display:block;height:3px;background:var(--c)}details{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;font-size:14px}summary{cursor:pointer;color:var(--maroon)}details label{display:flex;justify-content:space-between;align-items:center;margin:14px 0;gap:8px}details input[type=number]{width:75px;border:1px solid var(--line);padding:5px;border-radius:5px}.concept{font-size:12px;color:var(--muted);margin-top:25px;letter-spacing:1px}.concept strong{color:var(--maroon)}.concept p{letter-spacing:0}#selection h3{font-size:30px;margin:14px 0 0}#selection p{margin:8px 0 14px}.program-description{font-size:15px;line-height:1.65}#selection button{font-size:14px;margin:3px 2px 0 0}#selection select{width:100%;font-size:14px;border:1px solid var(--line);padding:9px;border-radius:8px;margin-top:12px}.panel-close,.mobile-dock{display:none}
@media(min-width:761px) and (max-width:1200px){.program-panel{width:230px}.inspector,.control-panel{width:230px}header{top:20px}h1{font-size:22px}.bottom{max-width:calc(100% - 510px);flex-wrap:wrap;justify-content:center;gap:5px}#status{max-width:calc(100% - 510px);bottom:140px}.camera-help{display:none}.bottom #summary span{display:none}}
@media(max-width:760px){header{top:max(16px,env(safe-area-inset-top));left:20px;transform:none}.brand{font-size:30px}h1{font-size:23px}header p{font-size:11px}.caption{top:100px;left:20px;transform:none;text-align:left;font-size:10px}aside{display:none;left:10px!important;right:10px!important;top:auto!important;bottom:calc(78px + env(safe-area-inset-bottom))!important;width:auto!important;height:auto!important;max-height:46dvh;border-radius:20px;padding:20px}.mobile-open{display:block}.panel-close{display:block;position:sticky;top:0;float:right;border:0;border-radius:50%;width:40px;min-height:40px;font-size:25px;margin:-8px -8px 0 5px;background:#f5e9ee}.mobile-dock{display:flex;position:absolute;z-index:7;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;gap:6px;padding:7px;margin:0;background:var(--panel);border-radius:18px;box-shadow:0 5px 25px #4c173b12}.mobile-dock button{font-size:14px;min-height:44px}.bottom{bottom:calc(86px + env(safe-area-inset-bottom));left:12px;right:12px;transform:none;max-width:none;padding:10px 12px;gap:8px;justify-content:space-between}.bottom div:last-child{flex-wrap:wrap;justify-content:flex-end}.bottom button{font-size:11px;min-height:36px;padding:5px 7px}#summary{font-size:12px}#summary span{font-size:10px}#summary strong{font-size:20px}#status{bottom:calc(157px + env(safe-area-inset-bottom));max-width:calc(100% - 36px);width:max-content;font-size:13px}.camera-help{display:none}#palette{grid-template-columns:1fr 1fr}.card{align-items:center}.card b{min-width:52px;font-size:18px}.card span strong{font-size:13px}.toolbar .views button{min-height:44px}.layers{gap:16px}.control-panel .help{margin-bottom:0}.footnote{margin-top:12px}.concept{display:none}}
@media(max-width:380px){#palette{grid-template-columns:1fr}.bottom{flex-wrap:wrap;justify-content:center}.bottom #summary span{display:none}header p{max-width:240px}#status{bottom:175px}}
/* Illustrated program cards and per-cell editing */
.card{display:block;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:white;margin:0 0 10px}.card:hover{border-color:var(--c);background:white}.card.selected{border:2px solid var(--maroon);box-shadow:0 0 0 2px #c3090930;border-radius:12px}.card img{display:block;width:100%;height:auto;aspect-ratio:153.12/240.96;object-fit:contain}.card .card-action{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;gap:8px}.card .card-action b{font-size:17px;min-width:48px;padding:3px;border-radius:5px}.card .card-action span{font-size:12px;color:var(--maroon)}.detail-card{display:block;width:100%;height:auto;border-radius:10px;margin-top:14px}.installed-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}.installed-row small{display:block;font-size:12px;color:var(--muted)}.installed-row button{font-size:13px;color:var(--maroon);padding:7px 10px;min-height:40px}.credits{position:fixed;z-index:4;bottom:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;color:var(--muted)}.credits a{color:var(--maroon);text-decoration:none}.credits a:hover{text-decoration:underline}.credits button{padding:0 0 0 8px;border:0;border-left:1px solid #cdb8c2;border-radius:0;background:transparent;min-height:24px;font-size:12px;color:var(--maroon)}.camera-help{display:none}header h1{font-size:24px}header h1 span{font:20px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0}dialog{border:1px solid #ead9e0;border-radius:22px;max-width:570px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;padding:32px;color:var(--ink);background:#fff;box-shadow:0 25px 100px #350d2630}dialog::backdrop{background:#32142570;backdrop-filter:blur(5px)}.disclaimer-kicker{font-size:11px;letter-spacing:1.2px;color:var(--muted);margin-bottom:15px}dialog h2{font-size:29px;line-height:1.25;margin-bottom:20px}dialog p{font-size:16px;line-height:1.75;margin:0 0 24px}dialog button{background:var(--maroon);color:white;border-color:var(--maroon);width:100%;min-height:48px}dialog button:hover{background:#56162a}
@media(max-width:760px){#palette{grid-template-columns:1fr}.card{max-width:350px;width:100%;margin:0 auto 12px}.detail-card{max-width:350px;margin:14px auto}.credits{top:96px;bottom:auto;left:20px;transform:none;font-size:11px;gap:6px}.credits button{font-size:11px;min-height:30px}.caption{display:none}header h1{font-size:22px}header h1 span{font-size:19px}.program-panel.mobile-open{max-height:55dvh}.card .card-action span{font-size:14px}.card .card-action b{font-size:20px}dialog{padding:24px}dialog h2{font-size:26px}dialog p{font-size:15px;line-height:1.7}}
/* Smaller sans-serif hierarchy; readable card explanations */
body,button,input,select,header h1,header h1 span,h2,.section-title strong{font-family:Arial,Helvetica,sans-serif}header h1{font-size:20px;line-height:1.35;font-weight:600}header h1 span{font-size:18px;font-weight:400;line-height:1.4}.section-title strong,h2{font-size:18px;font-weight:600}.program-description{font-size:14px}#selection h3{font-size:26px}dialog h2{font-size:23px;line-height:1.35}dialog p{font-size:14px;line-height:1.7}.program-entry{margin-bottom:14px}.program-entry .card{margin-bottom:5px}.read-card{display:block;width:100%;font-size:13px;min-height:40px;color:var(--maroon);border-color:var(--line);background:#fff}.blank-card{aspect-ratio:153.12/240.96;background:#faf0e4;border:1px solid #e3c9af;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;color:#816552;width:100%;padding:20px;text-align:center}.blank-card span{font-size:16px}.blank-card strong{font-size:23px;font-weight:500}.blank-card small{display:block;font-size:13px;color:#816552}.blank-card.detail-card{max-width:350px}#program-info{width:calc(100% - 28px);max-width:680px;padding:26px}#program-info-close{float:right;position:sticky;top:0;width:auto;font-size:13px;min-height:40px;padding:8px 16px;margin:0 0 10px 12px;background:white;color:var(--maroon);z-index:1}#program-info-title{padding-top:6px}.info-category{font-size:12px!important;color:var(--muted);margin:4px 0 10px!important}.info-description{font-size:16px!important;line-height:1.7!important}.info-card{display:block;width:100%;max-width:480px;height:auto;margin:18px auto 0;border-radius:8px}#program-info .blank-card{max-width:400px;margin:auto}.program-entry .card img{height:auto}#filters button{font-size:13px}
@media(max-width:760px){header h1{font-size:19px}header h1 span{font-size:17px}.section-title strong,h2{font-size:17px}.program-entry{width:100%;max-width:350px;margin:0 auto 16px}#program-info{padding:20px}dialog h2{font-size:21px}.credits{top:88px}.blank-card strong{font-size:22px}}
/* Bottom arc carousel */
.program-panel{left:14px;right:300px;top:auto;bottom:38px;width:auto;height:300px;padding:10px 14px;border-radius:20px;overflow:hidden;display:block}.program-panel>.section-title,.program-panel>.panel-close{display:none}.carousel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.carousel-heading p{font-size:12px;color:var(--muted);margin:0}.carousel-heading>div{display:flex;gap:5px}.carousel-heading button{font-size:21px;min-height:30px;padding:0 10px}#filters{margin:6px 0;overflow-x:auto;white-space:nowrap;gap:4px;scrollbar-width:none}#filters button{flex:none;font-size:12px;min-height:28px;padding:3px 9px;border-radius:7px}#filters .category-info{width:25px;padding:0;border-radius:50%;margin-right:7px;font-size:12px;color:var(--maroon);font-weight:bold}#palette{display:flex!important;position:relative;gap:28px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;height:233px;padding:4px calc(50% - 59px) 28px;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x}#palette::-webkit-scrollbar{display:none}.program-entry{flex:0 0 118px;width:118px;max-width:118px;margin:0;scroll-snap-align:center;transform-origin:50% 70%;transition:transform .15s ease}.program-entry .card{margin:0 0 4px;border-radius:9px}.program-entry .card img{width:100%;height:180px;object-fit:contain;background:var(--c);aspect-ratio:auto}.program-entry .card-action{padding:3px 5px;gap:4px}.program-entry .card-action b{font-size:12px;min-width:32px;padding:0 2px}.program-entry .card-action span{font-size:11px}.program-entry .read-card{font-size:11px;min-height:28px;padding:3px;border-radius:7px}.program-entry .blank-card{height:180px;aspect-ratio:auto;padding:10px;gap:8px}.program-entry .blank-card strong{font-size:17px}.program-entry .blank-card small{font-size:10px}.program-entry .blank-card span{font-size:12px}.bottom{bottom:350px;max-width:calc(100% - 330px);left:calc((100% - 284px)/2);gap:10px;padding:7px 12px}#viewport{bottom:335px;right:284px}#status{bottom:24px;max-width:90%}.inspector{bottom:38px;top:365px}.control-panel{height:337px}.opacity-control{display:block;margin-top:14px;font-size:13px}.opacity-control span{display:flex;justify-content:space-between}.opacity-control output{color:var(--maroon)}.opacity-control input{width:100%;accent-color:var(--maroon);height:24px;margin:4px 0 0;cursor:pointer}header{left:calc((100% - 284px)/2)}.caption{top:103px}.credits{left:calc((100% - 284px)/2)}
@media(max-width:1200px) and (min-width:761px){.program-panel{right:254px}.bottom{max-width:calc(100% - 270px);left:calc((100% - 244px)/2);flex-wrap:nowrap;gap:9px}#viewport{right:244px}.bottom #summary span{display:none}header,.credits{left:calc((100% - 244px)/2)}}
@media(max-width:760px){.program-panel{display:block!important;left:8px!important;right:8px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;top:auto!important;max-height:none!important;height:286px!important;width:auto!important;padding:9px;border-radius:16px;z-index:4}.program-panel.mobile-open{max-height:none}.carousel-heading p{font-size:11px}.carousel-heading button{min-height:28px}#filters button{font-size:11px}#palette{height:226px;gap:24px;padding-top:3px}.program-entry{flex-basis:112px;width:112px;max-width:112px}.program-entry .card{max-width:none;margin:0 0 4px}.program-entry .card img{height:172px}.program-entry .card-action b{font-size:12px}.program-entry .card-action span{font-size:11px}.program-entry .read-card{font-size:11px}.program-entry .blank-card{height:172px}.bottom{bottom:calc(367px + env(safe-area-inset-bottom));left:8px;right:8px;max-width:none;gap:4px;padding:6px 9px;flex-wrap:nowrap}.bottom #summary{font-size:11px}.bottom #summary span{display:none}.bottom button{font-size:10px;min-height:30px;padding:3px 5px}.bottom #summary strong{font-size:17px}#viewport{bottom:calc(358px + env(safe-area-inset-bottom));right:0}#status{bottom:10px;max-width:95%;font-size:11px;padding:5px 9px}header{left:16px;top:12px;transform:none}.credits{left:16px;top:79px;transform:none}header h1{font-size:17px}header h1 span{font-size:15px}header p{font-size:10px;margin-top:2px}.inspector.mobile-open,.control-panel.mobile-open{bottom:calc(72px + env(safe-area-inset-bottom))!important;max-height:70dvh;z-index:6}.opacity-control{font-size:14px}.mobile-dock{z-index:7}.mobile-dock button{font-size:13px}.program-entry{transition:none}}
@media(prefers-reduced-motion:reduce){.program-entry{transition:none}#palette{scroll-behavior:auto}}
.program-panel{height:340px}#palette{height:273px}.bottom{bottom:390px}#viewport{bottom:375px}@media(max-width:760px){.program-panel{height:326px!important}#palette{height:266px}.bottom{bottom:calc(407px + env(safe-area-inset-bottom))}#viewport{bottom:calc(398px + env(safe-area-inset-bottom))}}
/* Compact transparent carousel, with category controls underneath */
header{left:22px;top:20px;transform:none}header h1,header h1 span{font-weight:600;font-size:19px;line-height:1.35}header h1 span{margin-top:3px}.program-panel{height:280px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:4px 12px 38px;display:flex;flex-direction:column;overflow:hidden}.carousel-heading{position:absolute;bottom:4px;right:12px;z-index:2}.carousel-heading p{display:none}.carousel-heading button{background:#ffffffd9;min-height:30px}.program-panel #palette{order:0;flex:1;height:234px;min-height:0;gap:25px;padding:6px calc(50% - 52px) 22px}.program-panel #filters{position:absolute;left:12px;right:88px;bottom:4px;margin:0;min-height:30px;align-items:center;padding:0}.program-panel #filters button{background:#ffffffdc;border-color:#d9cbd2}.program-panel #filters button.active{background:var(--maroon);color:white}.program-entry{flex:0 0 104px;width:104px;max-width:104px}.program-entry .card img{height:154px}.program-entry .blank-card{height:154px;padding:8px;gap:7px}.program-entry .blank-card strong{font-size:15px;line-height:1.35}.program-entry .read-card{background:#ffffffe8;font-size:10px;min-height:28px}.program-entry .card-action b{font-size:11px}.program-entry .card-action span{font-size:10px}.bottom{bottom:330px}#viewport{bottom:315px}
@media(max-width:760px){header{left:16px;top:16px}header h1,header h1 span{font-size:17px;font-weight:600}.credits{top:69px}.program-panel{height:270px!important;background:transparent;padding:4px 8px 38px;display:flex!important}.program-panel #palette{height:228px;flex:1;padding:6px calc(50% - 49px) 20px;gap:22px}.program-panel #filters{left:8px;right:78px;bottom:4px}.carousel-heading{right:8px;bottom:4px}.carousel-heading button{padding:0 8px}.program-entry{flex-basis:98px;width:98px;max-width:98px}.program-entry .card img,.program-entry .blank-card{height:146px}.program-entry .blank-card strong{font-size:14px}.program-entry .card-action span{font-size:10px}.program-entry .card-action b{font-size:11px}.bottom{bottom:calc(351px + env(safe-area-inset-bottom))}#viewport{bottom:calc(342px + env(safe-area-inset-bottom))}}
/* Category explanations below each category button; compact scenario controls */
.program-panel{height:304px;padding-bottom:62px}.program-panel #filters{height:56px;align-items:flex-start}.category-control{display:flex;flex:0 0 auto;flex-direction:column;align-items:stretch;gap:3px}#filters .category-control>button{margin:0;min-height:27px}#filters .category-control .category-info{width:auto;min-height:23px;border-radius:5px;font-size:10px;padding:2px 7px;font-weight:400;background:#ffffffb8}.carousel-heading{bottom:16px}.bottom{bottom:354px;padding:5px 8px;gap:8px;border-radius:10px;font-size:11px}.bottom button{font-size:10px;min-height:27px;padding:3px 6px}#summary{font-size:11px}#summary strong{font-size:17px}#summary span{font-size:10px}#viewport{bottom:339px}@media(max-width:760px){.program-panel{height:294px!important;padding-bottom:62px}.program-panel #filters{height:56px}.bottom{bottom:calc(375px + env(safe-area-inset-bottom));padding:4px 7px}.bottom button{font-size:10px;min-height:25px}#summary strong{font-size:15px}#viewport{bottom:calc(366px + env(safe-area-inset-bottom))}}
/* Small left scenario panel */
.bottom{position:absolute;left:22px;right:auto;top:110px;bottom:auto;transform:none;max-width:none;width:182px;padding:13px;display:flex;flex-direction:column;align-items:stretch;gap:10px;border-radius:13px;background:#ffffffe8;box-shadow:0 4px 18px #4c173b08}.bottom #summary{font-size:12px;white-space:normal;line-height:1.5}.bottom #summary strong{font-size:20px}.bottom #summary span{display:block;font-size:11px;margin-top:3px;line-height:1.5}.bottom div:last-child{display:flex;flex-direction:column;gap:5px}.bottom button{font-size:12px;min-height:32px;padding:5px 8px;text-align:left}.control-panel,.inspector{font-size:13px;padding:17px}.control-panel h2,.inspector h2,.inspector .section-title strong{font-size:15px}.control-panel .views button{font-size:12px}.control-panel .layers label{font-size:13px}.control-panel .help,.inspector .help{font-size:12px;line-height:1.55}.control-panel .opacity-control{font-size:12px}.inspector .count{font-size:12px}.inspector .installed-row{font-size:12px}.inspector .installed-row small{font-size:11px}.inspector .installed-row button{font-size:12px;min-height:32px}.inspector #selection h3{font-size:23px}.inspector #selection p,.inspector .program-description{font-size:13px;line-height:1.6}.inspector #selection button,.inspector #selection select,.inspector details{font-size:12px}.inspector .section-title{font-size:11px}.control-panel{height:315px}.inspector{top:343px}
@media(max-width:760px){.bottom{left:12px;right:auto;top:109px;bottom:auto;width:150px;padding:10px;gap:7px;max-width:none;transform:none}.bottom #summary{font-size:11px}.bottom #summary strong{font-size:17px}.bottom #summary span{font-size:10px;display:block}.bottom div:last-child{flex-direction:column;flex-wrap:nowrap}.bottom button{font-size:11px;min-height:32px;padding:5px 7px}.control-panel .layers label{font-size:13px}.control-panel .views button,.inspector .installed-row button{min-height:40px}.control-panel.mobile-open,.inspector.mobile-open{top:auto!important}.inspector .section-title strong,.inspector h2,.control-panel h2{font-size:15px}}
:is(#save-pdf,#save-mp4){background:var(--maroon);color:#fff;border-color:var(--maroon);text-align:center;margin-top:3px}#pdf-form label{display:block;font-size:14px;margin:15px 0 6px}#pdf-form input{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:15px;background:white;color:var(--ink)}.pdf-form-actions{display:flex;gap:8px;margin-top:18px}.pdf-form-actions button{width:auto;flex:1;min-height:44px}#pdf-cancel{background:white;color:var(--maroon)}#pdf-status{font-size:13px;min-height:20px}
/* Landscape program popup with a bounded card and readable explanation */
#program-info{width:calc(100vw - 40px);max-width:760px;max-height:calc(100dvh - 40px);padding:24px;overflow:auto}#program-info-close{position:absolute;top:12px;right:12px;float:none;margin:0;min-height:32px;font-size:12px;padding:5px 12px;z-index:2;background:white}#program-info[data-mode=program] #program-info-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}.program-info-layout{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:26px;align-items:center}.info-visual{min-width:0}.info-visual .info-card{width:100%;max-width:270px;height:auto;max-height:calc(100dvh - 100px);object-fit:contain;margin:0 auto;border-radius:8px}.info-visual .blank-card{max-height:calc(100dvh - 100px);width:100%;aspect-ratio:153.12/240.96;height:auto;min-height:180px}.info-copy{padding:20px 0 4px;max-height:calc(100dvh - 100px);overflow:auto;min-width:0}.info-copy h3{font-size:20px;line-height:1.35;color:var(--maroon);margin:8px 0 16px}.info-copy .info-category{font-size:12px!important}.info-copy .info-description{font-size:14px!important;line-height:1.65!important;margin-bottom:20px}.neighbor-note{border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:12px;line-height:1.55}.neighbor-note strong{font-size:12px;color:var(--ink);font-weight:500}.neighbor-note ul{padding-left:17px;margin:7px 0 10px}.neighbor-note small{font-size:11px;display:block}#program-info[data-mode=category]{max-width:510px;padding-top:50px}#program-info[data-mode=category] .info-description{font-size:14px!important}
@media(max-width:600px){#program-info{width:calc(100vw - 24px);padding:45px 15px 18px;max-height:calc(100dvh - 24px)}.program-info-layout{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:14px;align-items:start}.info-visual .info-card{max-height:calc(100dvh - 100px)}.info-copy{padding:0;max-height:calc(100dvh - 100px)}.info-copy h3{font-size:16px;margin:5px 0 12px}.info-copy .info-description{font-size:13px!important;line-height:1.55!important;margin-bottom:14px}.info-copy .info-category{font-size:11px!important}.neighbor-note{font-size:11px;padding-top:10px}.neighbor-note strong{font-size:11px}.neighbor-note small{font-size:10px}.info-visual .blank-card{min-height:150px;padding:8px}.info-visual .blank-card strong{font-size:16px}.info-visual .blank-card small{font-size:11px}}
/* Scenario panel alongside the carousel */
.bottom{top:auto;bottom:44px;left:22px;width:180px}.program-panel{left:214px}.bottom :is(#save-pdf,#save-mp4){font-size:11px;line-height:1.3;white-space:normal;min-height:38px}.pdf-form-actions #pdf-download{font-size:14px}@media(max-width:1200px) and (min-width:761px){.program-panel{left:205px}.bottom{left:14px;width:175px}}@media(max-width:760px){.bottom{top:auto;bottom:calc(78px + env(safe-area-inset-bottom));left:8px;width:124px;padding:8px}.bottom #summary{font-size:10px}.bottom #summary span{font-size:10px}.bottom button{font-size:10px;min-height:30px;padding:4px 6px}.bottom :is(#save-pdf,#save-mp4){font-size:10px}.program-panel{left:140px!important;right:6px!important}.program-panel #filters{right:8px;height:56px}.program-panel .carousel-heading{bottom:65px;right:8px}.program-panel #palette{padding-left:calc(50% - 49px);padding-right:calc(50% - 49px)}.credits{font-size:10px}}
.mobile-scenario-actions{display:none}@media(max-width:760px){#viewport{bottom:25dvh!important;right:0}header h1,header h1 span{font-size:15px}.credits{top:61px;font-size:10px}.credits button{font-size:10px}.mobile-dock{bottom:max(4px,env(safe-area-inset-bottom));padding:4px;margin:0;left:8px;right:8px;border-radius:12px;min-height:42px}.mobile-dock button{min-height:34px;padding:3px;font-size:12px}.program-panel{bottom:calc(48px + env(safe-area-inset-bottom))!important;height:calc(25dvh - 48px - env(safe-area-inset-bottom))!important;left:118px!important;right:4px!important;min-height:100px;padding:2px 4px 38px;overflow:hidden}.program-panel #palette{height:auto;min-height:0;padding:2px calc(50% - 36px) 2px;gap:16px;align-items:start}.program-entry{flex:0 0 72px;width:72px;max-width:72px}.program-entry .card img,.program-entry .blank-card{height:clamp(42px,calc(25dvh - 135px),90px)}.program-entry .card-action{padding:2px 3px}.program-entry .card-action b{min-width:24px;font-size:10px}.program-entry .card-action span{font-size:9px}.program-entry .read-card{font-size:9px;min-height:20px;padding:1px}.program-entry .blank-card{padding:3px;gap:2px}.program-entry .blank-card strong{font-size:10px}.program-entry .blank-card small{display:none}.program-entry .blank-card span{font-size:9px}.program-panel #filters{left:4px;right:4px;bottom:0;height:36px;min-height:36px}#filters .category-control>button{min-height:18px;font-size:9px;padding:1px 6px}#filters .category-control .category-info{min-height:16px;font-size:9px;padding:0 4px}.category-control{gap:1px}.program-panel .carousel-heading{display:none}.bottom{bottom:calc(53px + env(safe-area-inset-bottom));left:8px;width:102px;padding:8px;max-height:calc(25dvh - 55px - env(safe-area-inset-bottom));overflow:auto}.bottom #summary{font-size:10px}.bottom #summary span{font-size:9px}.bottom #summary strong{font-size:15px}.bottom div:last-child button:not(:is(#save-pdf,#save-mp4)){display:none}.bottom :is(#save-pdf,#save-mp4){font-size:10px;min-height:34px;margin:0;padding:4px}.mobile-scenario-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}.mobile-scenario-actions button{font-size:12px;min-height:36px;padding:6px}.control-panel.mobile-open,.inspector.mobile-open{max-height:75dvh!important}#status{bottom:9px;font-size:11px;max-width:95%}}
/* Mobile: three fifths model, two fifths workspace, with larger readable cards */
@media(max-width:760px){#viewport{bottom:40dvh!important}.program-panel{height:calc(40dvh - 48px - env(safe-area-inset-bottom))!important;min-height:170px}.program-panel #palette{padding:4px calc(50% - 56px) 3px;gap:19px;overflow-y:auto}.program-entry{flex-basis:112px;width:112px;max-width:112px}.program-entry .card img,.program-entry .blank-card{height:clamp(110px,calc(40dvh - 145px),177px)}.program-entry .card-action{padding:4px}.program-entry .card-action b{font-size:12px;min-width:32px}.program-entry .card-action span{font-size:11px}.program-entry .read-card{font-size:11px;min-height:30px;padding:3px;white-space:normal;line-height:1.2}.program-entry .blank-card strong{font-size:14px}.program-entry .blank-card span{font-size:12px}.program-entry .blank-card small{display:block;font-size:10px}.bottom{max-height:calc(40dvh - 55px - env(safe-area-inset-bottom));width:105px}.program-panel{left:123px!important}.bottom #summary{font-size:11px}.bottom #summary span{font-size:10px}.bottom :is(#save-pdf,#save-mp4){font-size:11px;min-height:40px}#filters .category-control>button{font-size:10px;min-height:20px}#filters .category-control .category-info{font-size:10px;min-height:18px}.program-panel #filters{height:40px}.program-panel{padding-bottom:43px}}
.info-button-icon{display:none}@media(max-width:760px){.program-entry{position:relative;flex-basis:106px;width:106px;max-width:106px}.program-panel #palette{padding-left:calc(50% - 53px);padding-right:calc(50% - 53px);overflow-y:hidden}.program-entry .card img,.program-entry .blank-card{height:clamp(85px,calc(40dvh - 125px),167px)}.program-entry .read-card{position:absolute;top:5px;right:4px;width:36px;height:36px;min-height:36px;border-radius:50%;padding:0;display:grid;place-items:center;background:#fff;color:var(--maroon);border:1px solid #ddbea1;box-shadow:0 2px 8px #6330142b;z-index:2}.info-button-text{display:none}.info-button-icon{display:inline;font-size:18px;line-height:1;font-weight:700}.program-entry .card{margin-bottom:0}.program-entry .card-action{padding:4px}.program-entry .card-action span{font-size:11px}}

/* Language controls and the opening reflection. */
.language-switch{position:fixed;top:16px;right:22px;z-index:60;display:flex;align-items:center;gap:5px;color:#c30909;background:#f5e3d1;border:1px solid #ddbea1;border-radius:20px;padding:3px 7px}
.language-switch button{font:400 12px Arial,sans-serif;border:0;background:transparent;color:inherit;padding:5px 7px;border-radius:13px;cursor:pointer}
.language-switch button.active{background:#c30909;color:white;font-weight:700}
.language-switch span{font-size:11px;opacity:.5}
.control-panel{top:64px}.inspector{top:393px}
#disclaimer{max-height:85dvh;overflow-y:auto}
.opening-quote{margin:18px 0 20px;padding:0 0 0 18px;border-left:2px solid #c30909}
#disclaimer .opening-quote p{font-size:17px;line-height:1.55;font-weight:600;margin:0 0 12px}
.opening-quote cite{display:block;font:400 11px/1.5 Arial,sans-serif;color:#816552}
html[lang=en] .blank-card{background:linear-gradient(155deg,#fff 20%,color-mix(in srgb,var(--c,#8a7d83) 25%,white));}
@media(max-width:760px){.language-switch{top:12px;right:10px}.language-switch button{padding:5px}.control-panel{top:64px}.inspector{top:64px}header{max-width:calc(100% - 100px)}#disclaimer .opening-quote p{font-size:15px}.opening-quote{padding-left:13px;margin:15px 0}.opening-quote cite{font-size:11px}}

.popup-language{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:-5px 0 8px}.popup-language button{width:auto;margin:0;padding:5px 8px;min-height:28px;font-size:12px;background:transparent;color:#c30909;border:0;border-radius:14px}.popup-language button.active{background:#c30909;color:#fff}.popup-language span{font-size:11px;color:#816552}html[lang=en] .program-entry .blank-card strong{font-size:15px;line-height:1.2}html[lang=en] .program-entry .blank-card small{font-size:10px;line-height:1.2}@media(max-width:760px){html[lang=en] .program-entry .blank-card strong{font-size:12px}.language-switch button{min-height:28px}html[lang=en] #filters .category-control>button{max-width:100px;white-space:normal;line-height:1.1}}

/* MBDW Daur Rupa palette: red and warm cream sampled from the supplied logo. */
:root{--maroon:#c30909;--ink:#42251d;--muted:#816552;--line:#e3c9af;--panel:#fff8efef}header{gap:12px}dialog{background:#fff8ef}button:hover{background:#faeddc}.bottom{background:#fff8efed}.language-switch{background:#f5e3d1}.read-card{background:#fff8ef}.credits a,.credits button{color:var(--maroon)}@media(max-width:760px){header{gap:8px}header>div{min-width:0}header h1,header h1 span{overflow-wrap:normal}}

#hatta-landing{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:clamp(28px,8vw,110px);box-sizing:border-box;overflow:auto;background:#fff8ef;color:var(--ink)}#hatta-landing[open]{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}#hatta-title{max-width:900px;font-size:14px;font-weight:400;margin:14px 0 28px}#hatta-landing .opening-quote{border:0;padding:0;margin:0;max-width:1000px}#hatta-landing .opening-quote p{font-size:clamp(23px,3.8vw,49px);line-height:1.3;font-weight:400;margin:0 0 28px;color:var(--maroon)}#hatta-landing cite{font-size:13px;max-width:650px}#hatta-continue{margin-top:36px;min-height:44px;padding:10px 24px}#custom-program-dialog{width:calc(100vw - 40px);max-width:460px;max-height:85dvh;overflow:auto}#custom-program-form label{display:block;font-size:14px;margin:16px 0 6px}#custom-program-form input,#custom-program-form textarea{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:8px;background:white;font:400 16px/1.4 Arial,sans-serif;color:var(--ink)}@media(max-width:760px){#hatta-landing{padding:28px}#hatta-landing .opening-quote p{font-size:clamp(22px,5.5vw,30px)}#hatta-landing cite{font-size:12px}#hatta-continue{margin-top:24px}}

#viewport{position:absolute}
.block-actions{position:absolute;z-index:25;display:flex;gap:6px;transform:translateX(-50%);padding:5px;border:1px solid rgba(70,40,30,.18);border-radius:12px;background:rgba(245,227,209,.96);box-shadow:0 3px 12px #0002;pointer-events:auto}
.block-actions[hidden]{display:none}
.block-actions button{min-height:36px;padding:6px 12px;font-size:14px;white-space:nowrap;border-radius:8px}
#selection #move,#selection #remove{display:none}
@media(max-width:760px){.block-actions button{min-height:40px}}

/* Mobile credits occupy their own bottom row. */
@media(max-width:760px){
 .credits{top:auto;bottom:calc(3px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);justify-content:center;width:max-content;max-width:calc(100% - 16px);font-size:11px;gap:6px;z-index:5}
 .credits button{font-size:11px;min-height:26px}
 .mobile-dock{bottom:calc(34px + env(safe-area-inset-bottom))}
 .program-panel{bottom:calc(78px + env(safe-area-inset-bottom))!important;height:calc(40dvh - 78px - env(safe-area-inset-bottom))!important;min-height:140px}
 .bottom{bottom:calc(83px + env(safe-area-inset-bottom));max-height:calc(40dvh - 85px - env(safe-area-inset-bottom))}
 .program-entry .card img,.program-entry .blank-card{height:clamp(65px,calc(40dvh - 155px),137px)}
}

.custom-add-card{display:flex;flex-direction:column;align-items:center;justify-content:center;height:150px;background:transparent;color:var(--maroon);gap:6px}
.custom-add-card .custom-plus{font:300 84px/1 Arial,sans-serif;color:var(--maroon)}
.custom-add-card strong{font:400 12px/1.3 Arial,sans-serif;text-align:center}
@media(max-width:760px){.custom-add-card{height:clamp(65px,calc(40dvh - 155px),137px)}.custom-add-card .custom-plus{font-size:64px}.custom-add-card strong{font-size:11px}}

#jpg-preview{width:min(520px,94vw);max-height:92dvh;overflow:auto;padding:20px}#jpg-preview img{display:block;width:auto;max-width:100%;height:auto;max-height:55dvh;margin:12px auto;object-fit:contain;-webkit-touch-callout:default;user-select:auto}#jpg-preview .jpg-help{font-size:14px}#jpg-preview .pdf-form-actions{flex-wrap:wrap}#jpg-preview .jpg-share{background:var(--maroon);color:white}#jpg-preview [hidden]{display:none}

/* Fit the device viewport and avoid iOS focus zoom on form fields. */
html{width:100%;height:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,main,.workspace{width:100%;max-width:100%}
#pdf-form input{font-size:16px}
@media(max-width:760px){
 header{left:16px;right:100px;width:auto;max-width:none;top:max(12px,env(safe-area-inset-top))}
 header>div{width:100%;min-width:0}
 header h1,header h1 span{white-space:normal;overflow-wrap:anywhere;font-size:clamp(13px,3.8vw,15px);line-height:1.35}
 .language-switch{right:max(10px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top))}
 input:not([type=checkbox]):not([type=range]),textarea,select{font-size:16px!important}
 dialog{max-width:calc(100% - 24px)}
 #hatta-landing{width:100%;max-width:100%;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
}

@media(min-width:761px){.control-panel{height:390px}.inspector{top:468px}}

/* Solid category cards, including the English and detail variants. */
.blank-card,html[lang=en] .blank-card{background:var(--c,#8a7d83);color:#fff;border-color:transparent}
.blank-card span,.blank-card strong,.blank-card small{color:#fff}

.block-actions button{width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center}.block-actions svg{pointer-events:none}

.block-actions{padding:0;border:0;background:transparent;box-shadow:none;gap:8px}.block-actions button{border-radius:50%;width:44px;height:44px;min-height:44px;background:rgba(245,227,209,.96);box-shadow:0 3px 12px #0002;border:1px solid rgba(70,40,30,.18)}.block-actions button.active{background:var(--maroon);color:white}

#instructions-dialog{width:min(650px,calc(100% - 28px));max-height:85dvh}.instruction-section{margin:20px 0}.instruction-section h3{font-size:17px;color:var(--maroon);margin:0 0 12px}.instruction-section dl{margin:0}.instruction-section dl>div{padding:12px 0;border-top:1px solid var(--line)}.instruction-section dt{font-size:16px;font-weight:600;line-height:1.4}.instruction-section dd{margin:5px 0 0;font-size:15px;line-height:1.6}.credits{max-width:calc(100% - 16px)}
@media(max-width:400px){.credits{gap:4px;font-size:10px}.credits button{font-size:10px;padding-left:5px}}

.pdf-form-actions .export-icon{flex:0 0 48px;width:48px;height:48px;min-height:48px;padding:0;display:grid;place-items:center;border-radius:50%}.export-icon svg{width:22px;height:22px;pointer-events:none}#jpg-preview .pdf-form-actions,#pdf-form .pdf-form-actions{justify-content:center;gap:16px}#jpg-preview .jpg-status:empty{display:none}

.add-program-entry{align-self:center;display:grid;place-items:center;min-height:130px}.add-program-circle{width:76px;height:76px;min-height:76px;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--maroon);color:#fff;border:0}.add-program-circle span{font-size:48px;line-height:1;font-weight:300}.add-program-circle:hover{background:#8e0909}#custom-program-form select{width:100%;font-size:16px;min-height:48px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#fff;color:var(--ink)}@media(max-width:760px){.add-program-entry{min-height:100px}.add-program-circle{width:60px;height:60px;min-height:60px}.add-program-circle span{font-size:40px}}

.program-entry{position:relative}.delete-custom-program{position:absolute;top:5px;right:5px;z-index:2;width:32px;height:32px;min-height:32px;padding:0;border-radius:50%;display:grid;place-items:center;background:#fff8ef;color:var(--maroon);border:1px solid #fff8efaa;box-shadow:0 2px 6px #0002}.delete-custom-program svg{width:17px;height:17px;pointer-events:none}.delete-custom-program:hover{background:#fff}.program-entry:has(.delete-custom-program) .blank-card{padding-top:38px}@media(max-width:760px){.delete-custom-program{top:3px;right:3px;width:30px;height:30px;min-height:30px}}

#about-work,#open-instructions{text-transform:lowercase}

#fullscreen-3d{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:26;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;border-radius:50%;background:#fff8efeb;color:var(--maroon);border:1px solid var(--line);box-shadow:0 3px 10px #0002}#fullscreen-3d svg{width:22px;height:22px;pointer-events:none}#viewport:fullscreen,#viewport.is-expanded{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:100;background:#f5e3d1}#viewport:fullscreen #status,#viewport.is-expanded #status{bottom:18px;max-width:calc(100% - 150px)}

#fullscreen-identity,#fullscreen-credits{display:none;position:absolute;left:70px;right:70px;z-index:26;text-align:center;pointer-events:none;color:var(--ink)}#fullscreen-identity{top:calc(20px + env(safe-area-inset-top))}#fullscreen-identity strong{display:block;font-size:26px;line-height:1.3;color:var(--maroon);overflow-wrap:anywhere}#fullscreen-identity span{display:block;font-size:16px;margin-top:4px}#fullscreen-credits{bottom:calc(12px + env(safe-area-inset-bottom));font-size:13px;line-height:1.5}#fullscreen-credits strong,#fullscreen-credits span{display:block}#viewport:fullscreen #fullscreen-identity,#viewport:fullscreen #fullscreen-credits,#viewport.is-expanded #fullscreen-identity,#viewport.is-expanded #fullscreen-credits{display:block}#viewport:fullscreen #fullscreen-3d,#viewport.is-expanded #fullscreen-3d{bottom:calc(75px + env(safe-area-inset-bottom))}#viewport:fullscreen #status,#viewport.is-expanded #status{bottom:calc(100px + env(safe-area-inset-bottom))}@media(max-width:760px){#fullscreen-identity{left:20px;right:20px;top:calc(14px + env(safe-area-inset-top))}#fullscreen-identity strong{font-size:21px}#fullscreen-identity span{font-size:14px}#fullscreen-credits{left:16px;right:16px;font-size:12px}}

#fullscreen-disclaimer{max-width:1000px;margin:8px auto 0;font-size:12px;line-height:1.5;font-weight:400}
#fullscreen-credits{left:20px;right:20px;padding:12px 18px;background:rgba(245,227,209,.92);border-radius:10px}
#viewport:fullscreen #fullscreen-3d,#viewport.is-expanded #fullscreen-3d{bottom:calc(var(--fullscreen-footer-height,160px) + 28px + env(safe-area-inset-bottom))}
#viewport:fullscreen #status,#viewport.is-expanded #status{bottom:calc(var(--fullscreen-footer-height,160px) + 32px + env(safe-area-inset-bottom))}
#video-preview{width:min(960px,calc(100% - 28px));padding:20px}#video-preview video{display:block;width:100%;max-height:70dvh;background:#f5e3d1;border-radius:8px}#video-preview .pdf-form-actions{justify-content:center;gap:16px;margin-top:16px}#video-preview button[hidden]{display:none}
@media(max-width:760px){.bottom div:last-child #save-mp4{display:inline-block}#fullscreen-credits{left:10px;right:10px;padding:8px 10px}#fullscreen-disclaimer{font-size:10px;line-height:1.4}}

:is(#save-pdf,#save-mp4):hover{background:#a00808;border-color:#a00808}:is(#save-pdf,#save-mp4):disabled{opacity:.55;cursor:not-allowed}

/* Keep presentation mode free of operating prompts. */
#viewport:fullscreen .camera-help,#viewport:fullscreen #status,#viewport.is-expanded .camera-help,#viewport.is-expanded #status{display:none}
@media(max-width:760px){
 .bottom div:last-child #save-mp4{display:block}
 .bottom{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;min-height:100px}
 .bottom #summary{flex:1;min-height:0;overflow:auto}
 .bottom div:last-child{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
 .bottom :is(#save-pdf,#save-mp4){width:100%;min-height:40px}
}

.credits #coffee-support{display:inline-flex;align-items:center;min-height:24px;padding-left:8px;border-left:1px solid #cdb8c2;font-size:inherit}
@media(max-width:760px){.credits{flex-wrap:wrap;gap:0 6px;white-space:normal}.credits #about-work{margin-left:0}.credits::before{content:"";order:1;flex-basis:100%;height:0}.credits :is(#about-work,#open-instructions,#coffee-support){order:2;font-size:11px}.mobile-dock{bottom:calc(60px + env(safe-area-inset-bottom))}.program-panel{bottom:calc(104px + env(safe-area-inset-bottom))!important;height:calc(40dvh - 104px - env(safe-area-inset-bottom))!important}.bottom{bottom:calc(109px + env(safe-area-inset-bottom));max-height:calc(40dvh - 111px - env(safe-area-inset-bottom))}}

/* Reserve full card and caption height on small screens. */
@media(max-width:760px){
 .program-panel{height:230px!important;min-height:230px;padding:4px 12px 40px}
 .program-panel #palette{height:auto;min-height:180px;padding-top:4px;padding-bottom:8px;align-items:flex-start}
 .program-entry .card img,.program-entry .blank-card{height:130px}
 .program-entry .card-action{min-height:40px;align-items:flex-start}
 .program-entry .card-action span{white-space:normal;line-height:1.25;font-size:12px}
 #viewport{bottom:calc(344px + env(safe-area-inset-bottom))}
 .bottom{bottom:calc(344px + env(safe-area-inset-bottom));max-height:140px}
}

.mobile-program-tile{display:none}
@media(max-width:760px){
 .program-panel{left:118px!important;right:8px!important;width:auto!important;height:160px!important;min-height:160px;bottom:calc(104px + env(safe-area-inset-bottom))!important;padding:4px 0 38px}
 .program-panel #palette{height:118px;min-height:118px;gap:12px;padding:3px 12px 3px;align-items:flex-start}
 .program-entry{flex:0 0 112px;width:112px;max-width:112px;transform:none!important}
 .program-entry .card{display:block;width:112px;height:112px;padding:0;border:0;border-radius:12px;margin:0;overflow:hidden;background:var(--c)}
 .program-entry .card.selected{outline:3px solid var(--maroon);outline-offset:-3px}
 .program-entry .card>img,.program-entry .card>.blank-card,.program-entry .card>.card-action{display:none}
 .program-entry .mobile-program-tile{display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:center;width:100%;height:100%;padding:30px 10px 10px;color:#fff;background:var(--c)}
 .mobile-program-tile b{font-size:20px;line-height:1;padding:0;min-width:0;background:none}
 .mobile-program-tile strong{font-size:13px;line-height:1.2;font-weight:500;text-align:left;overflow-wrap:anywhere}
 .program-entry .read-card{top:5px;right:5px;width:26px;height:26px;min-height:26px;font-size:15px}
 .program-entry .delete-custom-program{left:5px;right:auto;top:5px;width:26px;height:26px;min-height:26px}
 .add-program-entry{height:112px;min-height:112px;align-self:flex-start}
 .program-panel #filters{left:4px;right:72px;overflow-x:auto;white-space:nowrap;max-height:32px}
 .category-control{flex-shrink:0}
 .carousel-heading{right:0}
 .carousel-heading button{width:30px;padding:3px;min-height:30px}
 .bottom{left:8px;right:auto;bottom:calc(146px + env(safe-area-inset-bottom));width:102px;height:112px;min-height:112px;max-height:112px;padding:6px;gap:0;justify-content:center;border-radius:12px}
 .bottom #summary{display:none}
 .bottom div:last-child{width:100%;gap:6px}
 .bottom :is(#save-pdf,#save-mp4){width:100%;min-height:44px;font-size:11px;padding:5px 3px;white-space:normal;line-height:1.15}
 #viewport{bottom:calc(270px + env(safe-area-inset-bottom))}
 #fullscreen-3d,#viewport:fullscreen #fullscreen-3d,#viewport.is-expanded #fullscreen-3d{left:auto;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));bottom:auto}
 #fullscreen-identity{left:16px;right:66px}
}

@media(max-width:760px){
 #status{bottom:28px;max-width:calc(100% - 24px)}
 .program-panel{left:8px!important;right:8px!important;overflow:hidden}
 .program-panel #palette{margin-left:110px;width:calc(100% - 110px)}
 .program-panel #filters{left:0;right:0;width:100%;bottom:0;max-height:34px;overflow-x:auto;gap:5px;padding:2px 0}
 .carousel-heading{bottom:42px;right:0}
 .credits{flex-wrap:nowrap;white-space:nowrap;gap:4px;font-size:clamp(8px,2.35vw,10px);width:max-content;max-width:calc(100% - 12px);line-height:1.2}
 .credits::before{display:none}
 .credits :is(#about-work,#open-instructions,#coffee-support){order:0;font-size:inherit;white-space:nowrap}
 .credits button{padding:3px 4px;min-height:24px}
 .credits #coffee-support{padding-left:4px}
}

@media(max-width:760px){
 .mobile-dock{bottom:calc(27px + env(safe-area-inset-bottom));margin:0;padding:5px 7px}
 .mobile-dock button{min-height:40px}
 .program-panel{bottom:calc(91px + env(safe-area-inset-bottom))!important;height:173px!important;min-height:173px;padding-bottom:51px}
 .program-panel #filters{min-height:40px;max-height:40px;bottom:2px;padding:3px 0;gap:7px}
 .program-panel #filters button{min-height:34px;padding:6px 9px}
 .carousel-heading{bottom:55px}
}

@media(max-width:760px){
 .program-panel #filters{height:40px;min-height:40px;max-height:40px;align-items:center;overflow-y:hidden;touch-action:pan-x}
 .program-panel #filters .category-control{display:flex;flex-direction:row;align-items:center;gap:3px;height:34px;flex:0 0 auto}
 .program-panel #filters .category-control>button,
 html[lang=en] .program-panel #filters .category-control>button{height:34px;min-height:34px;max-height:34px;margin:0;padding:4px 9px;white-space:nowrap;font-size:11px;line-height:1.2;max-width:none}
 .program-panel #filters .category-control .category-info{width:auto;height:34px;min-height:34px;max-height:34px;padding:4px 7px;margin:0;border-radius:7px;font-size:11px;line-height:1.2}
 #viewport{bottom:calc(270px + env(safe-area-inset-bottom))!important}
 .program-panel #palette{overflow-y:hidden}
}

@media(max-width:760px){
 .program-panel #filters .category-control .category-info{width:26px;height:26px;min-height:26px;max-height:26px;padding:0;border-radius:50%;font-size:0!important;display:grid;place-items:center;flex:0 0 26px}
 .program-panel #filters .category-control .category-info::after{content:"i";font:700 14px/1 Arial,sans-serif}
 #fullscreen-3d{top:calc(58px + env(safe-area-inset-top))}
 #viewport:fullscreen #fullscreen-3d,#viewport.is-expanded #fullscreen-3d{top:max(12px,env(safe-area-inset-top))}
}

@media(max-width:760px){
 #fullscreen-3d{left:max(12px,env(safe-area-inset-left));right:auto;top:auto;bottom:12px;z-index:3}
 #viewport:fullscreen #fullscreen-3d,#viewport.is-expanded #fullscreen-3d{left:max(12px,env(safe-area-inset-left));right:auto;top:auto;bottom:calc(var(--fullscreen-footer-height,160px) + 28px + env(safe-area-inset-bottom));z-index:26}
}

#status{background:transparent;border:0;box-shadow:none;border-radius:0;font-size:12px;line-height:1.4;z-index:30;padding:4px 8px}
.credits{gap:12px}
.credits button,.credits #coffee-support{border-left:0;padding-left:0}
.credits :is(a,button):hover{background:transparent;box-shadow:none;text-decoration:underline}
@media(max-width:760px){
 #status{font-size:10px}
 .credits{gap:7px}
 .credits button,.credits #coffee-support{padding-left:0;padding-right:0;border-left:0}
}

#status{left:auto;right:16px;bottom:16px;transform:none;text-align:right;color:#fff;max-width:calc(100% - 84px)}
@media(max-width:760px){#status{right:12px;bottom:16px;max-width:calc(100% - 80px)}}

#fullscreen-identity{text-align:left;left:max(24px,env(safe-area-inset-left));right:24px}
@media(max-width:760px){#fullscreen-identity{left:max(16px,env(safe-area-inset-left));right:16px}}

#fullscreen-identity,#fullscreen-credits,#fullscreen-disclaimer{background:transparent;border:0;box-shadow:none;backdrop-filter:none;border-radius:0}

#fullscreen-mix{display:none;position:absolute;right:max(24px,env(safe-area-inset-right));top:110px;z-index:26;pointer-events:none;text-align:right;background:transparent}
#viewport:fullscreen #fullscreen-mix,#viewport.is-expanded #fullscreen-mix{display:flex;flex-direction:column;gap:14px}
#fullscreen-mix div{display:flex;flex-direction:column;gap:2px}
#fullscreen-mix span{font-size:14px;line-height:1.2}
#fullscreen-mix strong{font-size:25px;line-height:1.2;font-weight:600}
@media(max-width:760px){#fullscreen-mix{right:max(16px,env(safe-area-inset-right));top:25%;max-width:145px}#viewport:fullscreen #fullscreen-mix,#viewport.is-expanded #fullscreen-mix{gap:10px}#fullscreen-mix span{font-size:12px}#fullscreen-mix strong{font-size:20px}}

#figure-menu{position:absolute;z-index:40;width:240px;max-width:calc(100% - 16px);padding:12px;border-radius:18px;background:#fff8eff5;border:1px solid #e3c9af;box-shadow:0 5px 20px #0002;color:var(--ink);font-size:14px}
#figure-menu[hidden]{display:none}
#figure-menu>strong{display:block;margin:2px 28px 10px 0}
.figure-menu-close{position:absolute;top:5px;right:5px;width:28px;min-height:28px;padding:0;border:0;background:transparent}
.figure-menu-options{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto;touch-action:pan-y}
.figure-menu-options button{text-align:left;font-size:13px;min-height:36px;padding:7px 9px;color:var(--c);border-color:var(--c);border-radius:12px}

#figure-menu .figure-menu-name{margin-bottom:2px}#figure-menu .figure-menu-prompt{display:block;font-size:12px;margin-bottom:10px}

#control-identity-form{display:grid;gap:6px;margin:14px 0 18px}
#control-identity-form label{font-size:13px}
#control-identity-form input{width:100%;min-width:0;border:1px solid var(--line);border-radius:7px;padding:8px;font-size:16px;background:#fff;color:var(--ink)}
#control-identity-form button{margin-top:4px;font-size:13px;min-height:36px}

#instructions-dialog .instructions-heading{position:sticky;top:-32px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;margin:-32px -32px 0;padding:24px 24px 14px 32px;border-bottom:1px solid var(--line)}
#instructions-dialog .instructions-heading h2{margin:0;font-size:26px}
#instructions-dialog #instructions-close{flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--maroon);font:28px/1 Arial,sans-serif;cursor:pointer}
#instructions-dialog #instructions-close:hover{background:#c3090910}

#fullscreen-identity .creation-date{display:block;margin-top:5px;font-size:14px;font-weight:300;line-height:1.4}
@media(max-width:760px){#fullscreen-identity .creation-date{font-size:12px}}

header,aside.program-panel,aside.inspector,aside.control-panel,.bottom,.mobile-dock,.carousel-heading,#palette,#filters{background:transparent!important;backdrop-filter:none!important;box-shadow:none!important;border-color:transparent!important}
#viewport{bottom:0!important}

@media(min-width:761px){aside.control-panel{top:72px;right:18px;width:256px;height:calc((100dvh - 155px)*.53);padding:16px;overflow:auto}aside.inspector{top:calc(72px + (100dvh - 155px)*.53 + 14px);bottom:68px;right:18px;width:256px;padding:16px;overflow:auto}}
:is(.control-panel,.inspector) h2{font-size:17px;line-height:1.3;margin:16px 0 10px}:is(.control-panel,.inspector) h2:first-of-type{margin-top:0}
.control-panel .layers{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;font-size:13px}.control-panel .layers label{display:flex;align-items:center;gap:6px;margin:0}.control-panel .views{display:flex;gap:5px}.control-panel .views button{flex:1;padding:6px;font-size:12px}
#control-identity-form{gap:6px;margin:0 0 16px;font-size:13px}#control-identity-form button{margin-top:4px}.control-panel .opacity-control{margin-top:14px}.inspector .installed-row{gap:8px;font-size:13px}.inspector .rule{margin:16px 0}
@media(max-width:760px){aside.control-panel.mobile-open,aside.inspector.mobile-open{padding:18px;max-height:65dvh!important;overflow:auto}.control-panel .layers{gap:12px}}

#figure-hover-name{position:absolute;z-index:35;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;font:400 11px/1.3 Arial,sans-serif;color:#780606;background:transparent;text-shadow:0 1px 2px #fff,0 0 4px #fff8}
#figure-hover-name[hidden]{display:none}
/* Compact sidebar controls and installed-program rows. */
aside.control-panel{padding:12px}
.control-panel h2{font-size:15px;margin:0 0 8px}
#control-identity-form{grid-template-columns:80px minmax(0,1fr);align-items:center;gap:5px 7px;margin:0 0 9px}
#control-identity-form label{font-size:11px;line-height:1.25}
#control-identity-form input{padding:4px 7px;height:29px;font-size:13px;border-radius:5px}
#control-identity-form button{grid-column:1/-1;min-height:27px;padding:3px 8px;margin:1px 0 0;font-size:11px}
.control-panel .toolbar{gap:7px;margin:0}
.control-panel .views{gap:4px;margin:0 0 8px}
.control-panel .views button{min-height:27px;padding:3px 5px;font-size:11px}
.control-panel .layers{gap:5px 7px;font-size:11px;line-height:1.3}
.control-panel .layers label{min-height:19px;gap:4px}
.control-panel .layers input{margin:0;width:13px;height:13px}
.control-panel .layers label:last-child{grid-column:1/-1}
.control-panel .opacity-control{margin:8px 0 0;font-size:11px;line-height:1.3;gap:2px}
.control-panel .opacity-control input[type=range]{margin:3px 0;height:16px;width:100%}
.control-panel>.help:last-child{margin:8px 0 0;font-size:10px;line-height:1.35}
.inspector{padding:12px}
.inspector .installed-row{padding:5px 0;gap:5px;font-size:12px;line-height:1.3}
.inspector .installed-row small{font-size:10px;margin-top:2px}
.inspector .installed-row button{min-height:26px;padding:3px 6px;font-size:10px}
.inspector h2{margin:10px 0 6px;font-size:15px}.inspector .help{margin:5px 0;font-size:12px;line-height:1.4}.inspector .rule{margin:10px 0}
@media(min-width:761px){aside.control-panel{height:334px;max-height:calc(100dvh - 132px);overflow:auto}aside.inspector{top:416px;bottom:68px;padding:12px;overflow:auto}.control-panel>.help:last-child{display:none}}
@media(max-width:760px){aside.control-panel.mobile-open{padding:14px;max-height:72dvh!important}#control-identity-form input{height:32px;font-size:16px}.control-panel .views button,#control-identity-form button{min-height:32px}.control-panel .layers{gap:7px;font-size:12px}.control-panel .layers label{min-height:23px}.control-panel .opacity-control{font-size:12px;margin-top:7px}.inspector .installed-row button{min-height:32px}}
@media(min-width:761px){aside.control-panel{height:auto;max-height:none;overflow:visible}aside.inspector{top:calc(72px + var(--control-panel-height,390px) + 10px);bottom:68px}}
@media(max-width:760px){aside.control-panel.mobile-open{height:auto!important;max-height:calc(100dvh - 95px)!important}}
#fullscreen-3d,#viewport:fullscreen #fullscreen-3d,#viewport.is-expanded #fullscreen-3d{left:max(12px,env(safe-area-inset-left));right:auto;top:50%;bottom:auto;transform:translateY(-50%);z-index:3}

.control-panel .views{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.control-panel .views button{padding:3px 1px;font-size:9px;min-width:0}

.figure-follow{width:100%;min-height:32px;font-size:12px;margin:8px 0;border-color:var(--maroon);color:var(--maroon);background:transparent}
#stop-follow{position:absolute;left:12px;top:calc(50% + 30px);z-index:4;min-height:32px;font-size:11px;padding:5px 8px;background:#fff9}
#stop-follow[hidden]{display:none}

#status{left:auto;right:16px;top:50%;bottom:auto;transform:translateY(-50%);text-align:right;z-index:30;text-shadow:0 1px 3px #42251d99}
@media(max-width:760px){#status{right:12px;top:50%;bottom:auto;transform:translateY(-50%)}}

header .follow-caption{max-width:440px;margin:6px 0 0;font-size:11px;font-weight:400;line-height:1.4;color:var(--muted)}
#fullscreen-identity .follow-caption{display:block;margin:6px 0 0;font-size:11px;line-height:1.4;font-weight:400}
.follow-caption[hidden],#fullscreen-identity .follow-caption[hidden]{display:none}
@media(max-width:760px){header .follow-caption{max-width:260px;font-size:10px}}

@media(max-width:760px){
 #fullscreen-3d,#viewport:fullscreen #fullscreen-3d,#viewport.is-expanded #fullscreen-3d{top:42%}
 #stop-follow{top:calc(42% + 28px)}
 aside.control-panel,aside.inspector{background:rgba(255,248,239,.5)!important}
}
@media(max-width:760px){
 aside#control-panel.control-panel,aside#detail-panel.inspector,aside#control-panel.control-panel.mobile-open,aside#detail-panel.inspector.mobile-open{background:rgba(255,248,239,.8)!important;border:1px solid rgba(227,201,175,.65)!important;box-shadow:0 5px 20px rgba(66,37,29,.08)!important}
}

/* Keep the follow view clear; restore these tools on exit. */
body.following-figure #program-panel,body.following-figure .bottom,body.following-figure #status{display:none!important}

.mobile-scenario-actions [data-scenario-action="random-programs"]{flex-basis:100%}

#random-programs{display:block;width:100%}

#follow-map{position:absolute;left:12px;bottom:56px;width:280px;height:190px;z-index:4;pointer-events:none;background:rgba(250,237,222,.8);border:1px solid rgba(66,37,29,.2);border-radius:8px;box-shadow:0 2px 10px #42251d18}
#follow-map[hidden]{display:none}
@media(max-width:760px){#follow-map{width:220px;height:150px;left:10px;bottom:calc(56px + env(safe-area-inset-bottom))}}
#viewport:fullscreen #follow-map,#viewport.is-expanded #follow-map{bottom:calc(16px + env(safe-area-inset-bottom))}

#follow-map{background:transparent;border:0;box-shadow:none}
@media(max-width:760px){
 body.following-figure #fullscreen-3d,body.following-figure #viewport:fullscreen #fullscreen-3d,body.following-figure #viewport.is-expanded #fullscreen-3d{left:auto;right:max(12px,env(safe-area-inset-right));top:auto;bottom:calc(98px + env(safe-area-inset-bottom));transform:none;z-index:3}
 body.following-figure #stop-follow{left:auto;right:max(12px,env(safe-area-inset-right));top:auto;bottom:calc(56px + env(safe-area-inset-bottom));transform:none;z-index:4}
 body.following-figure #viewport:fullscreen #fullscreen-3d,body.following-figure #viewport.is-expanded #fullscreen-3d{bottom:calc(58px + env(safe-area-inset-bottom))}
 body.following-figure #viewport:fullscreen #stop-follow,body.following-figure #viewport.is-expanded #stop-follow{bottom:calc(16px + env(safe-area-inset-bottom))}
}

@media(max-width:760px){#follow-map{width:min(220px,48vw)}}

#viewport:fullscreen #follow-map,#viewport.is-expanded #follow-map{display:none!important}

#follow-map{transform:translateX(-18%)}

.installed-program-text{flex:1;min-width:0}.installed-program-name{display:block;overflow-wrap:anywhere}.inspector .installed-row small{display:block;color:var(--muted);font-size:10px}.inspector .installed-row button{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;padding:4px}.installed-row button svg{width:17px;height:17px}
@media(max-width:760px){aside#control-panel.control-panel.mobile-open,aside#detail-panel.inspector.mobile-open{top:calc(72px + env(safe-area-inset-top))!important;max-height:calc(100dvh - 148px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}.language-switch{top:calc(12px + env(safe-area-inset-top))}}

@media(max-width:760px){
 body.following-figure #fullscreen-3d{bottom:calc(140px + env(safe-area-inset-bottom))}
 body.following-figure #stop-follow{bottom:calc(98px + env(safe-area-inset-bottom))}
 body.following-figure #viewport:fullscreen #fullscreen-3d,body.following-figure #viewport.is-expanded #fullscreen-3d{bottom:calc(100px + env(safe-area-inset-bottom))}
 body.following-figure #viewport:fullscreen #stop-follow,body.following-figure #viewport.is-expanded #stop-follow{bottom:calc(58px + env(safe-area-inset-bottom))}
 #viewport:fullscreen #fullscreen-mix,#viewport.is-expanded #fullscreen-mix{display:none!important}
 #viewport:fullscreen #fullscreen-credits,#viewport.is-expanded #fullscreen-credits{left:16px;right:16px;bottom:calc(154px + env(safe-area-inset-bottom));padding:0;text-align:left;font-size:10px;line-height:1.2}
 #fullscreen-credits strong,#fullscreen-credits span{margin:0;line-height:1.2}
 #fullscreen-disclaimer{margin:5px 0 0;font-size:10px;line-height:1.2;text-align:left}
}

/* Wrap program names within their card, including compact mobile tiles. */
.program-entry .blank-card strong,.program-entry .mobile-program-tile strong{display:block;width:100%;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.2;text-wrap:balance}
.program-entry .blank-card strong{font-size:15px}

.control-panel .layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.control-panel .layers label:last-child{grid-column:auto}

#collective-comfort{position:absolute;right:16px;top:calc(50% + 24px);z-index:30;display:flex;align-items:center;justify-content:flex-end;gap:12px;max-width:calc(100% - 32px);color:var(--maroon);background:transparent;pointer-events:none}
#collective-comfort[hidden],body.following-figure #collective-comfort,#viewport:fullscreen #collective-comfort,#viewport.is-expanded #collective-comfort{display:none!important}
.comfort-level{display:flex;align-items:center;gap:6px;flex:none}
.comfort-level svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.comfort-track{display:block;position:relative;width:130px;height:8px;border:1px solid currentColor;border-radius:5px;overflow:hidden;background:transparent}
.comfort-fill{display:block;height:100%;width:50%;background:currentColor;transition:width 1.5s ease}
#collective-comfort[data-state=unknown] .comfort-fill{opacity:.25}
.comfort-comment{max-width:180px;text-align:right;font:400 11px/1.3 Arial,sans-serif;opacity:0;overflow-wrap:break-word}
.comfort-comment.is-fading{animation:comfort-comment-fade 5s ease both}
@keyframes comfort-comment-fade{0%{opacity:0}8%,55%{opacity:1}100%{opacity:0}}
@media(max-width:760px){#collective-comfort{right:12px;gap:8px;max-width:calc(100% - 24px)}.comfort-track{width:104px}.comfort-level svg{width:17px;height:17px}.comfort-comment{max-width:calc(100vw - 196px);font-size:10px}}
@media(prefers-reduced-motion:reduce){.comfort-fill{transition:none}.comfort-comment.is-fading{animation:comfort-comment-fade 5s linear both}}

@media(max-width:760px){
 #viewport:fullscreen #fullscreen-credits,#viewport.is-expanded #fullscreen-credits{bottom:calc(20px + env(safe-area-inset-bottom))}
 body.following-figure #viewport:fullscreen #fullscreen-credits,body.following-figure #viewport.is-expanded #fullscreen-credits{right:76px}
}

.population-auto{display:flex;align-items:center;gap:5px;font-size:11px;margin:3px 0}.population-auto input{margin:0}

/* Compact mobile carousel: export, cards, and arrows have separate space. */
@media(max-width:760px){
 .program-panel{height:149px!important;min-height:149px;padding-top:4px;padding-bottom:51px}
 .program-panel #palette{height:94px;min-height:94px;flex:0 0 calc(100% - 170px);margin-left:100px;width:calc(100% - 170px);gap:8px;padding:0 4px;align-items:flex-start}
 .program-entry{flex-basis:106px;width:106px;max-width:106px}
 .program-entry .card{width:106px;height:88px;border-radius:10px}
 .program-entry .mobile-program-tile{gap:4px;padding:27px 8px 6px}
 .mobile-program-tile b{font-size:18px}
 .mobile-program-tile strong{font-size:12px;line-height:1.15}
 .program-entry .read-card{top:4px;right:4px;width:24px;height:24px;min-height:24px;font-size:14px}
 .add-program-entry{height:88px;min-height:88px}
 .add-program-circle{width:48px;height:48px;min-height:48px}
 .add-program-circle span{font-size:32px}
 .bottom{width:90px;height:88px;min-height:88px;max-height:88px;bottom:calc(148px + env(safe-area-inset-bottom));padding:3px}
 .bottom div:last-child{gap:5px}
 .bottom :is(#save-pdf,#save-mp4){height:38px;min-height:38px;padding:3px;font-size:10px}
 .program-panel .carousel-heading{left:auto;right:2px;top:30px;bottom:auto;width:64px;gap:4px}
 #viewport{bottom:calc(246px + env(safe-area-inset-bottom))!important}
}

/* Keep the scene behind the transparent mobile navigation. */
@media(max-width:760px){
 #viewport{bottom:0!important}
 aside#program-panel.program-panel,.bottom,.mobile-dock,.program-panel #palette,.program-panel #filters,.program-panel .carousel-heading{background:transparent!important;backdrop-filter:none!important;box-shadow:none!important}
 body:not(.following-figure) #viewport:not(:fullscreen):not(.is-expanded) #fullscreen-3d{top:auto;bottom:calc(264px + env(safe-area-inset-bottom));transform:none}
 #viewport:not(:fullscreen):not(.is-expanded) #status{top:auto;bottom:calc(294px + env(safe-area-inset-bottom));transform:none;max-width:calc(100% - 82px)}
 #viewport:not(:fullscreen):not(.is-expanded) #collective-comfort{top:auto!important;bottom:calc(266px + env(safe-area-inset-bottom));max-width:calc(100% - 82px)}
 #viewport:fullscreen,#viewport.is-expanded{inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;height:100dvh!important;max-height:none!important;min-height:100dvh!important}
 #viewport:fullscreen>canvas:not(#follow-map),#viewport.is-expanded>canvas:not(#follow-map){width:100%!important;height:100%!important;max-height:none!important}
 body:not(.following-figure) #viewport:fullscreen #fullscreen-3d,body:not(.following-figure) #viewport.is-expanded #fullscreen-3d{top:auto;bottom:calc(100px + env(safe-area-inset-bottom));transform:none}
}

@media(max-width:760px){
 .program-panel{right:0!important}
 .program-panel #palette{flex:0 0 calc(100% - 100px);width:calc(100% - 100px);padding-right:8px;scroll-padding-right:8px}
 .program-panel .carousel-heading{display:none}
}

#palette{scroll-snap-type:none;scroll-behavior:auto}
.program-entry{transition:none}
@media(max-width:760px){
 body:not(.following-figure) #viewport:fullscreen #fullscreen-3d,body:not(.following-figure) #viewport.is-expanded #fullscreen-3d{bottom:calc(var(--fullscreen-footer-height,160px) + 20px + env(safe-area-inset-bottom))}
 body.following-figure #viewport:fullscreen #fullscreen-3d,body.following-figure #viewport.is-expanded #fullscreen-3d{bottom:calc(var(--fullscreen-footer-height,160px) + 64px + env(safe-area-inset-bottom))}
 body.following-figure #viewport:fullscreen #stop-follow,body.following-figure #viewport.is-expanded #stop-follow{bottom:calc(var(--fullscreen-footer-height,160px) + 20px + env(safe-area-inset-bottom))}
}

#status{font-size:11px;color:var(--maroon);text-shadow:none}
@media(max-width:760px){#status{font-size:9px}}

/* Empty carousel space passes through to the scene; actual controls stay interactive. */
#program-panel,#program-panel #palette,#program-panel .program-entry{pointer-events:none}
#program-panel button,#program-panel #filters,#program-panel .carousel-heading{pointer-events:auto}

/* Soft, translucent sidebar surfaces in the existing cream and red palette. */
aside#control-panel.control-panel,aside#detail-panel.inspector,
aside#control-panel.control-panel.mobile-open,aside#detail-panel.inspector.mobile-open{
 background:rgba(255,248,239,.55)!important;
 border:1px solid rgba(255,248,239,.72)!important;
 box-shadow:0 6px 24px rgba(66,37,29,.045)!important;
 backdrop-filter:none!important;border-radius:20px;padding:12px 14px;
}
#control-panel h2,#detail-panel h2,#detail-panel .section-title strong{color:var(--ink);font-size:14px;font-weight:600;letter-spacing:.01em}
#control-panel button,#detail-panel button{border-radius:12px;border-color:rgba(129,101,82,.16);background:rgba(255,248,239,.6);box-shadow:none;color:var(--ink)}
#control-panel button:hover,#detail-panel button:hover{background:rgba(255,248,239,.85);border-color:rgba(195,9,9,.25)}
#control-panel .views{padding:3px;border-radius:14px;background:rgba(227,201,175,.22);gap:3px}
#control-panel .views button{border:0;background:transparent;min-height:27px}
#control-panel .views button.active{background:rgba(195,9,9,.10);color:var(--maroon)}
#control-identity-form input,#detail-panel select{background:rgba(255,248,239,.55);border:1px solid rgba(129,101,82,.16);border-radius:9px;color:var(--ink)}
#control-panel .layers label{padding:2px 0;color:var(--ink)}
#control-panel input[type=checkbox],#control-panel input[type=range]{accent-color:var(--maroon)}
#control-panel .opacity-control output{font-variant-numeric:tabular-nums;color:var(--muted)}
#detail-panel .rule{height:1px;background:rgba(129,101,82,.12);border:0}
#detail-panel .installed-row{padding:6px 8px;margin:4px 0;border:1px solid rgba(255,248,239,.5);border-radius:12px;background:rgba(255,248,239,.32)}
#detail-panel .installed-row button{border:0;background:transparent;color:var(--muted);padding:3px;min-width:28px}
#detail-panel .installed-row button:hover{color:var(--maroon);background:rgba(195,9,9,.07)}
#detail-panel .bar{height:4px;border-radius:8px;background:rgba(129,101,82,.10);overflow:hidden}
#detail-panel .bar i{border-radius:8px}
#detail-panel .count{font-size:11px;gap:6px}
#detail-panel .count strong{font-weight:500;font-variant-numeric:tabular-nums}
@media(max-width:760px){
 aside#control-panel.control-panel.mobile-open,aside#detail-panel.inspector.mobile-open{padding:14px;border-radius:18px}
 #control-identity-form input{font-size:16px}
 #control-panel .views button,#control-identity-form button{min-height:32px}
}

/* Extend the live scene behind the sidebar, with text-only language controls. */
#viewport{right:0!important}
aside#control-panel.control-panel,aside#detail-panel.inspector,
aside#control-panel.control-panel.mobile-open,aside#detail-panel.inspector.mobile-open{
 background:transparent!important;backdrop-filter:none!important;box-shadow:none!important;
 border-color:rgba(129,101,82,.18)!important;
}
.language-switch{background:transparent!important;border:0!important;box-shadow:none!important;padding:0;gap:5px;right:22px;top:40px;margin:0}
.language-switch button,.language-switch button.active{background:transparent!important;border:0!important;border-radius:0;box-shadow:none!important;padding:2px 3px;min-height:24px;width:auto;font-size:11px;color:var(--muted)}
.language-switch button.active{color:var(--maroon);font-weight:600}
.language-switch button:hover{text-decoration:underline}
.language-switch span{font-size:10px;color:var(--muted)}
@media(max-width:760px){.language-switch{top:calc(12px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}.language-switch button{min-height:24px}}

/* Solid framed controls over an otherwise transparent sidebar. */
#control-panel button,#detail-panel button,#control-identity-form input,#detail-panel select{background:#fff8ef}
#control-panel .views{background:#f5e3d1;border:1px solid rgba(129,101,82,.14)}
#control-panel .views button{background:#fff8ef}
#control-panel .views button.active{background:#ead1c1;color:var(--maroon)}
#control-panel button:hover,#detail-panel button:hover{background:#faeddc}
#detail-panel .installed-row{background:#fff8ef;border-color:var(--line)}
#detail-panel .installed-row button{background:#fff8ef}
aside#control-panel.control-panel,aside#detail-panel.inspector,
aside#control-panel.control-panel.mobile-open,aside#detail-panel.inspector.mobile-open{background:#fff8ef!important}

@media(min-width:761px){
 #viewport:not(:fullscreen):not(.is-expanded) #status,
 #viewport:not(:fullscreen):not(.is-expanded) #collective-comfort{right:300px;max-width:calc(100% - 380px)}
}
/* Restore a native horizontal scroll surface on mobile. */
@media(max-width:760px){
 #program-panel #palette{pointer-events:auto;touch-action:pan-x;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 #program-panel #palette .program-entry{pointer-events:auto;touch-action:pan-x}
 #program-panel #palette button{touch-action:pan-x}
 html body aside#control-panel.control-panel.mobile-open,
 html body aside#detail-panel.inspector.mobile-open{background:#fff8ef!important;background-color:#fff8ef!important;background-image:none!important;opacity:1!important;z-index:40;backdrop-filter:none!important}
}

@media(hover:hover) and (pointer:fine){
 #palette .program-entry{pointer-events:auto;cursor:grab}
 #palette .card{cursor:grab}
 #palette.mouse-dragging,#palette.mouse-dragging *{cursor:grabbing!important;user-select:none}
 #palette img{-webkit-user-drag:none;user-select:none}
}

/* Extend desktop cards beneath the scene edges while keeping heading controls fixed. */
@media(min-width:761px){
 aside#program-panel.program-panel{overflow:visible}
 #program-panel #palette{width:100vw;max-width:none;margin-left:-28px}
 footer.credits{left:50%;right:auto;transform:translateX(-50%);justify-content:center}
}

@media(min-width:761px){
 #program-panel #palette{
  width:calc(100vw - 28px);margin-left:-14px;flex-shrink:0;
  padding:16px calc(50vw - 73px) 28px;

 }
}

@media(min-width:761px){
 .bottom{background:#fff8ef!important;border:1px solid var(--line)!important;border-radius:20px;box-shadow:0 4px 16px #42251d0a!important;padding:10px 14px}
}

@media(min-width:761px){
 #program-panel #palette{margin-left:-215px}
 .bottom{border-color:#e3c9af!important;border-radius:20px;padding:14px 17px}
}
@media(min-width:761px) and (max-width:1200px){
 #program-panel #palette{margin-left:-206px}
}

/* Carousel sits behind the framed menus, including its rotated cards. */
@media(min-width:761px){
 aside#program-panel.program-panel{z-index:3}
 .bottom{z-index:5}
 aside#control-panel.control-panel,aside#detail-panel.inspector{z-index:6}
}

@media(min-width:761px){
 #palette .add-program-entry{display:none}
 #add-program-navigation{width:32px;min-height:30px;padding:0;font-size:22px;color:var(--maroon);border-radius:9px}
}
@media(max-width:760px){#add-program-navigation{display:none}}

#add-program-navigation,.add-program-circle{background:var(--maroon)!important;color:#fff8ef!important;border-color:var(--maroon)!important}
#add-program-navigation:hover,.add-program-circle:hover{background:#a00808!important;border-color:#a00808!important}

/* Circular follow exit matches the fullscreen control. */
#stop-follow{width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;border-radius:50%;background:#fff8efeb;color:var(--maroon);border:1px solid var(--line);box-shadow:0 3px 10px #0002}
#stop-follow svg{width:22px;height:22px;pointer-events:none}
#stop-follow[hidden]{display:none}

@media(max-width:760px){
 body:not(.following-figure) #viewport:fullscreen #fullscreen-3d,body:not(.following-figure) #viewport.is-expanded #fullscreen-3d{bottom:calc(var(--fullscreen-footer-height,160px) + 40px + env(safe-area-inset-bottom))}
 body.following-figure #viewport:fullscreen #fullscreen-3d,body.following-figure #viewport.is-expanded #fullscreen-3d{bottom:calc(var(--fullscreen-footer-height,160px) + 88px + env(safe-area-inset-bottom))}
 body.following-figure #viewport:fullscreen #stop-follow,body.following-figure #viewport.is-expanded #stop-follow{bottom:calc(var(--fullscreen-footer-height,160px) + 40px + env(safe-area-inset-bottom))}
}

#record-camera{display:none;position:absolute;z-index:4;width:44px;height:44px;min-height:44px;padding:0;place-items:center;border-radius:50%;background:#fff8efeb;color:var(--maroon);border:1px solid var(--line);box-shadow:0 3px 10px #0002;transform:none}
#record-camera svg{width:22px;height:22px;pointer-events:none}
body.following-figure #record-camera,#viewport:fullscreen #record-camera,#viewport.is-expanded #record-camera{display:grid}
#record-camera.recording svg{display:none}
#record-camera.recording::after{content:attr(data-seconds);font-size:13px;font-weight:600;color:var(--maroon)}
#context-button{margin:6px 0;width:100%}
#context-dialog{width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:22px;overflow:auto;background:#fff8ef;border:1px solid var(--line);border-radius:20px;color:var(--ink)}
#context-dialog h2{margin:0 36px 10px 0}.context-close{position:absolute;right:12px;top:10px;width:32px;padding:0;font-size:24px;border-radius:50%}
.context-map{position:relative;height:min(48dvh,420px);min-height:220px;overflow:hidden;background:#f1e3d3;border-radius:12px;touch-action:none;cursor:grab}
.context-tiles{position:absolute;inset:0;pointer-events:none}.context-tiles img{position:absolute;width:256px;height:256px;max-width:none!important;user-select:none}
.context-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.context-site{fill:#c309092e;stroke:#c30909;stroke-width:2;pointer-events:all;cursor:move}.context-site-name{font:10px Arial;fill:#c30909;text-anchor:middle;pointer-events:none}
.context-zoom{position:absolute;left:10px;top:10px;display:grid;gap:4px}.context-zoom button{width:32px;height:32px;padding:0;background:#fff8ef;font-size:20px}
.context-attribution{position:absolute;right:0;bottom:0;font:10px Arial;background:#fff8efd9;padding:3px 5px;color:#8a2720}
.context-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.context-fields label{font-size:12px}.context-fields input{display:block;width:100%;box-sizing:border-box;padding:7px;font-size:12px}
.context-angle{display:block;font-size:13px;margin-top:12px}.context-angle output{float:right}.context-angle input{display:block;width:100%}.context-enabled{display:flex;align-items:center;gap:6px;font-size:12px}.context-enabled input{width:14px;height:14px}.context-ok{display:block;width:100%;background:var(--maroon);color:#fff8ef;margin-top:10px}.context-status{font-size:12px;color:var(--maroon)}
#osm-credit{position:absolute;right:8px;top:8px;font:9px Arial;color:var(--maroon);z-index:2}#osm-credit[hidden]{display:none}
@media(max-width:760px){#context-dialog{padding:16px}.context-map{height:40dvh}}
.context-zoom{z-index:3}
.context-zoom button{background:var(--maroon)!important;color:#fff8ef!important;border-color:var(--maroon)!important;font-weight:600;line-height:1;box-shadow:0 2px 8px #42251d33}
.composition-chart svg{display:block;width:140px;height:140px;margin:4px auto 12px}
.composition-legend .count{margin:5px 0;font-size:11px;gap:6px}.composition-legend .count span{flex:1}.composition-legend .count strong{white-space:nowrap}
@media(any-pointer:coarse){
 #program-panel #palette{pointer-events:auto!important;touch-action:pan-x!important;overflow-x:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
 #program-panel #palette .program-entry,#program-panel #palette button{pointer-events:auto!important;touch-action:pan-x!important}
}
.context-search{display:flex;gap:8px;margin:10px 0}.context-search input{min-width:0;flex:1;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px}.context-search button{background:var(--maroon);color:#fff8ef;min-height:36px;padding:6px 12px}.context-results{font-size:12px;max-height:140px;overflow:auto;margin-bottom:8px}.context-results button{display:block;width:100%;text-align:left;font-size:12px;min-height:32px;padding:6px 8px;margin:3px 0}
#context-dialog .context-search{display:flex;width:100%;gap:6px}
#context-dialog .context-search input{flex:1 1 0;width:0;min-width:0;padding:8px;font-size:13px}
#context-dialog .context-search button{flex:0 0 48px;width:48px;min-width:48px;min-height:34px;padding:4px;font-size:12px;margin:0}
.context-building{fill:#c30909;fill-opacity:.72;stroke:#fff8ef;stroke-width:1;pointer-events:none}.context-parking{fill:#fff8ef;fill-opacity:.7;stroke:#c30909;stroke-width:1;pointer-events:none}.context-facing{fill:none;stroke:#c30909;stroke-width:2;pointer-events:none}.context-pivot{fill:#fff8ef;stroke:#c30909;stroke-width:1.5;pointer-events:none}.context-site-name{fill:#fff8ef;font:bold 10px Arial}.context-parking-name{fill:#c30909;font:9px Arial;text-anchor:middle;pointer-events:none}
#context-dialog .context-close,#context-dialog .context-close:hover{background:transparent;border:0;box-shadow:none;color:var(--maroon);width:28px;height:28px;min-height:28px;padding:0;border-radius:0;font-size:25px;line-height:1}
.context-map-layers{display:flex;gap:6px;margin:6px 0 10px}.context-map-layers button{min-height:30px;padding:4px 12px;font-size:12px;flex:0 0 auto}.context-map-layers button.active{background:var(--maroon);color:#fff8ef}

#context-dialog .context-map-layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin:8px auto 12px}#context-dialog .context-map-layers button{position:static;display:block;width:100%;min-width:0;min-height:36px;margin:0;padding:7px 12px;border:1px solid var(--maroon);border-radius:8px;background:#fff8ef;color:var(--maroon);font-size:12px;text-align:center}#context-dialog .context-map-layers button.active{background:var(--maroon);color:#fff8ef}

#control-panel #context-button{background:var(--maroon);color:#fff8ef;border-color:var(--maroon);font-weight:600}#control-panel #context-button:hover{background:#a40808;color:#fff8ef}#control-panel #context-button:focus-visible{outline:2px solid var(--maroon);outline-offset:3px}