/* Taking Time: the Time Takers site's own look. Fonts, SVG frames, decor and art are copied from rc-timetakers.plaync.com (nc-timebreakers). */
@font-face { font-family: Orbitron; font-weight: 400 900; font-display: swap; src: url(/a/fonts/orbitron.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-display: swap; src: url(/a/fonts/inter-tight.woff2) format("woff2"); }
@font-face { font-family: TT_NUMBER; font-weight: 700; font-display: swap; src: url(/a/fonts/tt-number.woff2) format("woff2"); }

:root {
  --bg: #020721; --nav: #040405; --panel: #0e182b; --line: #1c3a78;   /* the site's navy, its frame fill and its 1px frame line */
  --edge: #5774ab;               /* UI boundaries, >=3:1 on the panels */
  --text: #f4f8ff; --text-2: #9db2d0;
  --blue: #3f7bff; --blue-hi: #6ba3ff; --blue-soft: #9fc4ff; --ice: #d4e6ff;
  --yellow: #f6d519; --red: #ff5016;
  --on-blue: #020721; --on-yellow: #1a1500;
  --f-display: Orbitron, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --f-body: "Inter Tight", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --f-num: TT_NUMBER, "Roboto Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { color-scheme: dark; scrollbar-color: #2a3f6b transparent; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 var(--f-body); -webkit-tap-highlight-color: transparent; }
::selection { background: var(--yellow); color: var(--on-yellow); }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
input, button { caret-color: var(--yellow); touch-action: manipulation; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.title { font: 800 clamp(2.2rem, 8vw, 4.6rem)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }

/* the site's frame: chamfered corners and a stepped notch at the middle of the top and bottom edges, a 1px line, a dark fill.
   The line is the outer shape and ::before is the fill, so the line follows the cuts. The hatch strips (decor-top/-bottom.svg)
   sit in the notches, as they do around the site's own panels. */
.panel { --c: 14px; --n: 46px; position: relative; isolation: isolate; background: var(--line);
  clip-path: polygon(var(--c) 0, calc(50% - var(--n) - 7px) 0, calc(50% - var(--n)) 7px, calc(50% + var(--n)) 7px, calc(50% + var(--n) + 7px) 0, calc(100% - var(--c)) 0,
    100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, calc(50% + var(--n) + 7px) 100%, calc(50% + var(--n)) calc(100% - 7px), calc(50% - var(--n)) calc(100% - 7px),
    calc(50% - var(--n) - 7px) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.panel::before { content: ""; position: absolute; z-index: -1; inset: 1px; background: var(--panel);
  clip-path: polygon(calc(var(--c) - .586px) 0, calc(50% - var(--n) - 7.414px) 0, calc(50% - var(--n) - .414px) 7px, calc(50% + var(--n) + .414px) 7px, calc(50% + var(--n) + 7.414px) 0, calc(100% - var(--c) + .586px) 0,
    100% calc(var(--c) - .586px), 100% calc(100% - var(--c) + .586px), calc(100% - var(--c) + .586px) 100%, calc(50% + var(--n) + 7.414px) 100%, calc(50% + var(--n) + .414px) calc(100% - 7px), calc(50% - var(--n) - .414px) calc(100% - 7px),
    calc(50% - var(--n) - 7.414px) 100%, calc(var(--c) - .586px) 100%, 0 calc(100% - var(--c) + .586px), 0 calc(var(--c) - .586px)); }
.panel::after { content: ""; position: absolute; z-index: -1; inset: 9px 0;
  background: url(/a/img/decor-top.svg) center top / 116px 7px no-repeat, url(/a/img/decor-bottom.svg) center bottom / 116px 7px no-repeat; }

/* the site's badge: a blue chip with the dotted label pattern, cut at one corner, the display face on top */
.chip { position: relative; display: inline-block; height: 30px; padding: 0 26px 0 14px; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #5a9bff, #2d62ea); font: 700 .78rem/30px var(--f-display); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.chip::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 86px; height: 38px; background: url(/a/img/label-pattern.svg) 0 0 / 86px 38px no-repeat; }

/* the site's link button, built the way its own CSS builds it (main~1.css, .tt-v3-link-button): a dark-blue body that stretches, the bright cut on its
   left edge that flashes every 2.7s, the label in the display face, and on hover a lift with a blue glow. .sec is its darker secondary body. */
.btn, .pill { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 50px; padding: 0 28px 0 44px; border: 0; background: none;
  color: #fff; cursor: pointer; font: 700 .95rem var(--f-display); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; transition: filter .2s ease, transform .2s ease; }
.btn::before, .pill::before { content: ""; position: absolute; z-index: -2; inset: -2px -4px -6px -3px; border-style: solid; border-color: transparent; border-width: 0 20px 0 44px;
  border-image: url(/a/img/lb-primary.svg) 0 20 0 44 fill / 0 20px 0 44px stretch; }
.btn::after, .pill::after { content: ""; position: absolute; z-index: -1; left: -3px; top: 0; width: 29px; height: 100%; background: url(/a/img/lb-cut.svg) 0 0 / 100% 100% no-repeat;
  animation: shine 2.7s linear infinite; will-change: filter; }
.pill:not([aria-pressed="true"])::before { border-image-source: url(/a/img/lb-secondary.svg); }
.pill:not([aria-pressed="true"])::after { animation: none; }
.btn i { width: 14px; height: 12px; background: url(/a/img/lb-chevron.svg) center / 100% 100% no-repeat; }
@media (hover: hover) { .btn:hover, .pill:hover { filter: brightness(1.18) drop-shadow(0 0 10px rgb(63 134 250 / .55)); transform: translateY(-2px); } }
.btn:active, .pill:active { filter: brightness(.92); transform: none; }
@keyframes shine {
  0%, 8%, 16%, 26%, to { opacity: 1; filter: brightness(1) saturate(1); }
  4%, 12%, 20% { opacity: 1; filter: brightness(2.4) saturate(1.5) drop-shadow(0 0 4px rgb(255 255 255 / .95)) drop-shadow(0 0 10px rgb(107 163 255)) drop-shadow(0 0 18px rgb(63 134 250 / .9)); }
}
@media (prefers-reduced-motion: reduce) { .btn::after, .pill::after { animation: none; } .btn, .pill { transition: none; } .btn:hover, .pill:hover { transform: none; } }

.field { display: grid; gap: 8px; font: 600 .72rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.field input { height: 52px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 0; background: var(--bg); color: var(--text);
  font: 500 1rem var(--f-body); letter-spacing: 0; text-transform: none; transition: border-color .2s, background-color .2s; }
.field input:hover { border-color: var(--blue-soft); }
.field input:focus { border-color: var(--blue-hi); background: #050c2c; outline: none; box-shadow: 0 0 0 1px var(--blue-hi); }