:root{font-family:Inter,Arial,sans-serif;color:#193e33;background:#f4f7f4;font-synthesis:none;--green:#166348;--line:#dce5de}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit;color:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 13px;font-weight:650}button:hover{background:#edf5ef;border-color:#85b39b}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #e6a04a;outline-offset:3px}button:disabled{opacity:.4;cursor:default}a{color:inherit}.presentation{height:100svh;min-height:600px;padding:16px 24px 20px;display:grid;grid-template-rows:36px 66px minmax(0,1fr);gap:12px;max-width:1900px;margin:auto}.presentation:fullscreen{background:#f4f7f4;max-width:none}header{display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;font-size:22px;font-weight:800;letter-spacing:-.6px}.brand span{color:#2c8961}.review{font-size:12px;color:#6b7c73}.controls{display:grid;grid-template-columns:minmax(210px,1.3fr) minmax(145px,.8fr) minmax(170px,1fr) 150px;gap:8px}.controls>label,.controls>button{background:white;border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;justify-content:center;text-align:left;min-width:0}.controls span{font-size:11px;color:#5b7568;margin-bottom:4px}.controls strong{font-size:14px}.controls small{font-weight:400;color:#5c7568;margin-left:7px}.controls select{background:none;border:0;font-size:14px;font-weight:650;width:100%;padding:0;outline-offset:7px}.controls #fullscreen{flex-direction:row;align-items:center;gap:9px}.controls .screen-icon{font-size:24px;margin:0;color:var(--green)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;min-height:0}.scene,.inspector{border:1px solid var(--line);border-radius:18px;background:white;min-height:0;overflow:hidden}.scene{display:grid;grid-template-rows:44px minmax(0,1fr) 36px}.scene-caption{display:flex;justify-content:space-between;align-items:center;padding:0 17px;font-size:13px;gap:12px}.scene-caption span{font-size:11px;color:#718277}.canvas-space{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;container-type:size}#map-stage{position:relative;width:min(100cqw,150cqh);height:min(66.6667cqw,100cqh);flex:none;isolation:isolate}#map-stage img{display:block;width:100%;height:100%;object-fit:contain}#zones,#connections,#hotspots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.zone{position:absolute;background:transparent;border:1px solid transparent;border-radius:20%;pointer-events:auto;padding:0}.zone:hover{background:#17674909;border:1px dashed #73a487}.zone.active{background:#17674908;border:1px solid #73a487}.hotspot{position:absolute;width:27px;height:27px;padding:0;transform:translate(-50%,-50%);border:1.5px solid #27815c;border-radius:50%;background:#fffefb;box-shadow:0 2px 5px #133e3920;color:#164b37;font-size:11px;line-height:1;font-weight:800;pointer-events:auto;z-index:3;transition:background .15s,box-shadow .15s}.hotspot:hover,.hotspot.active{color:white;background:var(--green);box-shadow:0 0 0 4px #e1b45b70;z-index:5}.hotspot.related{border-color:#c47628;background:#fff0d4}.hotspot.muted{opacity:.42}.connection{fill:none;stroke:#d8873c;stroke-width:5;stroke-dasharray:10 7;vector-effect:non-scaling-stroke;animation:flow 2s linear infinite}.halo{fill:none;stroke:#fff;stroke-width:9;vector-effect:non-scaling-stroke}.edge-hit{fill:none;stroke:transparent;stroke-width:20;pointer-events:stroke;cursor:pointer;vector-effect:non-scaling-stroke}.edge-hit:focus{stroke:#d8873c60;outline:0}.scene-footer{display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-top:1px solid #f1f3ef;font-size:10px;color:#6e7c73}.scene-footer button{font-size:11px;border:0;padding:5px 8px}.scene-footer i{display:inline-block;width:6px;height:6px;background:#27815c;border-radius:50%;margin-right:5px}.inspector{padding:21px;display:flex;flex-direction:column;gap:12px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.1px;color:#487c63;margin:0}.inspector h1,.inspector h2{font-size:23px;line-height:1.16;margin:0;letter-spacing:-.4px}.inspector p{font-size:13px;line-height:1.5;margin:0;color:#52665b}.inspector .number{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.8px;font-weight:700}.number b{font-size:18px;width:36px;height:36px;border-radius:10px;background:#e6f2e9;display:grid;place-items:center;letter-spacing:0}.tabs{display:flex;border-bottom:1px solid var(--line);gap:7px}.tabs button{font-size:10px;padding:10px 0;border:0;border-radius:0;flex:1;background:none;color:#708076;white-space:nowrap}.tabs button[aria-selected=true]{color:var(--green);border-bottom:2px solid var(--green)}.tab-content{min-height:0;flex:1}.steps{list-style:none;padding:0;margin:0;display:grid;gap:13px;counter-reset:step}.steps li{display:flex;gap:9px;font-size:13px;line-height:1.45}.steps li:before{counter-increment:step;content:counter(step);color:#3c805d;flex:none;font-size:11px;width:20px;height:20px;background:#edf5ef;border-radius:50%;display:grid;place-items:center}.benefits{display:grid;gap:12px}.benefit{font-size:12px;line-height:1.4}.benefit b{display:block;color:#2c654b;margin-bottom:3px}.related-list{display:flex;flex-wrap:wrap;gap:6px}.related-list button{font-size:11px;padding:8px;line-height:1.3;text-align:left}.card-foot{display:flex;gap:7px;margin-top:auto}.card-foot button{font-size:12px;flex:1}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover{background:#0d5139;color:#fff}.details-button{display:none}.welcome-icon{width:50px;height:50px;border:1px solid #b7d1be;background:#f1f7f1;border-radius:15px;display:grid;place-items:center;font-size:20px;font-weight:750}.welcome-list{display:grid;gap:12px;margin:14px 0}.welcome-list div{font-size:13px;line-height:1.4;display:flex;gap:10px}.welcome-list b{color:#42815f}.step-controls{display:flex;gap:6px;margin-top:auto}.step-controls button{font-size:11px;padding:9px 10px;flex:1}.step-count{font-size:11px;color:#7b8a7f}.route-gap{font-size:12px;color:#8d3f2a;background:#fff1e5;padding:8px;border-radius:8px}.catalog-placeholder{max-width:1200px;margin:45px auto;padding:25px;color:#617468;border-top:1px solid #dce5de}.catalog-placeholder h2{font-size:24px;color:#284d3a}dialog{border:1px solid var(--line);border-radius:20px;padding:23px;max-width:620px;width:calc(100% - 28px);max-height:85svh;color:#193e33;box-shadow:0 30px 120px #153c3440}dialog::backdrop{background:#17382c66;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.dialog-head h2{font-size:23px;margin:5px 0}.dialog-head button{font-size:18px;padding:6px 10px}.dialog-foot{display:flex;justify-content:space-between;margin-top:16px}#module-search{border:1px solid var(--line);border-radius:10px;padding:12px;width:100%;margin-bottom:12px}#module-list{overflow:auto;max-height:48svh;display:grid;gap:4px}.module-row{display:flex;align-items:center;gap:10px;padding:10px;font-size:13px;background:#f6f8f5;border-radius:8px}.module-row b{color:#2c7b50}.module-row input{width:19px;height:19px;accent-color:var(--green);margin-left:auto}#detail-body h2{font-size:25px}#detail-body p,#detail-body li{line-height:1.5;font-size:15px}#detail-body .benefit{font-size:14px;margin-bottom:10px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}@keyframes flow{to{stroke-dashoffset:-34}}@media(prefers-reduced-motion:reduce){.connection{animation:none}}
@media(max-width:1100px){.presentation{padding:12px 14px 14px;gap:9px}.workspace{grid-template-columns:minmax(0,1fr) 270px;gap:10px}.inspector{padding:16px;gap:10px}.inspector h2{font-size:21px}.controls{grid-template-columns:minmax(170px,1.2fr) 140px minmax(150px,1fr) 125px}.controls strong,.controls select{font-size:12px}.controls>label,.controls>button{padding:9px 10px}.hotspot{width:24px;height:24px;font-size:10px}.scene-caption span{display:none}}
@media(max-width:800px) and (min-width:601px){.workspace{grid-template-columns:minmax(0,1fr) 240px}.inspector{padding:14px}.inspector h2{font-size:19px}.inspector p,.steps li{font-size:12px}.controls{grid-template-columns:1.2fr 1fr 1fr 110px}.controls strong,.controls select{font-size:11px}.hotspot{width:21px;height:21px;font-size:9px}.scene-caption{font-size:12px}}
@media(max-width:600px){.presentation{padding:9px 10px 12px;min-height:570px;grid-template-rows:28px 90px minmax(0,1fr);gap:8px}.brand{font-size:18px}.review{font-size:9px;max-width:110px;text-align:right}.controls{grid-template-columns:1.2fr 1fr;grid-template-rows:42px 42px;gap:6px}.controls>label,.controls>button{padding:5px 9px;border-radius:9px}.controls span{font-size:8px;margin-bottom:2px}.controls strong,.controls select{font-size:11px}.controls #fullscreen{justify-content:center}.controls .screen-icon{font-size:19px}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 200px;gap:8px}.scene{grid-template-rows:30px minmax(0,1fr) 26px;border-radius:13px}.scene-caption{padding:0 10px;font-size:11px}.scene-caption span{display:none}.scene-footer{font-size:8px;padding:0 8px}.scene-footer button{font-size:9px}.hotspot{width:21px;height:21px;font-size:9px;border-width:1px;box-shadow:0 1px 3px #254c3520}.inspector{padding:12px 14px;border-radius:13px;gap:7px;position:relative}.inspector h2{font-size:18px;line-height:1.1;padding-right:4px}.inspector p{font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.inspector .number{position:absolute;right:13px;top:12px}.number b{width:28px;height:28px;font-size:13px;border-radius:8px}.number span{display:none}.inspector h2{padding-right:34px}.tabs{gap:8px}.tabs button{font-size:10px;padding:6px 0}.tab-content{overflow:hidden}.steps{gap:5px}.steps li{font-size:11px;line-height:1.35}.steps li:before{width:16px;height:16px;font-size:9px}.steps li:nth-child(n+3){display:none}.benefits{grid-template-columns:1fr 1fr;gap:6px}.benefit{font-size:10px;line-height:1.3}.benefit:nth-child(n+3){display:none}.related-list{gap:4px}.related-list button{font-size:10px;padding:5px 7px}.card-foot button{padding:6px 9px;font-size:10px}.details-button{display:block}.welcome-icon{display:none}.welcome-list{display:none}.inspector .welcome-copy{font-size:12px}.step-controls button{padding:7px 10px}.step-count{font-size:10px}.route-gap{font-size:10px;padding:5px}.catalog-placeholder{margin:25px 12px;padding:20px 0}.catalog-placeholder h2{font-size:20px}}
@media(max-width:600px) and (max-height:700px){.workspace{grid-template-rows:minmax(0,1fr) 175px}.presentation{min-height:540px}.inspector{gap:5px}.inspector h2{font-size:16px}.inspector p{font-size:11px}.tabs button{padding:4px 0}.hotspot{width:19px;height:19px;font-size:8px}}
/* Phone composition: give the full-width image its natural height, then use
   remaining screen space for readable information instead of empty canvas. */
@media(max-width:600px){
.workspace{grid-template-rows:calc((100vw - 22px)*.666667 + 56px) minmax(0,1fr)}
.inspector{padding:14px 15px;gap:9px}
.inspector h2{font-size:20px;line-height:1.15}
.inspector p{font-size:13px;line-height:1.4}
.tabs button{font-size:11px;padding:8px 0;min-height:35px}
.steps{gap:9px}.steps li{font-size:13px;line-height:1.4}.steps li:before{width:20px;height:20px;font-size:10px}.steps li:nth-child(n+3){display:flex}
.benefits{grid-template-columns:1fr 1fr;gap:10px}.benefit{font-size:11px;line-height:1.4}.benefit:nth-child(n+3){display:block}
.card-foot button{min-height:40px;font-size:12px;padding:8px}
.related-list button{font-size:12px;min-height:36px;padding:7px}
}
@media(max-width:600px) and (max-height:700px){
.workspace{grid-template-rows:calc((100vw - 22px)*.666667 + 56px) minmax(0,1fr)}
.inspector{padding:10px 13px;gap:5px}.inspector h2{font-size:17px}.inspector p{font-size:11px}.tabs button{min-height:28px;padding:5px 0}.steps{gap:5px}.steps li{font-size:11px}.card-foot button{min-height:32px;font-size:11px}.benefit{font-size:10px}
}

/* Full descriptions remain accessible at every viewport. */
.details-button{display:block}.tab-content{overflow:hidden}.inspector h2{flex-shrink:0}.card-foot{flex-shrink:0}