/* devline.tech welcome (/auth/login): the Bloom gallery of the Screen (public/design/bloom-gallery.html, v8, branch
   codex/orbital-screen-release), its styles moved out of the page for the site CSP. Fonts served by the site. */
@font-face{font-family:"Instrument Serif";src:url('/bloom-assets/fonts/InstrumentSerif-Regular.woff') format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url('/bloom-assets/fonts/InstrumentSerif-Italic.woff') format("woff");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url('/bloom-assets/fonts/dm-mono-400-latin.woff2') format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url('/bloom-assets/fonts/dm-mono-500-latin.woff2') format("woff2");font-weight:500;font-display:swap}
/* Gallery v2: the three roles drawn in light on a turntable. Drag it, use the tabs or the arrow keys; the one in front comes alive and its button steps in. */
:root{
  color-scheme:dark;
  --bg:#09090c;--ink:#f1edf8;--muted:#aaa1b6;--dim:#8a8296;--line:#ffffff14;--line-2:#ffffff26;--card:#15121b;
  --project:#ffa47a;--creator:#c3a2f5;--investor:#6fd5f1;--accent:var(--project);
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;--mono:"DM Mono",ui-monospace,"Cascadia Mono",monospace;
  --text:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}
body[data-role=creator]{--accent:var(--creator)}
body[data-role=investor]{--accent:var(--investor)}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--ink);font:15px/1.6 var(--text);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 58%),radial-gradient(ellipse at 50% 112%,#21142099,transparent 58%),var(--bg);transition:background .8s}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.canvas{position:fixed;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.page{position:relative;z-index:3;display:flex;flex-direction:column;width:min(1180px,100%);min-height:100vh;min-height:100svh;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 28px}
/* Headline, turntable and sign-in sit together in the middle of the screen, however tall it is. */
.main{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:3vh}
.top{display:flex;align-items:center;justify-content:space-between;min-height:70px}
.brand{font:600 15px var(--text);letter-spacing:3px}
.brand span{color:var(--project)}
.motion{min-height:36px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;background:#ffffff06;color:var(--muted);font:12px/1 var(--text);cursor:pointer}
.motion:hover{color:var(--ink);border-color:#ffffff40}

.head{text-align:center}
h1{max-width:28ch;margin:8px auto 0;font:400 clamp(36px,4.6vw,62px)/1.02 var(--serif);letter-spacing:-.5px;text-wrap:balance}
h1 em.p{color:var(--project)}h1 em.c{color:var(--creator)}h1 em.i{color:var(--investor)}

/* The turntable */
.stage{position:relative;height:clamp(300px,42vh,500px);margin-top:14px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage.dragging{cursor:grabbing}
.tick{position:absolute;width:16px;height:16px;border-color:var(--line-2);border-style:solid;pointer-events:none}
.tick.a{left:5%;top:8%;border-width:1px 0 0 1px}.tick.b{right:5%;top:8%;border-width:1px 1px 0 0}
.tick.c{left:5%;bottom:6%;border-width:0 0 1px 1px}.tick.d{right:5%;bottom:6%;border-width:0 1px 1px 0}
.label{--c:var(--project);position:absolute;left:0;top:0;display:flex;gap:7px;align-items:center;padding:4px 9px;border:1px solid color-mix(in srgb,var(--c) 26%,transparent);border-radius:999px;background:#09090ccc;color:var(--c);font:500 11px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .3s}
.label[data-role=creator],.tab[data-tab=creator]{--c:var(--creator)}.label[data-role=investor],.tab[data-tab=investor]{--c:var(--investor)}

/* Who you are, and the way in */
.panel{display:grid;justify-items:center;gap:14px;width:min(760px,100%);margin:4px auto 0;text-align:center}
.tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:16px;background:#ffffff05}
.tab{--c:var(--project);display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 18px;border:0;border-radius:12px;background:none;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;transition:background .25s,color .25s}
.tab:hover{color:var(--ink)}
.tab i{width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.45;transition:opacity .25s,box-shadow .25s}
.tab[aria-selected=true]{background:color-mix(in srgb,var(--c) 15%,#ffffff06);color:var(--ink)}
.tab[aria-selected=true] i{opacity:1;box-shadow:0 0 12px var(--c)}
.copy h2{margin:0;font:400 clamp(32px,3.4vw,44px)/1.04 var(--serif)}
.copy p{margin:8px 0 0;color:var(--muted);font-size:15.5px;text-wrap:balance}
.swap{animation:swap .5s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes swap{from{opacity:0;transform:translateY(8px)}}
.ways{display:flex;justify-content:center;gap:12px}
.cta{display:inline-flex;align-items:center;gap:14px;height:50px;padding:0 24px 0 28px;border:0;border-radius:14px;background:var(--accent);color:#140d14;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 12px 32px -14px var(--accent);transition:transform .2s,box-shadow .2s,background .6s}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px var(--accent)}
.cta span{font-size:17px;transition:transform .2s}
.cta:hover span{transform:translateX(3px)}
.cta.quiet{padding:0 26px;background:#ffffff08;color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.cta.quiet:hover{background:color-mix(in srgb,var(--accent) 12%,#ffffff08);box-shadow:inset 0 0 0 1px var(--accent)}
.veil{--c:var(--accent);position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--c) 24%,#09090c),#09090c 72%);transition:opacity .9s ease}
body.departing .veil{opacity:1}
body.departing .page{opacity:.12;transition:opacity .5s}

body[data-motion=paused] *,body[data-motion=paused] *::before,body[data-motion=paused] *::after{animation-play-state:paused!important}
@media (max-width:720px){
  .stage{height:clamp(270px,70vw,340px)}
  .tabs{width:100%}
  .tab{flex:1;justify-content:center;gap:7px;padding:0 6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Without JavaScript the turntable cannot run: plain links to the three role pages instead. */
.noscript-ways{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.noscript-ways a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:14px;background:#ffffff08;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:600;text-decoration:none}