body[data-page=office] .portal-content{padding:0;max-width:none;width:100%;min-height:0}
body[data-page=office] .portal-stage{grid-template-rows:minmax(0,1fr)}
.office-welcome{position:relative;isolation:isolate;min-height:100dvh;overflow:hidden;background:#100c08;display:flex;flex-direction:column;align-items:center;padding:clamp(2rem,7vh,5rem) 3% 1.5rem}
.office-welcome-image,.office-welcome-vignette{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.office-welcome-dark{opacity:0;z-index:-2;pointer-events:none;transition:opacity 2.6s cubic-bezier(.42,0,.2,1)}.office-welcome-vignette{z-index:-1;background:linear-gradient(#0005,transparent 32%,transparent 72%,#0009)}
.office-pending .office-welcome-dark{opacity:1}
.office-welcome-greeting{text-align:center;max-width:95%;text-shadow:0 3px 14px #000,0 1px 3px #000}.office-welcome-greeting h1{font:700 clamp(1.8rem,3vw,3rem)/1.15 OfficeSerif,Georgia,serif;margin:0;color:#e5c885}.office-welcome-greeting p{font:600 clamp(1.2rem,2vw,1.8rem) OfficeSerif,Georgia,serif;color:#f2e2bc;margin:.8rem 0}.office-welcome-greeting p:before{content:'';display:block;width:180px;height:1px;margin:1rem auto;background:linear-gradient(90deg,transparent,#cda34e,transparent)}
.office-pending .office-welcome-greeting{opacity:0}
.office-case-button{position:absolute;top:78%;left:50%;transform:translate(-50%,-50%);padding:.8rem 1.5rem;min-height:48px;min-width:220px;border:1px solid #c19849;border-radius:6px;background:linear-gradient(#2d2112,#100c07);color:#f1c777;font:700 1.25rem OfficeSerif,Georgia,serif;box-shadow:0 5px 15px #0007;cursor:pointer}.office-case-button:hover{background:#4d3519}
.office-welcome-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:min(100%,1050px);margin-top:auto;padding-top:62vh}.office-welcome-actions .office-action{position:relative;display:grid;grid-template-columns:70px 1fr;grid-template-rows:auto auto;align-content:center;gap:.3rem .8rem;min-height:90px;padding:1rem;background:linear-gradient(120deg,#291c10ed,#0d0906eb);border:1px solid #9c7538;border-radius:7px;text-decoration:none;color:#ead8b4}.office-welcome-actions .office-action img{grid-row:1/3;width:65px;height:65px;object-fit:contain}.office-welcome-actions .office-action strong{font:700 1.3rem OfficeSerif,Georgia,serif}.office-welcome-actions .office-action small{color:#bca988}.office-welcome-actions .office-action b{display:none}
.office-entering .office-welcome-greeting{animation:office-greeting 5s both}
@keyframes office-greeting{0%,75%{opacity:0}100%{opacity:1}}
@media(max-width:900px){body[data-page=office] .portal-stage{grid-template-rows:4rem minmax(0,1fr)}.office-welcome{min-height:calc(100dvh - 4rem)}.office-welcome-actions{gap:.6rem}.office-welcome-actions .office-action{grid-template-columns:1fr;text-align:center;padding:.6rem}.office-welcome-actions .office-action img{display:none}.office-welcome-actions .office-action strong{font-size:1.1rem}}
@media(max-width:600px){.office-welcome{padding:2rem 1rem 1rem;min-height:calc(100dvh - 4rem)}.office-welcome-image{object-position:50% 50%}.office-welcome-greeting{max-width:100%}.office-welcome-actions{padding-top:58vh;gap:.45rem}.office-welcome-actions .office-action{min-height:70px}.office-welcome-actions .office-action small{font-size:.7rem}.office-case-button{top:70%}}
@media(prefers-reduced-motion:reduce){.office-entering .office-welcome-dark{animation:none;opacity:0}.office-entering .office-welcome-greeting{animation:none;opacity:1}}
.office-tutorial{width:min(680px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;margin:auto;padding:clamp(1.2rem,4vw,2.5rem);border:1px solid #bc9149;border-radius:12px;color:#eadbbc;background:linear-gradient(135deg,#382918,#100d09);box-shadow:0 20px 80px #000b;text-align:center}
.office-tutorial::backdrop{background:#0009;backdrop-filter:blur(7px)}
.office-tutorial h2{font:700 clamp(1.6rem,4vw,2.3rem)/1.2 OfficeSerif,Georgia,serif;color:#e7c47e;margin:.6rem 0 1rem}
.office-tutorial p{line-height:1.6}
.office-tutorial-welcome{position:relative;width:min(390px,calc(100% - 2rem));min-height:31rem;overflow:visible;padding:7.8rem 2.2rem 2.4rem;border:0;background:transparent url('images/tutorial_card_hg.png') center/100% 100% no-repeat;filter:drop-shadow(0 1.2rem 2rem #000b);animation:office-tutorial-card-in .38s cubic-bezier(.2,.8,.2,1) both}
.office-tutorial-welcome-logo{position:absolute;top:-3.7rem;left:50%;width:8.25rem;height:8.25rem;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 .45rem .7rem #0008)}
.office-tutorial-welcome h2{margin:.3rem 0 .9rem;color:#f4e4c3}
.office-tutorial-welcome p{margin:.35rem 0;color:#e7d6b7;font-style:italic}
.office-tutorial-welcome .office-tutorial-welcome-question{color:#e7c47e}
.office-tutorial-welcome .office-tutorial-actions{display:grid;width:80%;margin:1.35rem auto 0}
.office-tutorial-welcome .settings-button{width:100%;margin:.25rem 0;text-transform:uppercase;font-weight:800;letter-spacing:.045em}
.office-tutorial-welcome .office-tutorial-welcome-primary{border-color:#e4bc64;background:linear-gradient(180deg,#b57b27,#6f4515);box-shadow:inset 0 1px #ffe0a0,0 .35rem .8rem #0007;color:#fff0cf}
.office-tutorial-welcome .office-tutorial-welcome-primary:hover{background:linear-gradient(180deg,#c78b31,#81521b)}
.office-tutorial-welcome .office-tutorial-welcome-secondary{background:linear-gradient(180deg,#2b2118,#15100c);color:#d8c4a0}
.office-tutorial-welcome .office-tutorial-welcome-secondary:hover{background:linear-gradient(180deg,#3a2b1e,#1d1510);color:#f0d8ad}
@keyframes office-tutorial-card-in{from{opacity:0;transform:translateY(.75rem) scale(.975)}to{opacity:1;transform:none}}
.office-tutorial-art{display:flex;justify-content:center;align-items:center;height:clamp(120px,30vh,280px);gap:.5rem}
.office-tutorial-art img{max-width:100%;height:100%;object-fit:contain;min-width:0}
.office-tutorial-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.office-tutorial-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem}
.office-tutorial-actions .settings-button{margin-top:.6rem}
.office-tutorial-navigation{display:grid;grid-template-columns:3.25rem minmax(0,1fr) 3.25rem;align-items:center;gap:clamp(.7rem,3vw,1.5rem);width:min(31rem,100%);margin:1rem auto .55rem}
.office-tutorial-arrow{display:grid;place-items:center;width:3.25rem;height:3.25rem;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 .3rem .45rem #0008)}
.office-tutorial-arrow img{display:block;width:100%;height:100%;object-fit:contain}
.office-tutorial-arrow:disabled{opacity:.22;cursor:default;filter:none}
.office-tutorial-dots{display:flex;align-items:center;justify-content:center;gap:.52rem;min-height:2rem}
.office-tutorial-dot{width:.55rem;height:.55rem;padding:0;border:1px solid #cda658;border-radius:50%;background:transparent;cursor:pointer;transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease}
.office-tutorial-dot.is-active{background:#e3bd6c;box-shadow:0 0 .55rem #dda94d;transform:scale(1.45)}
.office-tutorial-exit{display:inline-block;margin:.1rem auto 0;padding:.35rem;border:0;background:transparent;color:#baa98b;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.office-tutorial-exit:hover{color:#e7c47e}
.office-tutorial h2:focus{outline:none}
.office-welcome-greeting p:before{content:none}
.office-welcome-ornament{display:flex;align-items:center;justify-content:center;gap:8px;width:min(280px,75%);margin:1rem auto;filter:drop-shadow(0 1px 3px #000)}
.office-welcome-ornament:before,.office-welcome-ornament:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#b88c35)}
.office-welcome-ornament:after{transform:scaleX(-1)}
.office-welcome-ornament span{position:relative;width:8px;height:8px;flex:none;border:1px solid #d5a746;transform:rotate(45deg)}
.office-welcome-ornament span:after{content:'';position:absolute;inset:2px;background:#d5a746}
.office-entering .office-welcome-ornament{animation:office-greeting 5s both}
@media(prefers-reduced-motion:reduce){.office-entering .office-welcome-ornament{animation:none}}
@media(prefers-reduced-motion:reduce){.office-tutorial-welcome{animation:none}}
@media(max-width:480px){.office-tutorial-welcome{min-height:29rem;padding:7.2rem 1.7rem 2rem}.office-tutorial-welcome-logo{top:-3rem;width:7.3rem;height:7.3rem}.office-tutorial-navigation{grid-template-columns:2.75rem minmax(0,1fr) 2.75rem;gap:.45rem}.office-tutorial-arrow{width:2.75rem;height:2.75rem}.office-tutorial-dots{gap:.38rem}.office-tutorial-dot{width:.48rem;height:.48rem}}