/* Design 02: a quiet architectural room, drawn in CSS to keep the scene light. */
body[data-design="portal"]{--paper:#101619;--surface:rgba(16,22,25,.94);--line:#3d4547;background:#101619}
body[data-design="portal"] .topline,body[data-design="portal"] .header{background:rgba(12,18,21,.92)}
.portal-world{
 --scene-left:58vw;--scene-top:27vh;--scene-width:26vw;--scene-height:58vh;
 background:radial-gradient(ellipse at 84% 40%,#485057 0,transparent 49%),linear-gradient(120deg,#10181d 10%,#202b31 52%,#282e31);
 isolation:isolate;
}
.portal-room{position:absolute;inset:0;overflow:hidden}
.portal-wall{
 position:absolute;left:45%;top:0;right:-8%;height:calc(var(--scene-top) + var(--scene-height) + 2vh);
 background:linear-gradient(103deg,#202b31 0%,#3a4246 46%,#343a3c 66%,#20282d 100%);
 box-shadow:inset 1px 0 #b9c0be12;
}
.portal-wall:before{
 content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,transparent 18%,#0002 18.1%,#d1d6cd12 18.3%,transparent 18.5%,transparent 61%,#0003 61.1%,#d1d6cd1c 61.3%,transparent 61.5%,transparent 84%,#0003 84.1%,#c7cdc315 84.3%,transparent 84.5%);
}
.portal-wall:after{
 content:"";position:absolute;left:0;right:0;top:15%;height:1px;
 background:linear-gradient(90deg,transparent,#d9c8a26b 46%,#b8b2a020);
 box-shadow:0 2px 10px #f2d5a314;
}
.portal-recess{
 position:absolute;left:calc(var(--scene-left) - 3.5vw);top:calc(var(--scene-top) - 5vh);
 width:calc(var(--scene-width) + 8vw);height:calc(var(--scene-height) + 7vh);
 background:linear-gradient(105deg,#10191e,#1a2226 48%,#242c2e);
 border-top:1px solid #b5a58455;border-right:1px solid #d5ba8055;border-left:1px solid #080d10;
 box-shadow:inset 24px 18px 35px #070d1166,20px 8px 60px #080d114d;
}
.portal-recess:before{
 content:"";position:absolute;left:0;top:0;width:100%;height:18px;
 background:linear-gradient(180deg,#c1a36b29,transparent);border-top:1px solid #dec28a70;
}
.portal-recess:after{
 content:"";position:absolute;right:-4px;top:-1px;bottom:0;width:2px;
 background:linear-gradient(180deg,#d4b98580,#f2d6a1cc 48%,#a18d6640);
 box-shadow:0 0 20px 3px #ebc58718;
}
.portal-ground{
 position:absolute;left:0;right:0;top:calc(var(--scene-top) + var(--scene-height) + 2vh);bottom:0;
 background:radial-gradient(ellipse at 78% 0,#a7926633,transparent 53%),linear-gradient(180deg,#293238,#172228 60%,#101a20);
 border-top:1px solid #9daca72b;
}
.portal-ground:before{
 content:"";position:absolute;inset:0;
 background:linear-gradient(116deg,transparent 48%,#aab6ae1a 48.2%,transparent 48.4%),linear-gradient(66deg,transparent 83%,#9da69e18 83.2%,transparent 83.4%),linear-gradient(180deg,transparent 40%,#9ca79e14 40.4%,transparent 40.8%);
}
.portal-ground:after{
 content:"";position:absolute;left:52%;top:-1px;right:6%;height:70%;
 background:linear-gradient(180deg,#edce9130,transparent 85%);clip-path:polygon(8% 0,79% 0,100% 100%,0 100%);
}
.portal-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#0c141bea 0%,#0d171bd4 26%,#111b2250 52%,transparent 75%),linear-gradient(180deg,#09131a52,transparent 36%,transparent 81%,#0c151d30)}
.portal-halo{left:48%;top:16%;width:54%;height:80%;background:radial-gradient(ellipse,#e6c89417,transparent 65%);animation:none}
.portal-grain,.portal-particles{display:none}
.portal-perspective{left:var(--scene-left);top:var(--scene-top);width:var(--scene-width);height:var(--scene-height)}
.portal-frame{border-color:#28332f;border-bottom-color:#566054;box-shadow:0 0 0 1px #bcb19270,0 16px 35px #03090db0,inset 0 0 35px #edd8b78c}
.portal-light{background:linear-gradient(145deg,#aa976f,#e3d3ad 40%,#8e9788);box-shadow:0 0 55px #e1c58a26}
.portal-floor{opacity:.25;background:linear-gradient(180deg,#edcf9c40,transparent 60%)}
body[data-design="portal"] .portal-story{background:linear-gradient(90deg,#101920f5 10%,#111b21c9 58%,#121b215c)}
body[data-design="portal"] .portal-control button{background:#131e24c9;border-color:#79817670;color:#d7ded8}
@media(max-width:760px){
 .portal-world{--scene-left:43vw;--scene-top:55vh;--scene-width:40vw;--scene-height:min(35vh,350px);background:radial-gradient(ellipse at 82% 66%,#3d484e 0,transparent 60%),linear-gradient(145deg,#101a20,#233139)}
 .portal-wall{left:26%;top:44%;right:-10%}
 .portal-wall:after{top:8%}
 .portal-recess{left:calc(var(--scene-left) - 5vw);top:calc(var(--scene-top) - 3vh);width:calc(var(--scene-width) + 11vw);height:calc(var(--scene-height) + 5vh);box-shadow:inset 15px 12px 25px #070d1155,12px 8px 30px #080d1155}
 .portal-recess:after{box-shadow:0 0 12px #ebc58730}
 .portal-vignette{background:linear-gradient(180deg,#0b141b 0%,#101b23d9 30%,#101b233b 55%,transparent 73%),linear-gradient(90deg,#0e182076,transparent 70%)}
 .portal-halo{left:24%;top:44%;width:85%;height:52%}
 .portal-ground:after{left:29%;right:1%}
 .portal-world:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 32%,#101a20b8 48%,#101a20a6 74%,transparent 96%)}
 body[data-design="portal"] .portal-story{background:#101920f5}
}