.account-area { pointer-events:auto; width:min(100%, 42rem); background:var(--paper); border:1px solid #cfc7ad; border-radius:22px; padding:clamp(1rem, 4vw, 2rem); box-shadow:0 15px 45px #493b211a; }
.account-area.wide { width:min(100%, 68rem); }
.account-area h1 { font-size:clamp(1.9rem, 5vw, 3rem); letter-spacing:-.04em; margin:0 0 1rem; }
.account-area h2 { font-size:1.3rem; margin:.8rem 0; }
.account-area form { display:grid; gap:.85rem; margin:1rem 0; }
.account-area label { display:block; font-weight:800; }
.account-area label:has(input[type=checkbox]) { display:flex; gap:.55rem; align-items:flex-start; }
.account-area :is(input:not([type=checkbox]),select,textarea) { width:100%; display:block; margin-top:.25rem; min-height:2.8rem; border:1px solid #a8ae99; background:#fff; color:var(--ink); border-radius:9px; padding:.45rem .65rem; font:inherit; }
.account-area input[type=checkbox] { flex:none; margin-top:.35rem; }
.account-area button { min-width:0; min-height:2.65rem; padding:.5rem .85rem; justify-self:start; justify-content:center; gap:.4rem; }
.account-area :is(a,summary) { color:#344b3b; font-weight:800; }
.account-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; margin:.6rem 0; }
.account-area details { margin-top:1rem; }
.account-area summary { cursor:pointer; }
.account-area progress { width:100%; accent-color:#344b3b; }
.account-area .rows { padding:0; list-style:none; }
.account-area .rows li { border-top:1px solid #ded7c3; padding:1rem 0; overflow-wrap:anywhere; }
.account-area pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.account-area #status { min-height:1.6em; }
.account-area #status[data-error=true], .account-area .notice { color:#854439; }
.account-area :focus-visible { outline:3px solid #627650; outline-offset:3px; }
.account-area [hidden] { display:none !important; }
.account-area .profile-photo { object-fit:cover; border-radius:50%; }

.account-area button[aria-current] { background:#557459; text-decoration:underline; text-underline-offset:.2em; }

.account-page{--paper:#fff;--ink:#172646;--muted:#536380;background:#eef3ff}
.account-page::before,.account-page::after{display:none}
.account-page main{align-items:start;padding-top:14px}
.account-page .account-area{border-color:#dbe4f8;border-radius:24px;box-shadow:0 15px 55px #243f8820}
.account-page .account-area :is(a,summary){color:#294a94}
.account-page .account-area button{background:#244eaf;border-color:#244eaf;border-radius:10px;box-shadow:none;transition:background .16s,transform .16s}
.account-page .account-area button:hover{background:#173b8f}
.account-page .account-area button[aria-current]{background:#e7efff;color:#1a3e88;border-color:#c5d7ff}
.account-page .account-area :is(input:not([type=checkbox]),select,textarea){border-color:#cbd6eb;background:#f8faff}
.account-page .account-area :focus-visible{outline-color:#3563c3}
.account-page .account-area progress{accent-color:#244eaf}
.account-page .account-area #status:empty{display:none}
.account-page .account-hint{margin:0;color:#455b81}
.account-page .account-address{color:#284986;font-weight:800;overflow-wrap:anywhere}
.admin-area h1{margin-bottom:.35rem}
.admin-area h2{margin:1.25rem 0 .75rem}
.admin-shortcuts{font-size:.92rem;gap:1rem;margin-bottom:1.2rem}
.admin-nav{display:flex;flex-wrap:wrap;gap:.42rem;padding:.55rem;background:#f3f6fd;border:1px solid #e1e8f6;border-radius:15px}
.account-page .admin-nav button{background:#fff;color:#34496d;border-color:#e0e7f4;min-height:2.4rem}
.account-page .admin-nav button:hover{background:#eff4ff}
.admin-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.account-page .admin-area .admin-metric{display:grid;justify-content:start;text-align:left;width:100%;min-height:94px;gap:0;background:#f2f6ff;color:#274987;border:1px solid #dfe8fa;border-radius:14px;padding:.72rem .95rem}
.account-page .admin-area .admin-metric:hover{background:#e6eeff;transform:translateY(-2px)}
.admin-metric strong{font-size:1.9rem;line-height:1.15}
.admin-health{margin-top:1rem;padding:1rem 1.1rem;border-radius:15px;background:#eefbf5;border:1px solid #c8eadd;color:#215844}
.admin-health[data-state=warning]{background:#fff6e7;border-color:#f3dfb8;color:#704a20}
.admin-health p{margin:.3rem 0}
.admin-area .rows{display:grid;gap:.65rem}
.admin-area .rows li{padding:.85rem 1rem;border:1px solid #e0e8f7;background:#f9fbff;border-radius:13px}
.admin-area .rows p{margin:.22rem 0;color:#405375}
.admin-area .admin-inline-form{display:flex;align-items:flex-end;gap:.8rem}
.admin-area :is(h2,.admin-metrics,.rows,.admin-health){animation:signin-enter .2s var(--ease) both}
@media(max-width:520px){.account-page main{padding:10px 12px 40px}.admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.account-page .admin-area .admin-metric{min-height:80px}}

/* Connection card and authenticated invitation screen. */
.access-dialog{margin:auto;width:min(520px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;color:#1b1e2c;background:#fdfdfc;border:1px solid #e4e0d9;border-radius:28px;padding:clamp(18px,3vw,24px);box-shadow:0 20px 64px #26222622}
.access-dialog[open]{animation:account-unfold .24s var(--ease) both}
.access-dialog::backdrop{background:#f8f6f2}
.access-dialog .access-heading{height:auto;min-height:0;display:grid;place-items:center;padding:0 32px 18px;margin:0 0 20px;border-bottom:1px solid #e5e0da}
.access-dialog .access-heading h2{font-size:clamp(1.32rem,3vw,1.55rem);font-weight:900;letter-spacing:-.03em;line-height:1.15;text-align:center;margin:0}
.access-dialog .access-heading h2:focus{outline:none}
.access-dialog #close-access{position:absolute;right:0;top:0;border-radius:50%;width:34px;height:34px;padding:0;min-height:0;background:transparent;color:#655f59;border-color:transparent;font-size:1.4rem;box-shadow:none}
.access-dialog #status{margin:.75rem 0 0}
.access-dialog #status:empty{display:none}
.access-dialog .access-legal{text-align:center;color:#68615a;font-size:.85rem;margin:2rem 0 .5rem}
.access-dialog .access-legal a{color:#865b20}
.access-dialog :is(.google-login,.access-primary){width:100%;min-height:50px;box-shadow:none;border-radius:16px;font-size:1rem;font-weight:850}
.access-dialog .google-login{padding:0 12px;border:1.5px solid #e4e0d9;background:#fdfdfc;color:#1b1e2c;gap:10px}
.access-dialog .google-login:hover{background:#f5f2ed}
.access-dialog .google-login img{width:18px;height:18px;object-fit:contain;flex:none}
.access-dialog .access-primary{background:#96723d;border-color:#96723d;color:#fff}
.access-dialog .access-primary:hover{background:#805e30}
.access-dialog .access-first{gap:clamp(20px,4vh,42px);margin:.8rem 0}
.access-dialog .access-field input{min-height:56px;border:1.5px solid #e4e0d9;border-radius:16px;padding:.7rem 1rem;font-size:1rem}
.access-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.access-divider{display:flex;align-items:center;gap:.7rem;color:#68615a;font-weight:750;margin:1rem 0 1.15rem}
.access-divider::before,.access-divider::after{content:'';height:1px;background:#e2ddd6;flex:1}
.access-dialog .account-hint{color:#66615b;margin:.2rem 0 .65rem;overflow-wrap:anywhere}
.access-dialog .access-text-button{background:transparent;color:#865b20;border-color:transparent;box-shadow:none;text-decoration:underline}
.access-dialog[data-screen=invitation][open]{display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;align-items:center;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:clamp(16px,4vw,44px);color:#f3f0ee;background:#161616;animation:none}
.access-dialog[data-screen=invitation] .access-heading{width:100%;border:0;margin:0;padding:0 44px}
.access-dialog[data-screen=invitation] #close-access{color:#f3f0ee}
.access-dialog[data-screen=invitation] #access-content{width:min(100%,590px);text-align:center;align-self:center;margin:auto 0;padding:1.2rem 0}
.access-dialog[data-screen=invitation] .invite-title{font-size:clamp(1.45rem,4vw,2.2rem);line-height:1.2;margin:0 0 .75rem}
.access-dialog[data-screen=invitation] :is(.account-hint,.access-legal){color:#c1bdb7}
.access-dialog[data-screen=invitation] :is(.access-legal a,summary){color:#c1d8ff}
.access-dialog[data-screen=invitation] #status[data-error=true]{color:#ffb2af;text-align:center}
.access-dialog[data-screen=invitation] .access-legal{margin:.5rem 0}
.access-dialog .invitation-form{justify-items:center;gap:1rem;margin:1.2rem 0 .7rem}
.access-dialog .invitation-form .access-primary{width:min(100%,260px);justify-self:center;min-height:44px;background:#e8e4dd;color:#242323;border-color:#e8e4dd}
.invite-strip{position:relative;width:min(100%,530px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,.8vw,9px);cursor:text}
.invite-strip span{display:grid;place-items:center;min-height:clamp(50px,7vw,78px);border:1px solid #494846;background:#202020;border-radius:12px;color:#f5f2ed;font:700 clamp(.66rem,2.3vw,1.08rem)/1 ui-monospace,monospace}
.access-dialog .invite-strip input{position:absolute;inset:0;margin:0;min-width:0;height:100%;opacity:0;cursor:text}
.invite-strip:focus-within span{border-color:#87a9dd}
.invite-strip:has(input[aria-invalid=true]) span{border-color:#eea29c}
[data-state=verified] .invite-strip span{border-color:#82c395;background:#21352a}
.invite-actions{justify-content:center}
.access-dialog[data-screen=invitation] .invite-actions button{background:transparent;color:#9bc5ff;border-color:transparent;box-shadow:none;padding:.25rem .4rem}
.invite-feedback{display:flex;align-items:center;justify-content:center;gap:.65rem;color:#e2dfd9}
.invite-wheel{display:grid;place-items:center;width:43px;height:43px;border:4px solid #707870;border-radius:50%;font:900 1.25rem/1 Nunito,sans-serif;color:transparent}
[data-state=checking] .invite-wheel{border-right-color:#e2dfd9;animation:invite-turn .75s linear infinite}
[data-state=verified] .invite-wheel{color:white;background:#286d46;border:4px dotted #acd1ab;box-shadow:0 0 0 4px #31483a}
[data-state=verified] .invite-feedback{color:#a7e3b8}
@keyframes invite-turn{to{transform:rotate(1turn)}}
@keyframes account-unfold{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.profile-step{--step-shift:12px;animation:profile-step-in .26s var(--ease) both}
.profile-step[data-direction=back]{--step-shift:-12px}
.profile-step-title:focus{outline:none}
.age-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;border:0;margin:0;padding:0}
.age-options legend{font-weight:850;margin-bottom:.4rem}
.account-area .age-options label{display:grid;align-items:center;grid-template-columns:auto 1fr;gap:.45rem;border:1px solid #cdd9c9;background:#f7f9f3;border-radius:12px;padding:.6rem;cursor:pointer}
.account-area .age-options label:has(input:checked){background:#e3f0e1;border-color:#6b9670;color:#224b32}
.account-area .age-options input[type=radio]{width:1rem;height:1rem;min-height:0;margin:0;accent-color:#376a49}
.account-page .developer-link{display:inline-block;border-radius:10px;background:#e7efe0;color:#284934;padding:.55rem .8rem}
@keyframes profile-step-in{from{opacity:0;transform:translateX(var(--step-shift))}to{opacity:1;transform:none}}
@media(max-width:470px){.age-options{grid-template-columns:1fr}}

.account-page:has(.admin-area){--paper:#fffdf6;--ink:#263b30;background:#f2ecde}
.account-page .admin-area{border-color:#ded7c2;box-shadow:0 15px 45px #42381919}
.account-page .admin-area :is(a,summary){color:#315643}
.account-page .admin-area .admin-nav{background:#f0eee3;border-color:#dfd9c6}
.account-page .admin-area .admin-nav button{color:#324c3d;border-color:#e4decc;background:#fffdf7}
.account-page .admin-area .admin-nav button:hover,.account-page .admin-area .admin-nav button[aria-current]{background:#e6eee0;color:#234633;border-color:#ccd9c7}
.admin-area .developer-charts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr);gap:1rem;margin:1rem 0}
.developer-chart{margin:0;background:#f9f6ec;border:1px solid #e4deca;border-radius:16px;padding:1rem;min-width:0}
.developer-chart figcaption{font-size:1.15rem;font-weight:900;letter-spacing:-.025em;color:#293f34}
.chart-key{display:flex;gap:1rem;margin:.35rem 0}
.chart-key span::before{content:'';display:inline-block;width:.62rem;height:.62rem;border-radius:50%;background:var(--series);margin-right:.3rem}
.developer-chart [data-series=google]{--series:#4867a1}
.developer-chart [data-series=email]{--series:#528464}
.connection-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:.24rem;margin:1rem 0 .55rem}
.connection-pair{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:110px;border-bottom:1px solid #d6d1bb;background:repeating-linear-gradient(to top,transparent 0 26px,#ece5d2 26px 27px)}
.connection-pair i{width:42%;height:var(--share);background:var(--series);border-radius:4px 4px 0 0;transform-origin:bottom;animation:chart-grow .33s var(--ease) both}
.connection-day small{display:block;min-height:1.5rem;padding-top:.15rem;white-space:nowrap;font-size:.71rem}
.connection-day:last-child small{direction:rtl;text-align:right}
.developer-chart table{width:100%;margin:.5rem 0 0;border-collapse:collapse;text-align:left}
.developer-chart :is(th,td){padding:.26rem .4rem;border-bottom:1px solid #e4deca}
.account-page .admin-area .admin-metric{background:#edf2e7;color:#34513e;border-color:#dce6d4}
.account-page .admin-area .admin-metric:hover{background:#e2ecdc}
.account-page .admin-area .queue-metric{grid-template-columns:1fr auto;justify-content:stretch;min-height:0;padding:.48rem .55rem;gap:0 .65rem;margin-top:.5rem}
.queue-metric span{grid-column:1;grid-row:1}
.queue-metric strong{grid-column:2;grid-row:1;font-size:1rem}
.queue-metric meter{grid-column:1/-1;width:100%;height:.52rem}
.queue-metric meter::-webkit-meter-optimum-value{background:#528464}
.queue-metric meter::-moz-meter-bar{background:#528464}
@keyframes chart-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(max-width:760px){.admin-area .developer-charts{grid-template-columns:1fr}.connection-day small{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){.access-dialog[open],.profile-step,.connection-pair i,[data-state=checking] .invite-wheel{animation:none}}

.access-dialog::backdrop{background:#29322952;backdrop-filter:blur(9px)}
.access-modes{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;background:#f2eee5;border:1px solid #e4ddd0;border-radius:14px;padding:.3rem;margin-bottom:1rem}
.access-dialog .access-modes button{width:100%;min-height:38px;border-radius:10px;border-color:transparent;background:transparent;color:#4c5146;box-shadow:none}
.access-dialog .access-modes button[aria-current]{background:#fffdf6;color:#274b38;border-color:#e4ddd0;text-decoration:none}
.access-mode-viewport{overflow:clip;margin-inline:-4px}
.access-mode-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  transition:transform .42s cubic-bezier(.25,.7,.25,1);
}
.access-mode-track[data-mode=signup]{transform:translateX(-100%)}
.access-mode-panel{min-width:0;padding:0 4px 4px}
.access-dialog[data-screen=request] #access-content{text-align:center}
.access-dialog[data-screen=request] .access-primary{margin-top:.8rem}
.request-receipt{display:grid;justify-items:center;gap:.75rem;margin:1.2rem 0 .75rem;color:#305b40}
.request-receipt span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#e6f1e3;color:#2d6842;font-size:1.52rem;font-weight:900}
.request-pop{animation:request-pop .45s cubic-bezier(.2,.8,.35,1.3) both}
@keyframes request-pop{from{opacity:0;transform:scale(.65) rotate(-20deg)}to{opacity:1;transform:none}}
.access-dialog[data-screen=invitation][open]{color:#2d392e;background:linear-gradient(#f3eadbc4,#f3eadbc4),url('/assets/paper/papier-beige.jpg?v=illustrations-1') center/850px}
.access-dialog[data-screen=invitation] #close-access{color:#344b3b}
.access-dialog[data-screen=invitation] :is(.account-hint,.access-legal){color:#546151}
.access-dialog[data-screen=invitation] :is(.access-legal a,summary,.access-text-button){color:#305940}
.access-dialog[data-screen=invitation] #status[data-error=true]{color:#8d3c36}
.access-dialog .invitation-form .access-primary{background:#344b3b;color:white;border-color:#344b3b}
.invite-strip{width:min(100%,390px)}
.invite-strip span{font-size:clamp(1.2rem,3vw,1.65rem);background:#fffcf1;color:#2d392e;border-color:#cfc7ad}
.invite-strip:focus-within span{border-color:#60866a}
.invite-strip:has(input[aria-invalid=true]) span{border-color:#b76b60}
[data-state=verified] .invite-strip span{background:#e4f1e3;border-color:#68a37b}
.access-dialog[data-screen=invitation] .invite-actions button{color:#305940}
.invite-feedback{color:#526251}
[data-state=verified] .invite-feedback{color:#275839}
.invite-strip.legacy-code{display:block}
.access-dialog .invite-strip.legacy-code input{position:static;opacity:1;text-align:center}
@media(prefers-reduced-motion:reduce){.access-mode-track{transition:none}.request-pop{animation:none}}

.account-loading,[data-loading=true]{display:flex;align-items:center;gap:.65rem;color:#526251}
.account-loading::before,[data-loading=true]::before{content:'';width:1.1rem;height:1.1rem;flex:none;border:2px solid #c5cbbd;border-top-color:#476b51;border-radius:50%;animation:invite-turn .7s linear infinite}
.access-dialog button[data-ripple]{position:relative;isolation:isolate;overflow:hidden}
.access-dialog button[data-ripple]::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#9e78403a 0,transparent 68%);opacity:0}
.access-dialog button[data-ripple]:active::after{animation:access-ripple .36s ease-out}
@keyframes access-ripple{from{opacity:1;transform:scale(.22)}to{opacity:0;transform:scale(2)}}


/* Sheets and tabs use the same paper, ink and tape as the studio. */
.account-page.profile-page{
  --paper:#fffdf5;--ink:#2d392e;--muted:#646c5b;
  background:#eee3cd url('/assets/paper/papier-beige.jpg?v=illustrations-1') center top/850px;
}
.profile-page main{padding-top:22px}
.profile-page .account-area{
  position:relative;border-color:#d4c8ae;border-radius:16px 18px 19px 15px;
  background:linear-gradient(#fffdf5ed,#fffdf5f5),url('/assets/paper/papier-beige.jpg?v=illustrations-1') center/850px;
  box-shadow:0 2px 0 -1px #fff8e8,0 4px 0 -1px #c9bda4,0 18px 42px #4b3c2826;
}
.profile-page .account-area::before{
  content:'';position:absolute;left:29px;top:-10px;width:76px;height:21px;pointer-events:none;
  background:linear-gradient(100deg,#d9cba473,#eadfbcb3 48%,#d6c59682),
    url('/assets/paper/papier-beige.jpg?v=illustrations-1') center/240px;
  border:1px solid #cbbb8e63;
  clip-path:polygon(2% 0,100% 3%,97% 17%,100% 33%,97% 48%,100% 65%,97% 83%,99% 100%,0 97%,3% 80%,0 64%,3% 49%,0 32%,3% 16%);
  transform:rotate(-10deg);
}
.profile-page .account-area h1{margin:0;font-weight:900;line-height:1.12}
.profile-page #content>p:first-child{margin:.4rem 0 1.1rem;color:var(--muted);overflow-wrap:anywhere}
.profile-page .account-area :is(a,summary){color:#345443}
.profile-page .account-area :focus-visible{outline-color:#638367}
.profile-page .account-area button{background:#344b3b;border-color:#344b3b;border-radius:9px}
.profile-page .account-area button:hover{background:#263a2e}
.profile-page .profile-tabs{gap:.4rem;margin-bottom:.5rem}
.profile-page .profile-tabs button{
  color:#4a5747;background:#f2ecdc;border-color:#d9ceb6;min-height:2.35rem;
}
.profile-page .profile-tabs button:hover{background:#eae3d1}
.profile-page .profile-tabs button[aria-current]{
  color:#2c4938;background:#e4ecd9;border-color:#a7b998;text-decoration:none;
}
.profile-page .account-area progress{display:block;height:.6rem;accent-color:#587759}
.profile-page .profile-step{
  --note:#f4efde;
  position:relative;margin:1.1rem 0;padding:clamp(.9rem,3.5vw,1.55rem);
  border:1px solid #d4cab0;border-radius:9px 12px 12px 10px;
  background:linear-gradient(var(--note),#fffdf5 7.5rem);
  box-shadow:1px 4px 10px #51472515;
}
.profile-page .profile-step[data-step=education]{--note:#e8ecdc}
.profile-page .profile-step[data-step=guardian]{--note:#f3e5db}
.profile-page .profile-step[data-step=preferences]{--note:#e7ebf2}
.profile-page .profile-step[data-step=finish]{--note:#e5eddf}
.profile-page .profile-step::before{
  content:'';position:absolute;right:19px;top:-11px;width:17px;height:23px;pointer-events:none;
  background:
    radial-gradient(ellipse at 42% 33%,#d9ecf8a6 0 10%,transparent 40%),
    radial-gradient(ellipse 7px 5px at center 7px,#6e9bbb 55%,#2b5673 94%,transparent 100%),
    radial-gradient(ellipse 5px 5px at center 12px,#4d7a9a 50%,#2b5673 94%,transparent 100%),
    linear-gradient(#667a87,#a8adb0) center 15px/2px 7px no-repeat;
  filter:drop-shadow(1px 2px 1px #283f4b4d);transform:rotate(19deg);
}
.profile-page .profile-step h2{margin:0;font-size:clamp(1.3rem,3vw,1.65rem);font-weight:900}
.profile-page .profile-step form{margin-bottom:0}
.profile-page .account-area :is(input:not([type=checkbox],[type=radio]),select,textarea){
  border-color:#d4cbb6;background:#fffdf7;
}
.profile-page .account-hint{color:var(--muted)}
.profile-page .profile-step dl{display:grid;gap:.3rem;margin:0}
.profile-page .profile-step dt{font-weight:900;margin-top:.5rem}
.profile-page .profile-step dd{margin:0 0 0 .7rem;overflow-wrap:anywhere}
@media(max-width:520px){
  .profile-page main{padding-inline:15px}
  .profile-page .profile-tabs{gap:.35rem}
  .profile-page .profile-tabs button{font-size:.84rem;padding-inline:.58rem}
}

.access-success{
  padding:.7rem .9rem;border:1px solid #a9c1a3;border-radius:12px;background:#e6f2e1;
  color:#255338;font-weight:850;animation:success-enter .42s cubic-bezier(.18,.75,.3,1.12) both;
}
@keyframes success-enter{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}
.onboard-progress{display:grid;gap:.4rem;margin:0 0 1.1rem;color:#51634e;font-weight:800;font-size:.86rem}
.onboard-meter{height:7px;display:block;border-radius:10px;background:#e3decf;overflow:hidden}
.onboard-meter::after{content:'';display:block;height:100%;width:var(--progress,0);background:#567857;border-radius:inherit;transition:width .28s var(--ease)}
.onboard-viewport{overflow:clip;margin:-12px -4px -3px;padding:12px 4px 3px}
.onboard-question{--note:#edf0e1;min-height:220px;--step-shift:44px}
.onboard-question[data-direction=back]{--step-shift:-44px}
.onboard-question h2:focus{outline:none}
.onboard-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.55rem}
.profile-page .onboard-choices button,.profile-page .onboard-suggestions button{
  width:100%;display:flex;justify-content:flex-start;text-align:left;background:#fffdf5;border:1px solid #d9d0bc;color:#2b4635;
}
.profile-page .onboard-choices button:hover,.profile-page .onboard-suggestions button:hover{background:#eaf0e4}
.profile-page .onboard-choices button[aria-pressed=true]{background:#dfecdb;border-color:#779c76;box-shadow:inset 0 0 0 1px #779c76}
.onboard-choices img{width:36px;height:36px;object-fit:contain;flex:none}
.onboard-suggestions{display:grid;gap:.3rem}
.onboard-suggestions:empty{display:none}
.onboard-actions{margin:.55rem 0 0;justify-content:space-between}
.profile-page .account-area .onboard-back{background:transparent;color:#395744;border-color:#b9c5b5}
.profile-page .account-area .onboard-back:hover{background:#e9eee2}
.profile-page .onboard-back:disabled{opacity:.4}
.onboard-avatar{position:relative;justify-self:center;width:96px;height:96px}
.onboard-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;padding:5px;background:#e3ecdf}
.profile-page .onboard-avatar button{position:absolute;bottom:-1px;right:-5px;min-height:34px;width:34px;padding:0;border-radius:50%}
.onboard-avatar-picker{display:grid;gap:.7rem}
.onboard-loading{display:grid;justify-items:center;text-align:center;gap:.55rem;padding:1.6rem 0}
.onboard-loading h2,.onboard-loading p{margin:0}
.onboard-loading img{width:84px;height:84px;object-fit:contain;animation:onboard-float 1.35s ease-in-out infinite}
.onboard-loading progress{display:block;width:min(100%,310px);accent-color:#567857}
@keyframes onboard-float{50%{transform:translateY(-9px) rotate(-5deg)}}
.guardian-share{margin:1rem 0}
@media(prefers-reduced-motion:reduce){.access-success,.onboard-loading img{animation:none}.onboard-meter::after{transition:none}}

.access-dialog .access-modes button{display:flex;justify-content:center;align-items:center;gap:.36rem}
.access-dialog .access-modes img,.access-switch-account img{object-fit:contain;flex:none}
.access-mode-track{transition-duration:.48s;transition-timing-function:cubic-bezier(.22,.65,.28,1)}
.access-dialog .access-email-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.access-dialog .access-address-back{background:#f6eddd;color:#664717;border-color:#dec9a5;box-shadow:none}
.access-dialog .access-address-back:hover{background:#efe0c8}
.access-dialog .access-switch-account,
.access-dialog[data-screen=invitation] .invite-actions .access-switch-account{
  display:inline-flex;align-items:center;gap:.45rem;margin:.55rem auto 0;
  min-height:44px;padding:.5rem .9rem;border-radius:12px;
  color:#243f60;background:#e2edfa;border:1px solid #a9c0de;text-decoration:none;box-shadow:none;
}
.access-dialog .access-switch-account:hover,
.access-dialog[data-screen=invitation] .invite-actions .access-switch-account:hover{background:#d1e2f7;transform:translateY(-1px)}
.access-dialog[data-screen=email] :is(.account-address,form,.access-email-actions){animation:access-step-in .42s cubic-bezier(.22,.65,.28,1) both}
@keyframes access-step-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.onboard-question{animation-duration:.44s;--step-shift:26px}
.onboard-question[data-direction=back]{--step-shift:-26px}
.onboard-caption,.guardian-title{display:flex;align-items:center;gap:.85rem}
.onboard-caption{justify-content:space-between;min-height:48px}
.onboard-caption img,.guardian-title img{width:58px;height:58px;flex:none;object-fit:contain;filter:drop-shadow(0 5px 3px #45372128)}
.onboard-caption img{transform:rotate(5deg)}
.onboard-meter::after{transition-duration:.42s}
.onboard-selection{margin:0;color:#35523b;font-weight:800}
.onboard-specialties,.onboard-contests{grid-template-columns:repeat(2,minmax(0,1fr))}
.profile-page .onboard-specialties button,.profile-page .onboard-contests button{
  min-height:92px;display:grid;justify-items:center;justify-content:stretch;align-content:center;gap:.3rem;
  text-align:center;padding:.5rem;line-height:1.25;overflow-wrap:anywhere;transition:background .2s,transform .23s;
}
.onboard-folder{width:53px;height:39px;transition:transform .25s cubic-bezier(.22,.65,.28,1);filter:drop-shadow(0 3px 2px #4a332746)}
.onboard-specialties button[aria-pressed=true] .onboard-folder{transform:rotate(-5deg) translateY(-2px)}
.onboard-contests img{width:100%;height:30px}
.onboard-avatar-picker .onboard-choices button{display:grid;justify-items:center;justify-content:stretch;text-align:center;gap:.3rem}
.onboard-avatar-picker .onboard-choices img{width:42px;height:42px}
.profile-page .guardian-share{background:#f0f0e5;border-color:#cfd4c1;padding:clamp(.8rem,4vw,1.2rem);border-radius:14px}
.guardian-share button img{width:18px;height:18px;object-fit:contain;filter:invert(1)}
.guardian-share .guardian-result{animation:access-step-in .42s cubic-bezier(.22,.65,.28,1) both}
.profile-page .guardian-share .guardian-actions button:first-child{background:#375b75;border-color:#375b75}
.profile-page .guardian-share .guardian-actions button:first-child:hover{background:#294b64}
.guardian-share input[readonly]{font-size:.86rem}
@media(prefers-reduced-motion:reduce){
  .access-dialog[data-screen=email] :is(.account-address,form,.access-email-actions),.guardian-share .guardian-result{animation:none}
  .onboard-folder{transition:none}
}

.report-heading img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.report-info dd{overflow-wrap:anywhere}
.student-report{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.report-panel{background:#fffdf5;border:1px solid #d9ceb7;border-radius:16px;padding:.9rem;min-width:0}
.report-heading{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:.6rem;margin-bottom:.6rem}
.report-heading h3{margin:0;overflow-wrap:anywhere}
.report-info{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.24rem .6rem}
.report-info dt,.report-list strong{font-weight:850}
.report-info dd{margin:0;color:#43534a}
.report-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.report-metric{background:#e9efe2;border:1px solid #d1dfcc;border-radius:11px;display:grid;padding:.45rem;text-align:center}
.report-metric strong{font-size:1.12rem;line-height:1.3}
.report-metric span,.report-list span,.report-muted{font-size:.85rem;color:#4c5e51}
.report-list{list-style:none;padding:0;margin:.45rem 0 0}
.report-panel .report-list li{display:grid;gap:.1rem;padding:.55rem 0;border:0;border-top:1px solid #e2ddcf;background:none;border-radius:0}
.admin-student-report{margin-top:.7rem}
@media(max-width:680px){
  .student-report{grid-template-columns:1fr}
}

.onboard-name-sticker{position:relative;margin:0 auto;width:min(100%,480px);min-height:200px}
.onboard-name-sticker>img{display:block;width:100%;height:100%;object-fit:fill;position:absolute;inset:0;mix-blend-mode:multiply}
.onboard-sticker-fields{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:clamp(98px,18vw,118px) 9% 1.9rem}
.onboard-name-sticker label{font-size:.85rem;color:#51262c}
.profile-page .account-area .onboard-sticker-fields input{min-height:2.45rem;margin-top:.1rem;border:0;border-bottom:1px solid #a86a72;border-radius:0;background:transparent;color:#412327;font-weight:900;padding:.3rem .15rem}
.onboard-phone{display:grid;grid-template-columns:minmax(125px,1fr) minmax(0,1.6fr);gap:.5rem;padding:.55rem;border:1px solid #d4cbb6;border-radius:13px;background:#f9f4e7}
.profile-page .account-area .onboard-phone select{background:#e6edf6;border-color:#9db3ce;font-weight:800}
.profile-page .account-area .onboard-phone input{font-variant-numeric:tabular-nums;letter-spacing:.045em}
.onboard-specialties button>img{width:63px;height:49px;object-fit:contain;mix-blend-mode:multiply}
.onboard-contests .onboard-avenir{width:min(105px,100%);height:44px}
.onboard-contests button:has(.onboard-avenir){min-height:104px}
.request-delay{padding:.6rem .75rem;background:#e9eff8;color:#294663;border:1px solid #ccd9ec;border-radius:10px}

.parent-notification-choice{border:0;padding:0;margin:0;min-width:0}
.parent-notification-choice legend{font-weight:900}
.parent-notification-choice p{margin:.25rem 0 .5rem}
.profile-page .account-area .parent-notification-choice label{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.profile-page .account-area .parent-notification-choice input[type=radio]{width:1rem;height:1rem;min-height:0;margin:0;accent-color:#396346}
.family-history{display:grid;max-height:360px;overflow:auto;gap:.5rem;padding:.25rem}
.family-history article{padding:.65rem .8rem;border-radius:11px;max-width:min(88%,480px);min-width:0;overflow-wrap:anywhere}
.family-history article p{margin:.12rem 0}
.family-history time{font-size:.78rem;color:#48604e}
.family-mine{justify-self:end;background:#e2edde}
.family-other{justify-self:start;background:#eef0f8}