@font-face{font-family:"Space Grotesk";font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--font:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:#0d0906}
body{color:#fff;font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
svg{display:block}
/* CraftikPrint sign-in (copied from the Craftik Office gate; same layout, new scene).
   Same layout language as the Paperless / authentik / Nextcloud logins: a full-page animated
   scene, brand on the left art panel, a frosted-glass form panel on the right (358u column),
   IftyLabs badge bottom-left. The scene is a cozy workspace at night (gate/scene.svg, wired
   up by gate/gate.js). --u = 1px on the 1440x900 frame, like the other pages. */

.gate {
  --u: clamp(0.8px, min(0.069444vw, 0.111111vh), 1.6px);
  --o: #19C3F5;
  --o-lit: #5ED8FF;
  --field: #10131c;
  --field-line: rgba(25, 195, 245, .28);
  --field-focus: rgba(25, 195, 245, .8);
  --ak: #FD4B2D;
  --ak-bg: #190805;
  --hero: 0px;

  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  color: #fff;
}

/* ------------------------------------------------------------------ layout */

.gate__page {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  pointer-events: none;                           /* the scene stays clickable (cat, squirrel) */
}

.gate__art { position: relative; flex: 0 0 59.72%; }

.gate__badge {
  position: absolute;
  left: calc(48 * var(--u));
  bottom: calc(47 * var(--u));
  pointer-events: auto;
}

.gate__panel {                                    /* frosted glass over the room */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(40 * var(--u)) calc(24 * var(--u));
  background: rgba(16, 11, 8, .42);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
          backdrop-filter: blur(12px) saturate(130%);
  border-left: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 1px 0 0 rgba(25, 195, 245, .06);
  pointer-events: auto;
}

.gate__content {
  width: calc(358 * var(--u));
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(44 * var(--u));
  animation: gate-rise .7s var(--ease) .15s both;
}
@keyframes gate-rise { from { opacity: 0; transform: translate3d(0, 14px, 0) } }

.gate__mbrand { display: none; }
.gate__mbadge { display: none; }

.gate__greet h1 {
  margin: 0 0 calc(6 * var(--u));
  font-weight: 700;
  font-size: calc(32 * var(--u));
  line-height: calc(38 * var(--u));
  letter-spacing: -.02em;
}
.gate__greet p {
  margin: 0;
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  color: rgba(255, 255, 255, .72);
}

.gate__msg {
  margin: calc(-24 * var(--u)) 0;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  background: rgba(253, 75, 45, .10);
  border: 1px solid rgba(253, 75, 45, .55);
  color: #ffd9d2;
}
.gate__msg:empty { display: none; }

.gate__form { display: flex; flex-direction: column; gap: calc(20 * var(--u)); margin: 0; }
.gate__form.is-shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  20%, 60% { transform: translateX(-7px) }
  40%, 80% { transform: translateX(7px) }
}

.gate__fields { display: flex; flex-direction: column; }

.gate__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(15 * var(--u));
  background: var(--field);
  border: 1px solid var(--field-line);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gate__field:first-child { border-bottom: 0; border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0; }
.gate__field:last-child { border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u)); }
.gate__field:focus-within { z-index: 1; border-color: var(--field-focus); box-shadow: 0 0 0 3px rgba(25, 195, 245, .14); }
.gate__field:first-child:focus-within { border-bottom: 1px solid var(--field-focus); margin-bottom: -1px; }

.gate__field > svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; color: rgba(255, 255, 255, .9); }

.gate__field input {
  flex: 1;
  min-width: 0;
  height: calc(28 * var(--u));
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font: 400 max(16px, calc(14.5 * var(--u)))/1.2 var(--font);   /* >=16px stops iOS zoom-on-focus */
}
@media (min-width: 901px) { .gate__field input { font-size: calc(14.5 * var(--u)); } }
.gate__field input::placeholder { color: rgba(255, 255, 255, .5); }
.gate__field input:-webkit-autofill,
.gate__field input:-webkit-autofill:hover,
.gate__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: #fff;
  transition: background-color 9999s ease-out 0s;
}
.gate__field input:focus-visible { outline: 0; }

.gate__eye {
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  flex: none;
  margin: calc(-4 * var(--u)) calc(-6 * var(--u)) calc(-4 * var(--u)) 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #fff;
  opacity: .5;
  cursor: pointer;
  transition: opacity .15s ease;
}
.gate__eye:hover, .gate__eye[aria-pressed="true"] { opacity: 1; }
.gate__eye svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.gate__eye .eye-off { display: none; }
.gate__eye[aria-pressed="true"] .eye-on { display: none; }
.gate__eye[aria-pressed="true"] .eye-off { display: block; }

.gate__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(18 * var(--u)) calc(26 * var(--u));
  border: 0;
  border-radius: calc(10 * var(--u));
  background: var(--o);
  color: #140a02;
  font: 700 calc(15 * var(--u))/calc(17 * var(--u)) var(--font);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gate__cta:hover { background: var(--o-lit); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(25, 195, 245, .32); }
.gate__cta:active { transform: translateY(0); box-shadow: none; }
.gate__cta[disabled] { opacity: .6; pointer-events: none; }

.gate__forgot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  opacity: .7;
  text-align: center;
  font: 700 calc(14 * var(--u))/calc(17 * var(--u)) var(--font);
  cursor: pointer;
}
.gate__forgot:hover { opacity: 1; }
.gate__hint {
  margin: calc(-8 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(12.5 * var(--u));
  line-height: 1.4;
  color: rgba(255, 255, 255, .55);
}

.gate__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: calc(-20 * var(--u)) 0;
  font-size: calc(12 * var(--u));
  color: rgba(255, 255, 255, .35);
}
.gate__or::before, .gate__or::after { content: ""; flex: 1; border-top: 1px solid rgba(255, 255, 255, .09); }

.gate__ak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: calc(15 * var(--u)) calc(20 * var(--u));
  border: 1px solid var(--ak);
  border-radius: 1000px;
  background: var(--ak-bg);
  color: #fff;
  text-decoration: none;
  font: 600 calc(13 * var(--u))/calc(15 * var(--u)) var(--font);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gate__ak:hover { background: #2a0d08; box-shadow: 0 6px 20px rgba(253, 75, 45, .22); transform: translateY(-1px); }
.gate__ak svg { width: calc(26.12 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.gate__ak b { color: var(--ak); font-weight: 700; }

.gate__cta:focus-visible, .gate__ak:focus-visible, .gate__forgot:focus-visible, .gate__eye:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.gate__foot {
  margin: calc(-18 * var(--u)) 0 0;
  font-size: calc(11.5 * var(--u));
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, .4);
}
.gate__foot a { color: rgba(255, 170, 100, .85); text-decoration: none; }
.gate__foot a:hover { color: var(--o-lit); }

/* IftyLabs badge — same build as the Paperless / Nextcloud ones: mark square + pixel wordmark */
.ilbadge {
  display: inline-flex;
  align-items: stretch;
  height: calc(42 * var(--u));
  border: calc(.86 * var(--u)) solid var(--o);
  background: rgba(0, 0, 0, .35);
  text-decoration: none;
}
.ilbadge__mark { width: calc(41 * var(--u)); height: 100%; flex: none; background: var(--o); }
.ilbadge__mark svg { width: 100%; height: 100%; display: block; }
.ilbadge__word {
  display: flex;
  align-items: center;
  padding: 0 calc(12 * var(--u)) 0 calc(10 * var(--u));
  font: 700 calc(11 * var(--u))/1 "Silkscreen", monospace;
  letter-spacing: .14em;
  color: var(--o);
  white-space: nowrap;
}
.ilbadge__word b { color: #fff; font-weight: 700; }

/* ------------------------------------------------------------------ phone / tablet */

@media (max-width: 900px) {
  .gate { --u: clamp(1px, .27vw, 1.15px); }
  .gate__art { display: none; }
  .gate__scene::after {
    background: linear-gradient(180deg, transparent calc(var(--hero) - 60px), rgba(0, 0, 0, .55) calc(var(--hero) + 80px));
  }
  .gate__panel {
    align-items: flex-start;
    padding: max(calc(var(--hero) - 28px), 24px) 16px max(32px, env(safe-area-inset-bottom));
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border: 0;
    box-shadow: none;
    pointer-events: none;
  }
  .gate__content {
    width: 420px;
    gap: 30px;
    padding: 26px 22px 24px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    background: rgba(16, 11, 8, .62);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
            backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    pointer-events: auto;
  }
  .gate__mbrand { display: flex; align-items: center; gap: 10px; }
  .gate__mbrand img { width: 28px; height: 26px; }
  .gate__mbrand span { font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
  .gate__mbadge { display: flex; justify-content: center; margin-top: -8px; }

  /* phone type: fixed sizes, not the 1440 frame scaled up — scaled, the heading
     was 34px and the lede 19px in a 310px column (inputs stay 16px for iOS) */
  .gate__greet h1 { margin-bottom: 4px; font-size: 26px; line-height: 31px; }
  .gate__greet p { font-size: 15px; line-height: 20px; }
  .gate__msg { font-size: 13px; }
  .gate__cta { padding: 15px 22px; font-size: 15px; line-height: 18px; }
  .gate__forgot { font-size: 13px; line-height: 16px; }
  .gate__or { font-size: 11px; }
  .gate__ak { padding: 13px 18px; font-size: 13px; line-height: 16px; }
  .gate__hint { font-size: 12px; }
  .gate__foot { font-size: 11px; }
}

@media (max-height: 520px) and (min-width: 901px) {
  .gate__panel { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .gate *, .gate *::before, .gate *::after { transition: none !important; animation: none !important; }
}

/* Craftik ID button (2026-10-06): Face ID glyph + a second line (same as user.craftik.bd) */
.gate__ak { justify-content: center !important; gap: calc(14 * var(--u)) !important; }
.gate__ak svg { width: calc(24 * var(--u)) !important; height: calc(24 * var(--u)) !important; }
.gate__ak-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; }
.gate__ak-t small { font-size: .82em; font-weight: 500; opacity: .6; }


/* ——— print studio specifics ——— */
.gate__hint a{color:#FD4B2D}
.gate__note{margin:calc(-22*var(--u)) 0 0;font-size:calc(12.5*var(--u));line-height:1.5;text-align:center;color:rgba(255,255,255,.5)}
.gate__remember{position:relative;display:inline-flex;align-items:center;gap:calc(10*var(--u));align-self:flex-start;margin:calc(-4*var(--u)) 0;font-size:calc(14*var(--u));color:rgba(255,255,255,.78);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.gate__remember input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gate__box{display:grid;place-items:center;width:calc(20*var(--u));height:calc(20*var(--u));border:1px solid var(--field-line);border-radius:calc(6*var(--u));background:var(--field);color:#140a02;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.gate__box svg{width:72%;height:72%;opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}
.gate__remember:hover .gate__box{border-color:var(--field-focus)}
.gate__remember input:checked+.gate__box{background:var(--o);border-color:var(--o)}
.gate__remember input:checked+.gate__box svg{opacity:1;transform:none}
.gate__remember input:focus-visible+.gate__box{outline:2px solid #fff;outline-offset:2px}
@media (max-width:900px){.gate .gate__remember{gap:10px;margin:-6px 0;font-size:14px}.gate .gate__box{width:20px;height:20px;border-radius:6px}.gate .gate__note{margin-top:-18px;font-size:10.5px;line-height:1.45;color:rgba(255,255,255,.45)}}