/* Polair opening — three-column mineral index with a shared-element transition. */
#screen-mode {
  --opening-ink:#efe4d2;--opening-soft:rgba(239,228,210,.48);--opening-line:rgba(239,228,210,.18);
  background:radial-gradient(circle at 50% 54%,rgba(69,87,126,.18),transparent 35%),linear-gradient(155deg,#071321,#0a1728 58%,#0b1a2d);color:var(--opening-ink);display:flex;flex-direction:column;isolation:isolate;min-height:100dvh;overflow:hidden;position:relative;
}
#screen-mode::after { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");content:"";inset:0;mix-blend-mode:soft-light;opacity:.05;pointer-events:none;position:absolute;z-index:80; }
#screen-mode .topbar { background:transparent;flex:0 0 auto;position:relative;transition:opacity .24s ease,transform .52s cubic-bezier(.2,.75,.2,1);z-index:24; }
#screen-mode .portal-cover { inset:0 0 auto;height:220px;overflow:visible;padding:0;pointer-events:none;position:absolute;width:100%;z-index:1; }
#screen-mode .portal-prism-clean { display:none; }
#screen-mode .portal-masthead { align-items:flex-end;display:flex;inset:112px 18px auto;justify-content:center;position:absolute;transition:opacity .24s ease,transform .52s cubic-bezier(.2,.75,.2,1);z-index:1; }
#screen-mode .portal-masthead span { color:var(--opening-ink);font:300 clamp(60px,19.5vw,82px)/.75 var(--font-headline);letter-spacing:-.075em;opacity:.97; }
#screen-mode .portal-masthead b { color:var(--opening-soft);font:500 7px/1 var(--font-body);letter-spacing:.18em;margin:0 0 2px 12px; }
#screen-mode .mode-select { background:transparent;border:0;bottom:max(8px,env(safe-area-inset-bottom));box-shadow:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:min(43dvh,360px);left:8px;margin:0;padding:0;position:absolute;width:calc(100% - 16px);z-index:12; }
#screen-mode .mode-card,#screen-mode .mode-card:nth-child(2),#screen-mode .mode-card:nth-child(3) { align-items:stretch;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--opening-ink);display:flex;flex-direction:column;height:100%;justify-content:flex-end;margin:0;min-width:0;overflow:visible;padding:0 5px 42px;position:relative;text-align:center;transform:translate3d(0,20px,0);transition:opacity .26s ease,transform .58s cubic-bezier(.2,.78,.2,1);width:100%; }
#screen-mode .mode-card:nth-child(2) { padding-bottom:110px;transform:translate3d(0,-32px,0); }
#screen-mode .mode-card:nth-child(3) { padding-bottom:18px;transform:translate3d(0,8px,0); }
#screen-mode .mode-card::after { background:linear-gradient(90deg,transparent,var(--opening-line) 22%,var(--opening-line) 78%,transparent);bottom:0;content:"";height:1px;left:3px;position:absolute;right:3px; }
#screen-mode .mode-card:nth-child(2)::after { bottom:82px;transform:rotate(-7deg); }
#screen-mode .mode-card:nth-child(3)::after { bottom:-5px;transform:rotate(4deg); }
#screen-mode .mode-index { color:var(--opening-soft);font:500 10px/1 var(--font-body);left:8px;letter-spacing:.02em;position:absolute;top:auto;bottom:174px;z-index:5; }
#screen-mode .mode-card:nth-child(2) .mode-index { bottom:240px;left:17px; }
#screen-mode .mode-card:nth-child(3) .mode-index { bottom:151px;left:3px; }
#screen-mode .mode-card .mode-name,#screen-mode .mode-card:nth-child(2) .mode-name,#screen-mode .mode-card:nth-child(3) .mode-name { align-items:flex-end;color:var(--opening-ink);display:flex;font:300 clamp(45px,12vw,57px)/.78 var(--font-headline);height:128px;justify-content:center;letter-spacing:-.06em;padding:0;position:relative;text-align:center!important;white-space:normal;z-index:3; }
#screen-mode .mode-card:nth-child(1) .mode-name { transform:translateX(-4px) rotate(-1.5deg); }
#screen-mode .mode-card:nth-child(2) .mode-name { font-size:clamp(51px,13.5vw,64px);transform:translateX(5px) rotate(1deg); }
#screen-mode .mode-card:nth-child(3) .mode-name { font-size:clamp(38px,10.2vw,49px);line-height:.78;transform:translateX(-3px) rotate(-2deg); }
#screen-mode .mode-arrow { bottom:26px;color:var(--opening-soft);font:400 12px/1 var(--font-body);position:absolute;right:7px;transition:transform .24s ease,color .2s ease;z-index:7; }
#screen-mode .mode-card:nth-child(2) .mode-arrow { bottom:92px; }
#screen-mode .mode-card:nth-child(3) .mode-arrow { bottom:2px; }
#screen-mode .mode-object { align-items:center;display:flex;height:126px;justify-content:center;left:54%;pointer-events:none;position:absolute;top:70%;transform:translate3d(-50%,-50%,0);transform-origin:center;width:126px;z-index:6; }
#screen-mode .mode-card:nth-child(2) .mode-object { left:43%;top:52%; }
#screen-mode .mode-card:nth-child(3) .mode-object { left:57%;top:74%; }
#screen-mode .mode-object::after { background:radial-gradient(ellipse,rgba(218,228,236,.24),transparent 66%);content:"";filter:blur(10px);inset:24% 4% 0;position:absolute;z-index:-1; }
#screen-mode .mode-object img { animation:opening-object-turn 8.8s ease-in-out infinite;display:block;filter:contrast(1.06) saturate(.88) drop-shadow(0 14px 19px rgba(0,0,0,.38));height:100px;object-fit:contain;transform-origin:center;width:100px;will-change:transform; }
#screen-mode .mode-card:nth-child(2) .mode-object img { animation-delay:-2.9s; }
#screen-mode .mode-card:nth-child(3) .mode-object img { animation-delay:-5.8s; }
#screen-mode .mode-card::before { background:linear-gradient(180deg,rgba(123,180,218,.02),rgba(194,165,224,.14) 55%,rgba(239,228,210,.07));content:"";inset:0;opacity:0;position:absolute;transform:scaleY(.2);transform-origin:bottom;transition:transform .42s cubic-bezier(.16,.84,.24,1),opacity .16s ease;z-index:0; }
#screen-mode .mode-card:active::before,#screen-mode .mode-card.is-pressed::before { opacity:1;transform:scaleY(1); }
#screen-mode .mode-card:active .mode-arrow,#screen-mode .mode-card.is-pressed .mode-arrow { color:#fff7e9;transform:translate(3px,-3px); }
#screen-mode.is-choosing .mode-card:not(.is-pressed) { opacity:0;transform:translate3d(0,22px,0) scale(.96); }
#screen-mode.is-choosing .mode-card.is-pressed .mode-name,#screen-mode.is-choosing .mode-card.is-pressed .mode-index,#screen-mode.is-choosing .mode-card.is-pressed .mode-arrow { opacity:0;transition:opacity .18s ease; }
#screen-mode.is-choosing .portal-masthead { opacity:0;transform:translate3d(0,-9px,0); }
#screen-mode.is-choosing .topbar { opacity:0;transform:translate3d(0,-6px,0); }
#screen-mode .mode-object.is-morph-source { opacity:0; }
.portal-morph-clone { contain:layout paint;display:block;filter:contrast(1.06) saturate(.9) drop-shadow(0 14px 20px rgba(0,0,0,.38));margin:0;object-fit:contain;pointer-events:none;position:fixed;transform-origin:0 0;will-change:transform;z-index:9999; }
.screen.portal-scene-enter { animation:portal-scene-in .7s cubic-bezier(.2,.76,.2,1) both; }
.wordmark img.is-portal-brand { filter:contrast(1.05) saturate(.88) drop-shadow(0 5px 8px rgba(0,0,0,.26));height:50px;mix-blend-mode:normal!important;object-fit:contain;width:50px; }
.wordmark img.portal-brand-arriving { opacity:0; }
@keyframes opening-object-turn { 0%,100% { transform:translate3d(0,4px,0) rotate(-7deg) scale(.95); } 36% { transform:translate3d(0,-6px,0) rotate(7deg) scale(1.045); } 68% { transform:translate3d(0,1px,0) rotate(-2deg) scale(.99); } }
@keyframes portal-scene-in { from { opacity:0;transform:translate3d(0,13px,0); } to { opacity:1;transform:translate3d(0,0,0); } }
@media(max-height:700px) { #screen-mode .portal-masthead { top:88px; } #screen-mode .portal-masthead span { font-size:56px; } #screen-mode .mode-select { height:300px; } #screen-mode .mode-card .mode-name { font-size:42px;height:108px; } #screen-mode .mode-card:nth-child(2) { padding-bottom:84px;transform:translate3d(0,-22px,0); } #screen-mode .mode-card:nth-child(2) .mode-name { font-size:47px; } #screen-mode .mode-card:nth-child(3) .mode-name { font-size:35px; } #screen-mode .mode-object { height:108px;width:108px; } #screen-mode .mode-object img { height:86px;width:86px; } #screen-mode .mode-card:nth-child(2) .mode-index { bottom:204px; } }
@media(max-width:350px) { #screen-mode .mode-select { left:10px;width:calc(100% - 20px); } #screen-mode .mode-card { padding-left:4px;padding-right:4px; } #screen-mode .mode-card .mode-name { font-size:39px; } #screen-mode .mode-card:nth-child(3) .mode-name { font-size:34px; } #screen-mode .mode-object { height:104px;width:104px; } #screen-mode .mode-object img { height:84px;width:84px; } }
@media(hover:hover) { #screen-mode .mode-card:hover { background:transparent; } }
@media(prefers-reduced-motion:reduce) { #screen-mode .mode-object img,#screen-mode .mode-card,#screen-mode .mode-card::before,.screen.portal-scene-enter { animation:none!important;transition:none!important; } }