/* Android owns insets at its content container; WebKit uses the same boundaries in CSS. */
:root{--safe-top201:env(safe-area-inset-top,0px);--safe-right201:env(safe-area-inset-right,0px);--safe-bottom201:env(safe-area-inset-bottom,0px);--safe-left201:env(safe-area-inset-left,0px)}
:root.embedded201{--safe-top201:0px;--safe-right201:0px;--safe-bottom201:0px;--safe-left201:0px;--eac-safe-top:0px;--eac-safe-bottom:0px;--eac-safe-left:0px;--eac-safe-right:0px}
:root.keyboard201{--safe-bottom201:0px}
.approved-home .topbar{padding-top:calc(20px + var(--safe-top201));height:calc(94px + var(--safe-top201));min-height:calc(94px + var(--safe-top201));padding-left:max(24px,var(--safe-left201));padding-right:max(24px,var(--safe-right201))}
.approved-home .home-welcome{height:calc(var(--hero-height) - 94px - var(--safe-top201))}
.approved-home .home-welcome p:not(.teacher-eyebrow){font-size:clamp(18px,5vw,28px);white-space:nowrap}
.live-app .paris-hero{padding-top:calc(18px + var(--safe-top201));padding-left:max(20px,var(--safe-left201));padding-right:max(20px,var(--safe-right201))}
.approved-profile .profile-top{padding-top:calc(22px + var(--safe-top201))}
.bottom-nav{padding-bottom:calc(9px + var(--safe-bottom201))!important;padding-left:max(8px,var(--safe-left201))!important;padding-right:max(8px,var(--safe-right201))!important}
.live-frame{top:calc(var(--app-vtop201,0px) + var(--safe-top201));left:var(--safe-left201);right:var(--safe-right201);bottom:auto;width:calc(100% - var(--safe-left201) - var(--safe-right201));height:calc(var(--app-vh201,100dvh) - var(--safe-top201) - var(--safe-bottom201))}
.embedded201 .fullscreen-chat{padding-top:0;padding-left:0;padding-right:0}
.embedded201 .chat-composer{padding-bottom:12px}
.p198-post-toolbar{gap:12px;flex-wrap:wrap}
.p198-post-toolbar>span{font:16px var(--serif);color:#c9d4d4}
.p201-period-trigger{display:flex;align-items:center;gap:12px;min-height:50px;max-width:100%;padding:12px 16px;border:1px solid #e5c480;border-radius:12px;background:linear-gradient(120deg,#103441,#061e2a);box-shadow:inset 0 0 0 3px #071e2a;color:#f4e7cc;font:20px/1.2 var(--serif);cursor:pointer}
.p201-period-trigger span{flex:1;text-align:left}.p201-period-trigger svg:last-child{width:16px;transform:rotate(90deg)}
dialog.p201-period-dialog{position:fixed;inset:var(--safe-top201) var(--safe-right201) var(--safe-bottom201) var(--safe-left201);height:fit-content;color:#f4e7cc;background:linear-gradient(135deg,#0c303d,#051e2a);border:1px solid #dfbf7a;border-radius:18px;padding:22px;width:min(380px,calc(100vw - 32px - var(--safe-left201) - var(--safe-right201)));max-height:calc(var(--app-vh201,100dvh) - var(--safe-top201) - var(--safe-bottom201) - 32px);overflow:auto;margin:auto;box-shadow:inset 0 0 0 4px #143543,0 18px 60px #0008}
.p201-period-dialog::backdrop{background:#020e19b3;backdrop-filter:blur(5px)}
.p201-period-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.p201-period-dialog h2{font:500 28px/1.1 var(--serif);margin:0}.p201-period-dialog [data-period-close]{background:none;border:0;color:#efd28c;font:30px/1 var(--serif);width:44px;height:44px;flex-shrink:0}
.p201-period-options{display:grid;gap:10px}.p201-period-options button{width:100%;display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 14px;border:1px solid #ba9c5e80;border-radius:10px;background:#062530;color:#eee5d0;font:20px/1.3 var(--serif);text-align:left;cursor:pointer}.p201-period-options button span{flex:1}.p201-period-options i{font:18px Arial,sans-serif;width:22px;height:22px;display:grid;place-items:center;border:1px solid #bda66b;border-radius:50%}.p201-period-options button[aria-pressed=true]{background:linear-gradient(110deg,#c69f58,#f0d597,#c69f58);color:#09212a;border-color:#f6d798}.p201-period-options button[aria-pressed=true] i{border-color:#17353b;background:#0c303b;color:#f5da98}
.p201-period-trigger:focus-visible,.p201-period-dialog button:focus-visible{outline:2px solid #f4d58f;outline-offset:3px}
@media(max-width:360px){.p201-period-trigger{font-size:18px;padding:12px;gap:8px}.p198-post-toolbar{gap:8px}.p201-period-dialog{padding:16px}}
