*{box-sizing:border-box}body{margin:0;background:#f2eee6;color:#202322;font:16px/1.6 Arial,sans-serif}header{padding:24px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d6d1c7}header a{font-size:22px;font-weight:800;text-decoration:none;color:inherit;letter-spacing:1px}header a span{font-size:12px;color:#9b501c;margin-left:12px}.badge,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700}.badge{color:#736d63}main{max-width:1600px;margin:auto;padding:40px 5%}.intro{max-width:700px;margin-bottom:40px}.eyebrow{color:#a45620}h1{font-size:clamp(36px,5vw,66px);line-height:1.07;font-weight:500;letter-spacing:-2px;margin:18px 0}h1 em{font-style:normal;color:#ad5e28}.intro>p:last-child{max-width:570px;color:#62665f}.planner{display:grid;grid-template-columns:310px 1fr;border:1px solid #d7d1c6;border-radius:18px;overflow:hidden;background:#faf8f3;box-shadow:0 20px 60px #3027170b}aside{padding:26px;border-right:1px solid #ded8ce}fieldset{border:0;padding:0;margin:25px 0}legend{font-size:14px;font-weight:700;margin-bottom:10px}.seg{display:flex;gap:8px}.seg button{flex:1}.layouts{display:grid;gap:8px}button{font:inherit;cursor:pointer;border:1px solid #d6d0c6;background:transparent;color:inherit;border-radius:8px;padding:10px 14px;transition:background .2s,border-color .2s}button:hover{background:#eee6d8}button[aria-pressed=true]{background:#242a28;color:white;border-color:#242a28}.layouts button{text-align:left}.layouts b{display:block;font-size:14px}.layouts span{font-size:11px;opacity:.7}.slider{display:block;font-size:13px}.slider strong{float:right}input[type=range]{width:100%;accent-color:#ba6426;margin-top:17px}.small,.basis{font-size:12px;color:#77786f}.basis{display:grid;padding-top:14px;border-top:1px solid #ded8ce}.basis strong{color:#363e38}.download{margin-top:22px;background:#b85f22;color:white;width:100%;font-size:13px}.download:hover{background:#914719}.visual{position:relative;min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#f8f6ef,#e8e4da)}.viewtop,.viewbottom{display:flex;align-items:center;justify-content:space-between;padding:20px;gap:12px;font-size:12px}.viewtop button,.viewbottom button{font-size:12px;padding:7px 10px;background:#ffffff80}.viewtop{min-height:75px}.viewtop>span{font-weight:700}canvas{display:block;width:100%;height:490px;flex:1;min-height:350px;touch-action:pan-y;cursor:grab}canvas:active{cursor:grabbing}.viewbottom{padding-top:0;color:#686d64}.key{display:flex;gap:20px;flex-wrap:wrap;padding:0 20px 22px;font-size:11px;color:#646b61}.key i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:2px}.results{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr 1fr;background:#252d29;color:#fff;padding:28px 32px;gap:25px}.results span{font-size:12px;color:#c1c8be}.results strong{display:block;font-size:29px;font-weight:400;margin:8px 0}.results b{font-size:44px;font-weight:500;color:#efb179}.results small{font-size:17px}.results p{font-size:12px;color:#b1baaf;margin:0}.note{font-size:12px;color:#73776d;max-width:1100px;margin:20px 0}.next{max-width:700px;padding:30px 0}h2{font-size:30px;font-weight:500}.next>p:last-child{color:#64695f}button:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid #d57532;outline-offset:3px}@media(max-width:850px){.planner{grid-template-columns:1fr}.visual{grid-row:1}aside{border-right:0;border-top:1px solid #ddd4c7}.results{grid-template-columns:1fr 1fr;padding:22px;gap:20px}.results>div:first-child{grid-column:1/-1}.results b{font-size:38px}canvas{height:330px;min-height:300px}.viewtop{padding:15px;flex-wrap:wrap}.key{gap:12px}.intro{margin-bottom:25px}main{padding-top:25px}.badge{font-size:8px;letter-spacing:1px}.layouts{grid-template-columns:repeat(3,1fr)}.layouts button{padding:10px}.layouts span{display:none}header a{font-size:17px}header a span{margin-left:5px;font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.embedded header,.embedded .intro,.embedded .next{display:none}.embedded main{padding:0;max-width:none}.embedded .planner{box-shadow:none}.embedded aside{max-height:840px;overflow:auto}.embedded canvas{max-height:700px}.theme-row{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:8px;margin:9px 0;font-size:12px}select{font:inherit;width:100%;min-height:40px;border:1px solid #c8c4bb;border-radius:6px;background:#f9f6ef;color:#263027;padding:5px;font-size:12px}.contact-link{display:inline-block;text-decoration:none;width:auto}#themes{max-height:220px;overflow:auto}@media(max-width:850px){.embedded aside{max-height:none}.embedded .visual{grid-row:auto}.embedded aside{grid-row:1}.embedded canvas{height:350px}.embedded .planner{overflow:hidden}.embedded .layouts{grid-template-columns:repeat(3,1fr)}}

#themes{max-height:none;overflow:visible}.room-config{padding:14px 0;border-bottom:1px solid #d6d1c7;display:grid;gap:8px}.room-config strong{font-size:13px}.room-config label{font-size:11px;display:grid;grid-template-columns:1fr 110px;align-items:center;gap:8px}.capacity{grid-column:1/-1;margin:0;padding:18px 28px;background:#e4d8c5;font-size:13px}.embedded aside{max-height:1000px}.embedded canvas{max-height:800px}.embedded .note{padding:0 10px}@media(max-width:850px){.embedded aside{max-height:none}#themes{display:grid;grid-template-columns:1fr 1fr;gap:12px}.room-config label{display:block}.room-config select{margin-top:5px}.capacity{font-size:12px}}
/* VAR LIVE digital treatment — staging revision 2 */
:root{color-scheme:dark}body{background:#101319;color:#e9edf2}.embedded .planner{background:#141920;border:1px solid #363b43;border-radius:18px;box-shadow:inset 0 1px 0 #ff9a3022,0 0 40px #ff790008}.embedded aside{background:linear-gradient(155deg,#1b2029,#11151d);border-color:#343943}.eyebrow{color:#ff9a3c}legend,.slider,.basis strong{color:#edf0f4}button{border-color:#434853;color:#cbd1db;background:#1a202a}button:hover{background:#2b241e;border-color:#e88537;box-shadow:0 0 14px #ff8a1818}button[aria-pressed=true]{background:linear-gradient(125deg,#ff9c39,#db631e);border-color:#ffa24b;color:#17120d;box-shadow:0 0 18px #ff85142e}.small,.basis{color:#a5aebb}.basis,.room-config{border-color:#353b44}input[type=range]{accent-color:#ff9638}select{background:#10151d;border-color:#414956;color:#e1e6ec}.download{background:#ed822a;color:#14100d;border-color:#ffa04c;font-weight:700}.download:hover{background:#ff9d43}.visual{background:radial-gradient(ellipse at 50% 46%,#283442 0%,#141d28 52%,#0c1119 100%);box-shadow:inset 0 0 90px #0004}.visual:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#9eafc408 1px,transparent 1px),linear-gradient(90deg,#9eafc408 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(transparent,#0009,transparent)}.viewtop,.viewbottom,.key{position:relative;z-index:1}.viewtop>span{color:#e4eaf1}.viewtop button,.viewbottom button{background:#151d28;border-color:#424c5a;color:#d1d8e2}.viewbottom,.key{color:#aab5c3}.capacity{background:linear-gradient(90deg,#302217,#1d2027);color:#ffc383;border-top:1px solid #d875294d;border-bottom:1px solid #d875294d}.results{background:linear-gradient(120deg,#171d26,#10151d);border-top:1px solid #ff94361f}.results span,.results p{color:#a8b3c1}.results strong{color:#e7edf5}.results b{color:#ffa04a;text-shadow:0 0 26px #ff861a22}.note{color:#a2acb9}.room-config strong{color:#ffc18a}.room-config label{color:#b2bdcb}button:focus-visible,canvas:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffa454;outline-offset:3px}canvas{position:relative}.embedded .planner{isolation:isolate}#themes{scrollbar-color:#a86938 #141920}aside{scrollbar-color:#a86938 #141920}.next>p:last-child{color:#b4becb}

.room-inspector{position:relative;margin:0 20px 20px;padding:16px;background:#141b25;border:1px solid #46433b;border-radius:10px}#room-picks{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}#room-picks button{font-size:12px;padding:7px 11px}#room-empty{font-size:13px;color:#b1bdcd}#room-detail-content:not([hidden]){display:grid;grid-template-columns:110px 1fr 1fr 1fr;gap:16px;align-items:center}#room-detail-content img{width:110px;height:55px;object-fit:contain}#room-detail-content strong{color:#ffb778;font-size:17px}#room-detail-content span,#room-detail-content small{display:block;font-size:11px;color:#abb6c6}#room-detail-content b{font-size:13px;color:#e7edf4}#room-detail-content p{grid-column:1/-1;margin:0;font-size:11px;color:#98a6b8}@media(max-width:850px){#room-detail-content:not([hidden]){grid-template-columns:1fr 1fr}.room-inspector{margin:0 12px 18px}#room-picks button{min-height:40px}}

/* Simplified space-planning view */
.embedded aside{max-height:none;overflow:visible}.visual{background:radial-gradient(ellipse at 50% 45%,#344459 0%,#1b2736 50%,#101722 100%)}.embedded canvas{min-height:380px}.key i{box-shadow:0 0 8px #8ea9c522}@media(max-width:850px){.embedded canvas{min-height:320px}}

button:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}

.arena-groups:not([hidden]){display:flex;gap:18px;flex-wrap:wrap;padding:15px 20px;color:#edf1f7;font-size:13px}.arena-groups i{display:inline-block;width:12px;height:12px;margin-right:8px;border:1px solid #ffffff55;border-radius:3px}#arena-setup{font-size:12px;min-height:44px}

/* Performance and flow audit: stable model viewport, no nested control scrolling. */
.visual{align-self:start}.embedded canvas{flex:none;height:480px;min-height:0;max-height:none}.embedded aside{overflow:visible;max-height:none}canvas{touch-action:pan-y}.visual:before{display:none}.embedded .viewtop{min-height:70px}.viewtop button,.viewbottom button{min-height:40px}.planner{align-items:start}.results,.capacity{align-self:stretch}@media(max-width:850px){.embedded canvas{height:340px;min-height:0}.viewtop{gap:8px}.viewtop button{padding:8px}.visual{width:100%}}

/* Ambient light is a composited layer, not a model redraw loop. */
.model-stage{position:relative;isolation:isolate;overflow:hidden;background:transparent}.model-stage:before{content:"";position:absolute;inset:15% 8% 3%;background:radial-gradient(ellipse at 50% 55%,#f18a2526,transparent 65%);pointer-events:none;animation:ambient-breathe 6s ease-in-out infinite alternate}.model-stage canvas{position:relative;z-index:1;transform-origin:50% 55%}#ambient-light{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}#ambient-path{fill:none;stroke:#ffac59;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 3px #ff912f);animation:light-breathe 5s ease-in-out infinite alternate}.motion-paused:before,.motion-paused #ambient-path{animation-play-state:paused!important}.viewtop>div{display:flex;gap:4px;flex-wrap:wrap}@keyframes ambient-breathe{from{opacity:.25;transform:scale(.97)}to{opacity:.85;transform:scale(1.03)}}@keyframes light-breathe{from{opacity:.2}to{opacity:.8}}@media(prefers-reduced-motion:reduce){.model-stage:before,#ambient-path{animation:none!important;opacity:.3}}

/* Revision 13: clear decision sequence and visible portal lighting. */
.control-title{font-size:23px;font-weight:700;margin:0 0 8px}.control-intro{font-size:12px;color:#adb8c7;margin:0 0 22px}.control-step{border-top:1px solid #39414c;padding:18px 0 8px}.control-step h3{font-size:11px;color:#ff9a3c;letter-spacing:1px;margin:0 0 16px}.control-step h3 span{font-size:15px;color:#f0f3f7;letter-spacing:0;margin-left:9px}.control-step fieldset{margin:14px 0 18px}.control-step .small{line-height:1.5}.control-step .slider{margin-top:18px}.control-step legend{font-size:12px;color:#b8c2d0}.control-step #modes{grid-template-columns:1fr}.control-step .layouts span{display:block}.control-step .layouts button{min-height:48px}.model-stage:before{inset:0;background:radial-gradient(ellipse at 50% 65%,#ff8a2855,transparent 65%);animation:ambient-breathe 3s ease-in-out infinite alternate}#ambient-path{stroke:#ffcc8b;stroke-width:2.3;filter:drop-shadow(0 0 4px #ff8b24);animation:portal-breathe 2.8s ease-in-out infinite alternate}#ambient-halo{fill:none;stroke:#ff8c30;stroke-width:9;stroke-linecap:round;filter:blur(4px);animation:portal-breathe 2.8s ease-in-out infinite alternate}.motion-paused #ambient-halo{animation-play-state:paused!important}@keyframes portal-breathe{from{opacity:.3}to{opacity:1}}@media(prefers-reduced-motion:reduce){#ambient-halo,#ambient-path{animation:none!important;opacity:.65}}@media(max-width:850px){.control-step #layouts{grid-template-columns:repeat(3,minmax(0,1fr))}.control-step #layouts span{font-size:10px}.control-step #modes{grid-template-columns:repeat(2,minmax(0,1fr))}.embedded aside{padding:20px}.control-step{padding-top:14px}}

/* Arrangement-first visual controls */
[hidden]{display:none!important}.plan-icon{width:100%;height:45px;display:block;margin-bottom:8px;fill:#788b99}.plan-icon .plan-shell{fill:none;stroke:#687886;stroke-width:1}.layouts button[aria-pressed=true],.arena-cards button[aria-pressed=true]{background:#30271d;color:#fff;border-color:#ff9b42;box-shadow:inset 0 0 0 1px #ff9b4233}.layouts button[aria-pressed=true] .plan-icon{fill:#ffad61}#layouts{grid-template-columns:repeat(3,minmax(0,1fr))}#layouts button{padding:9px 6px;text-align:center}#layouts b{font-size:11px}#layouts span{display:none}#arena-setup{display:none}.arena-cards{display:grid;gap:8px}.arena-cards button{text-align:left;font-size:12px}.arena-diagram{display:flex;gap:5px;height:24px;margin-bottom:7px}.arena-diagram i{flex:1;border:1px solid #ffffff55;border-radius:3px}.space-options summary{cursor:pointer;list-style:none;color:#ff9b42;font-size:11px;padding-bottom:14px}.space-options summary span{color:#edf2f7;font-size:15px;font-weight:700;margin-left:8px}.space-options summary:after{content:'+';float:right;font-size:20px}.space-options[open] summary:after{content:'−'}.space-options summary small{display:block;color:#aab4c2;margin:6px 0 0 25px}.range-control{display:flex;align-items:center;gap:10px}.range-control input{margin:0;min-width:0}.range-control button{padding:4px;min-width:36px;min-height:36px}.control-step legend{margin-bottom:8px}.visual{position:sticky;top:12px}@media(max-width:850px){.visual{position:relative;top:auto}.control-step #layouts span{display:none}} 

.visual .results{grid-template-columns:1.3fr 1fr 1fr;padding:20px;gap:14px}.visual .results b{font-size:32px}.visual .results strong{font-size:22px}.visual .capacity{padding:14px 20px}@media(max-width:850px){.visual .results{grid-template-columns:1fr 1fr}.visual .results>div:first-child{grid-column:1/-1}}

@media(pointer:coarse){.range-control button,.viewtop button,.viewbottom button{min-width:44px;min-height:44px}.seg button{min-height:44px}}

/* Games-first review: quiet, collapsible model controls. */
.model-tools{position:absolute;right:10px;top:12px;z-index:5}.model-tools summary{list-style:none;cursor:pointer;width:38px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #68717d;border-radius:9px;background:#171f2deb;color:#ffae65;box-shadow:0 3px 12px #0003}.model-tools summary::-webkit-details-marker{display:none}.tools-arrow{font-size:28px;line-height:1;transition:transform .18s}.model-tools[open] .tools-arrow{transform:rotate(180deg)}.tools-panel{position:absolute;top:0;right:46px;width:176px;padding:12px;background:#141c28fa;border:1px solid #59616c;border-radius:10px;box-shadow:0 8px 24px #0006;display:grid;gap:7px}.tools-panel p{font-size:12px;font-weight:700;margin:0 0 4px;color:#ffb36e}.tools-panel button{width:100%;font-size:12px;min-height:40px;padding:7px 10px;text-align:left}.tools-zoom>div{display:flex;gap:7px}.tools-zoom button{text-align:center}.visual .viewtop{padding-right:65px;min-height:68px}.model-tools summary:focus-visible{outline:2px solid #ffa454;outline-offset:3px}@media(pointer:coarse){.model-tools summary{width:44px}.tools-panel{right:52px}.tools-panel button{min-height:44px}}@media(prefers-reduced-motion:reduce){.tools-arrow{transition:none}}

/* Mobile scrolling: the host page is the only scrolling surface. */
html.planner-embedded,body.embedded{overflow:clip;overscroll-behavior:auto}
.embedded aside,.embedded .visual{overscroll-behavior:auto}
canvas{touch-action:pan-y pinch-zoom}
@media(max-width:850px){.embedded .planner{overflow:clip}.embedded aside{touch-action:pan-y pinch-zoom}}

/* Mobile34: model first, controls in an explicit editor. */
.mobile-summary{display:none}#layout-editor{padding:0;border:1px solid #57616c;border-radius:18px 18px 0 0;background:#141c27;color:#edf2f7;box-shadow:0 -12px 50px #0008;width:100%;max-width:none;margin:0;position:fixed;inset:0 auto auto 0;height:var(--sheet-height,80dvh);max-height:var(--sheet-height,80dvh);overflow:hidden}
#layout-editor[open]{display:flex;flex-direction:column;animation:sheet-enter .22s ease-out}#layout-editor::backdrop{background:#05090dd9}.sheet-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1;-webkit-overflow-scrolling:touch}.sheet-content aside{border:0;padding:18px 20px}.sheet-actions{flex-shrink:0;padding:12px 20px max(12px,env(safe-area-inset-bottom));border-top:1px solid #46505c;background:#19222e}.sheet-actions button{width:100%;min-height:46px;background:#ee9239;color:#15191f;font-weight:bold}.sheet-content .control-title{font-size:20px}.sheet-content .control-intro{margin-bottom:12px}.sheet-content .control-step{padding-top:12px}.sheet-content .control-step h3{margin-bottom:10px}.sheet-content .control-step fieldset{margin:10px 0}.sheet-content .plan-icon{height:32px}.sheet-content .basis{display:none}@keyframes sheet-enter{from{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}
@media(max-width:850px){.planner>aside{display:none}.embedded .planner{display:block}.visual{display:flex;position:relative}.visual>.viewtop{display:none}.model-stage{order:0}.embedded canvas{height:300px}.visual>.results{order:1;padding:16px 20px;display:block}.visual>.results>div:not(:first-child){display:none}.visual .results strong{margin:4px 0}.visual .results b{font-size:30px}.visual .results p{margin-bottom:0}.mobile-summary{order:2;display:flex;gap:12px;align-items:center;padding:14px 20px;border-top:1px solid #424a54}.mobile-summary p{margin:0;flex:1;font-size:12px;line-height:1.5}.mobile-summary button{flex-shrink:0;background:#30271d;border-color:#e99547;color:#fff;min-height:44px;max-width:44%;font-size:12px;padding:8px 12px}.visual>.capacity{order:3;margin:0;font-size:12px;padding:12px 20px}.visual>.arena-groups{order:4}.visual>.key{order:5;padding:12px 20px;gap:12px}.visual>.viewbottom{order:6;padding:8px 20px;font-size:10px}.visual>#save{order:7;align-self:stretch;margin:8px 20px 20px;width:auto}.model-tools{top:10px}.sheet-content .control-step #modes{grid-template-columns:1fr 1fr}.sheet-content{touch-action:pan-y pinch-zoom}}
@media(prefers-reduced-motion:reduce){#layout-editor[open]{animation:none}}

/* Mobile edit control: prominent full-width action with smooth border lighting. */
@property --edit-light-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@media(max-width:850px){
.mobile-summary{flex-direction:column;align-items:stretch;gap:10px;padding:16px 20px 18px}
.mobile-summary p{width:100%}
.mobile-summary #edit-layout{position:relative;isolation:isolate;display:block;width:100%;max-width:none;min-height:56px;flex-shrink:0;padding:14px 22px;border:2px solid transparent;border-radius:12px;font-size:16px;font-weight:700;letter-spacing:.02em;color:#fff5e9;background:linear-gradient(#30251b,#30251b) padding-box,conic-gradient(from var(--edit-light-angle),#895424 0deg,#b47737 200deg,#ffc67a 250deg,#fff0d5 275deg,#f8ad59 300deg,#895424 340deg) border-box;box-shadow:0 0 16px #ef9a3c28;animation:editBorderLight 3.5s linear infinite;cursor:pointer}
.mobile-summary #edit-layout:hover{box-shadow:0 0 22px #ef9a3c48}
.mobile-summary #edit-layout:focus-visible{outline:3px solid #ffd49c;outline-offset:4px}
.mobile-summary #edit-layout:active{transform:translateY(1px)}
}
@keyframes editBorderLight{to{--edit-light-angle:360deg}}
@media(prefers-reduced-motion:reduce){.mobile-summary #edit-layout{animation:none}}