:root{--edge:rgba(255,255,255,.55);--tint:rgba(8,44,92,.45);--amber:#ffd37a;--foam:#d3efff;
--font:"Segoe UI","Frutiger","Trebuchet MS","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{height:100%}
body{margin:0;min-height:100%;font-family:var(--font);color:#fff;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url("/WebBackground.jpg") center/cover no-repeat}
.wrap{max-width:1040px;margin:0 auto;padding:clamp(16px,5vw,64px) 16px;display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.06) 38%,rgba(255,255,255,.12)),var(--tint);
-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid var(--edge);
border-radius:18px;box-shadow:0 14px 44px rgba(0,35,45,.38),inset 0 1px 0 rgba(255,255,255,.75)}
aside{padding:20px 16px 18px;text-align:center}main{padding:20px 22px 18px}
.orb{width:92px;height:92px;display:block;margin:0 auto 8px;filter:drop-shadow(0 4px 6px rgba(0,30,70,.5))}
.brand{font-size:1.05rem;font-weight:600;margin:0}.sub{font-size:.8rem;color:var(--foam);margin:0 0 16px}
nav{display:grid;gap:8px}
.nav{display:block;width:100%;padding:9px 12px;font:inherit;font-size:.92rem;color:#fff;text-align:left;text-decoration:none;cursor:pointer;
background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 50%,rgba(255,255,255,.16));
border:1px solid var(--edge);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:box-shadow .15s}
.nav:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 14px rgba(150,255,240,.6)}
.nav.sm{display:inline-block;width:auto;margin:4px 6px 4px 0;padding:5px 12px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
header.bar{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.35)}
h1{margin:0;font-size:clamp(1.5rem,4vw,2.1rem);font-weight:400;text-shadow:0 2px 10px rgba(0,40,50,.5)}
h2{font-size:1.15rem;font-weight:600;margin:20px 0 8px}h2 a{color:#fff}a{color:var(--amber)}
.card{padding:12px 14px;margin:10px 0;border:1px solid var(--edge);border-radius:10px;background:rgba(255,255,255,.1)}
.card h2{margin:0 0 2px}.body{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0}
small,.note{color:#c4ccd4}.note{font-style:italic}.list{padding-left:20px}
.pic{display:block;max-width:100%;margin:10px 0;border:1px solid var(--edge);border-radius:10px;box-shadow:0 6px 16px rgba(0,25,60,.4)}
label{display:block;margin:10px 0 4px;font-size:.9rem}
input[type=text],input[type=password],input[type=file],textarea{width:100%;font:inherit;color:#fff;padding:8px 10px;
background:rgba(255,255,255,.12);border:1px solid var(--edge);border-radius:8px}
textarea{min-height:120px}.hp{position:absolute;left:-9999px}form{margin:0}form.in{display:inline}
footer{margin-top:24px;padding-top:12px;border-top:1px solid rgba(255,255,255,.35);text-align:center;font-size:.78rem;color:var(--foam)}
.card.row{display:flex;gap:14px;align-items:flex-start;position:relative;transition:box-shadow .2s,transform .2s}
.card.row:hover{box-shadow:0 0 18px rgba(150,255,240,.55);transform:translateY(-2px)}
.card h2 a{color:#fff;text-decoration:none}.card h2 a::after{content:"";position:absolute;inset:0}
.thumb{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--edge);flex:none}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;margin:6px 0 0;overflow-wrap:anywhere}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0}
.gallery img{display:block;width:100%;height:170px;object-fit:cover;border:1px solid var(--edge);border-radius:10px;box-shadow:0 6px 16px rgba(0,25,60,.4)}
.drop{padding:12px;border:2px dashed var(--edge);border-radius:10px}.drop.over{background:rgba(255,255,255,.18)}
.orb-link{display:block;border-radius:50%}.orb-link:hover .orb{filter:drop-shadow(0 0 10px rgba(160,255,240,.9))}
main{view-transition-name:content}aside{view-transition-name:side}
@view-transition{navigation:auto}::view-transition-group(*){animation-duration:.3s}
.page{animation:rise .35s ease both}@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.page{animation:none}.card.row{transition:none}}
html{background:#0a2c57}
.sheet{position:fixed;inset:0;z-index:10;visibility:hidden;transition:visibility 0s .45s}
.sheet.open{visibility:visible;transition-delay:0s}
.sheet-back{position:absolute;inset:0;background:rgba(0,20,50,.45);opacity:0;transition:opacity .4s}
.sheet.open .sheet-back{opacity:1}
.sheet-win{position:absolute;top:0;right:0;bottom:0;width:min(780px,100%);display:flex;flex-direction:column;
border-radius:18px 0 0 18px;transform:translateX(106%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.sheet.open .sheet-win{transform:none}
.sheet-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px 8px 18px;font-size:.88rem;border-bottom:1px solid rgba(255,255,255,.35)}
.sheet-x{width:auto;padding:2px 20px;border-radius:6px;background:linear-gradient(180deg,#f7a89f,#d9402f 55%,#b71f12);border-color:rgba(255,255,255,.85)}
.sheet-body{flex:1;overflow:auto;padding:14px 22px 20px}.sheet .page{animation:none}
html.lock{overflow:hidden}
@media(max-width:760px){.sheet-win{border-radius:0}}
@media(prefers-reduced-motion:reduce){.sheet,.sheet-back,.sheet-win{transition:none}}
@media(max-width:760px){.wrap{grid-template-columns:1fr}.orb{width:56px;height:56px}nav{grid-template-columns:repeat(2,1fr)}}