.app{--bg:#F4EDE0;--paper:#FBF7EF;--card:#FFFFFF;--chip:#F4EDE0;--ink:#16213A;--on-ink:#F4EDE0;--on-ink-muted:#C9C3B6;--ink-line:#2E3B5C;--muted:#4A5470;--text2:#33405F;--line:#DDD0B8;--line2:#CFC0A4;--hair:#EDE3D1;--seg:#E9DEC9;--track:#E6DAC4;--header:rgba(244,237,224,0.95);--on-accent:#FFFFFF;--accent:#A4302B;--accent-h:#86251F}
.app[data-theme="dark"]{--bg:#10151F;--paper:#151C29;--card:#1B2333;--chip:#252E42;--ink:#EEE7DA;--on-ink:#141B28;--on-ink-muted:#4A5470;--ink-line:#CFC0A4;--muted:#A7AFC2;--text2:#C9CFDC;--line:#2C364B;--line2:#3A465E;--hair:#273043;--seg:#222A3C;--track:#2C364B;--header:rgba(16,21,31,0.92);--on-accent:#10151F}
@media (prefers-color-scheme:dark){.app[data-theme="system"]{--bg:#10151F;--paper:#151C29;--card:#1B2333;--chip:#252E42;--ink:#EEE7DA;--on-ink:#141B28;--on-ink-muted:#4A5470;--ink-line:#CFC0A4;--muted:#A7AFC2;--text2:#C9CFDC;--line:#2C364B;--line2:#3A465E;--hair:#273043;--seg:#222A3C;--track:#2C364B;--header:rgba(16,21,31,0.92);--on-accent:#10151F}}
.app[data-accent="nar"]{--accent:#A4302B;--accent-h:#86251F}
.app[data-theme="dark"][data-accent="nar"]{--accent:#E0685D;--accent-h:#EE8A80}
@media (prefers-color-scheme:dark){.app[data-theme="system"][data-accent="nar"]{--accent:#E0685D;--accent-h:#EE8A80}}
.app[data-accent="mavi"]{--accent:#2C4F9E;--accent-h:#213D7C}
.app[data-theme="dark"][data-accent="mavi"]{--accent:#7C9BE0;--accent-h:#9DB5EA}
@media (prefers-color-scheme:dark){.app[data-theme="system"][data-accent="mavi"]{--accent:#7C9BE0;--accent-h:#9DB5EA}}
.app[data-accent="mese"]{--accent:#1F6B4A;--accent-h:#17543A}
.app[data-theme="dark"][data-accent="mese"]{--accent:#4FB386;--accent-h:#72C79F}
@media (prefers-color-scheme:dark){.app[data-theme="system"][data-accent="mese"]{--accent:#4FB386;--accent-h:#72C79F}}
.app[data-accent="benovse"]{--accent:#5B3F8C;--accent-h:#48316F}
.app[data-theme="dark"][data-accent="benovse"]{--accent:#A98BE0;--accent-h:#C0A8EA}
@media (prefers-color-scheme:dark){.app[data-theme="system"][data-accent="benovse"]{--accent:#A98BE0;--accent-h:#C0A8EA}}
.app[data-accent="terrakota"]{--accent:#B3552F;--accent-h:#8F4426}
.app[data-theme="dark"][data-accent="terrakota"]{--accent:#E08A5E;--accent-h:#EAA47F}
@media (prefers-color-scheme:dark){.app[data-theme="system"][data-accent="terrakota"]{--accent:#E08A5E;--accent-h:#EAA47F}}
.app[data-size="large"]{zoom:1.12}
.app[data-size="small"]{zoom:0.9}
body:has(.app[data-theme="dark"]){background:#10151F}
@media (prefers-color-scheme:dark){body:has(.app[data-theme="system"]){background:#10151F}}
.app img{color:transparent}
body{margin:0;background:#F4EDE0;color:#16213A;font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--accent)}a:hover{color:var(--accent-h)}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.disp{font-family:'Unbounded','IBM Plex Sans',system-ui,sans-serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
.h1{font-size:56px;line-height:1.08;letter-spacing:-0.02em}
.h2{font-size:38px;line-height:1.15;letter-spacing:-0.015em}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:64px;align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.dgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:start}
.tgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}
.pgrid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:40px;align-items:start}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sticky{position:sticky;top:96px}
.navlinks{display:flex}
.regbtn{display:inline-flex}
.pbanner{height:200px}
.app[data-motion="reduce"] *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
.app[data-contrast="high"]{--muted:var(--text2);--line:var(--line2)}
.mnav{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line)}
.tabs button{flex-shrink:0}
.lbl{display:block;font-size:14px;font-weight:600;margin:0 0 6px}
.inp{width:100%;min-height:48px;padding:0 14px;border-radius:10px;border:1.5px solid var(--line2);background:var(--card);color:var(--ink);font-family:inherit;font-size:16px}
textarea.inp{padding:12px 14px;min-height:96px;resize:vertical;line-height:1.5}
select.inp{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.inp:focus{border-color:var(--ink)}
.btn-p{background:var(--accent);color:var(--on-accent)}.btn-p:hover{background:var(--accent-h);color:var(--on-accent)}
.btn-d{background:var(--ink);color:var(--on-ink)}.btn-d:hover{background:var(--accent-h);color:var(--on-ink)}
.btn-o:hover{background:var(--ink);color:var(--on-ink)}
.nbtn{background:none;border:0;padding:8px 0;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;color:var(--ink)}
.nbtn:hover{color:var(--accent)}
.card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(22,33,58,.12)}
.faqbtn:hover{color:var(--accent)}
.flink{background:none;border:0;padding:0;min-height:32px;display:inline-flex;align-items:center;text-align:left;font-family:inherit;font-size:15px;cursor:pointer;color:var(--on-ink)}.flink:hover{color:#D9A13B}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid #D9A13B;outline-offset:2px}
@media (max-width:1020px){
.hero,.dgrid,.tgrid,.split,.feature,.pgrid{grid-template-columns:minmax(0,1fr)}
.hero{gap:40px}
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot{grid-template-columns:repeat(2,minmax(0,1fr))}
.h1{font-size:44px}
.sticky{position:static}
.dgrid>#qeydiyyat{order:-1}
}
@media (max-width:640px){
.wrap{padding:0 20px}
.cards,.steps,.frow,.pcards{grid-template-columns:minmax(0,1fr)}
.foot{grid-template-columns:minmax(0,1fr)}
.navlinks,.deskonly{display:none}
.mnav{display:flex}
.chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin:0 -20px;padding-left:20px;padding-right:20px}
.chips button{flex-shrink:0}
.h1{font-size:34px}
.pbanner{height:130px}
.h2{font-size:27px}
}
/* ---- platform additions ---- */
.tpl-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,220px);gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.tpl-row>button{scroll-snap-align:start}
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.panel{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
/* div-based table: an <sc-for> inside <tbody> would be moved out of the table by the HTML parser */
.regtable{display:table;width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.rt-head{display:table-header-group}.rt-body{display:table-row-group}.rt-row{display:table-row}
.rt-th,.rt-td{display:table-cell;padding:10px 12px}
.rt-th{text-align:left;background:var(--paper);font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.rt-td{border-bottom:1px solid var(--hair);vertical-align:top}
.rt-body .rt-row:last-child .rt-td{border-bottom:0}
.cert{--ca:#C8922E;--c-paper:#FBF7EF;--c-ink:#16213A;--c-text:#33405F;--c-soft:#4A5470;--c-line:#DDD0B8;--c-frame:#E0CDAE;--c-faint:#7A7263;background:var(--c-paper);color:var(--c-ink);border-radius:8px;padding:14px;box-shadow:0 20px 50px rgba(22,33,58,.18);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cert-inner{border:2px solid var(--ca);border-radius:4px;padding:40px 48px;display:flex;flex-direction:column;gap:20px;box-shadow:inset 0 0 0 6px var(--c-paper),inset 0 0 0 7px var(--c-frame)}
.cert-name{font-size:46px;font-weight:700;line-height:1.15;color:var(--c-ink);word-break:break-word}
.cert-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:18px;border-top:1px solid var(--c-line)}
.cert-foot>div{display:flex;flex-direction:column;gap:4px}
.cert-lbl{font-size:11px;letter-spacing:.08em;color:var(--ca)}
.cert-val{font-size:15px;font-weight:600;color:var(--c-ink)}
.cert-word,.cert-strong{color:var(--c-ink)}
.cert-kind{color:var(--ca)}
.cert-given{color:var(--c-soft)}
.cert-body{color:var(--c-text)}
.cert-verify{color:var(--c-faint)}
.cert-logos{border-left:1px solid var(--c-line)}
.cert-spons{border-top:1px solid var(--c-line)}
.cert-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.cert-seal{width:118px;height:118px;flex:none;transform:rotate(-8deg);opacity:.92}
.cert-signs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:28px;margin-left:auto}
.cert-sign{min-width:200px;display:flex;flex-direction:column;gap:6px;text-align:center}
.cert-sign-name{font-size:15px;font-weight:600;color:var(--c-ink);padding-bottom:6px;border-bottom:1px solid var(--c-ink)}
.cert-inner{position:relative;isolation:isolate;background:var(--c-paper)}
/* a faint flame behind the text and small diamond corners, in the accent colour */
.cert-inner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M14 30.5C7.6 30.5 3 26 3 20C3 12.6 9.4 8.2 15.6 6.4C19.4 5.3 21.8 3.6 22.6 1.2C24.8 3.4 24.9 7 22.9 9.3C26.4 11.6 28.6 15.2 28.6 19.6C28.6 25.9 22.6 30.5 14 30.5Z' fill='%23A4302B'/%3E%3C/svg%3E") no-repeat center 46%/300px}
.cert-inner::after{content:"";position:absolute;inset:10px;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 1l10 10-10 10L1 11z' fill='none' stroke='%23C8922E' stroke-width='1.6'/%3E%3Cpath d='M11 7l4 4-4 4-4-4z' fill='%23C8922E'/%3E%3C/svg%3E") no-repeat left top,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 1l10 10-10 10L1 11z' fill='none' stroke='%23C8922E' stroke-width='1.6'/%3E%3Cpath d='M11 7l4 4-4 4-4-4z' fill='%23C8922E'/%3E%3C/svg%3E") no-repeat right top,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 1l10 10-10 10L1 11z' fill='none' stroke='%23C8922E' stroke-width='1.6'/%3E%3Cpath d='M11 7l4 4-4 4-4-4z' fill='%23C8922E'/%3E%3C/svg%3E") no-repeat left bottom,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 1l10 10-10 10L1 11z' fill='none' stroke='%23C8922E' stroke-width='1.6'/%3E%3Cpath d='M11 7l4 4-4 4-4-4z' fill='%23C8922E'/%3E%3C/svg%3E") no-repeat right bottom}
.cert-main{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding:14px 0 18px}
.cert-title{display:flex;align-items:center;gap:16px;width:100%;max-width:640px;margin-bottom:6px}
.cert-title i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ca))}
.cert-title i:last-child{background:linear-gradient(90deg,var(--ca),transparent)}
.cert-title .cert-kind{font-size:22px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.cert-namerule{width:220px;height:10px;margin:-4px 0 4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='10'%3E%3Cpath d='M0 5h96M124 5h96' stroke='%23C8922E' stroke-width='1.2'/%3E%3Cpath d='M110 0l5 5-5 5-5-5z' fill='%23C8922E'/%3E%3C/svg%3E") no-repeat center}
.cert-prize{display:inline-flex;align-items:center;gap:10px;padding:10px 22px 10px 18px;border-radius:999px;background:linear-gradient(180deg,#E3B04F,var(--ca));color:#FFFDF8;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;box-shadow:0 6px 16px rgba(200,146,46,.3),inset 0 1px 0 rgba(255,255,255,.35)}
@media (max-width:640px){.cert-title{gap:10px}.cert-title .cert-kind{font-size:15px;letter-spacing:.08em}.cert-inner::before{background-size:200px}}
/* partner logos sit straight on the paper: a white logo background melts into it */
.cert-spons img.lg,.cert-logos img.lg{mix-blend-mode:multiply}
.cert--navy .cert-spons img.lg,.cert--carpet .cert-spons img.lg,.cert--navy .cert-logos img.lg,.cert--carpet .cert-logos img.lg{mix-blend-mode:normal;background:#fff;border-radius:10px;padding:6px}
.cert-spons{gap:36px!important;padding-top:22px!important}
.cert-script{font-family:'Caveat',cursive;font-size:32px;font-weight:600;line-height:1.05}
.cert-sign-role{font-size:13px;color:var(--c-soft)}
/* certificate looks the Ocaq team picks per hackathon */
.cert--navy{--c-paper:#1C2638;--c-ink:#F4EDE0;--c-text:#D6D0C4;--c-soft:#B9B3A7;--c-line:#3A4766;--c-frame:#3A4766;--c-faint:#9A94A0}
.cert--carpet{padding:34px 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18'%3E%3Crect width='32' height='18' fill='%231C2638'/%3E%3Cpath d='M16 2l7 7-7 7-7-7z' fill='%23A4302B'/%3E%3Cpath d='M16 6l3 3-3 3-3-3z' fill='%23D9A13B'/%3E%3Ccircle cy='9' r='2' fill='%23D9A13B'/%3E%3Ccircle cx='32' cy='9' r='2' fill='%23D9A13B'/%3E%3C/svg%3E") left top/32px 18px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18'%3E%3Crect width='32' height='18' fill='%231C2638'/%3E%3Cpath d='M16 2l7 7-7 7-7-7z' fill='%23A4302B'/%3E%3Cpath d='M16 6l3 3-3 3-3-3z' fill='%23D9A13B'/%3E%3Ccircle cy='9' r='2' fill='%23D9A13B'/%3E%3Ccircle cx='32' cy='9' r='2' fill='%23D9A13B'/%3E%3C/svg%3E") left bottom/32px 18px repeat-x,var(--c-paper)}
.cert--minimal{--c-paper:#FFFFFF;--c-line:#E6E1D6;box-shadow:0 12px 34px rgba(22,33,58,.10)}
.cert--minimal .cert-inner{border:1px solid var(--c-line);border-top:4px solid var(--ca);box-shadow:none}
/* hackathon page: countdown to the next date, and the live panel while the organiser runs the event */
.cdown{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:15px;color:var(--muted)}
.cdown strong{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.hl{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:28px 22px;border-radius:18px;background:#1C2638;color:#F4EDE0}
.hl-kicker{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;color:#E0675F}
.hl-dot{width:9px;height:9px;border-radius:50%;background:#E0675F;animation:ocaqpulse 1.4s ease-in-out infinite}
.hl-label{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#D9A13B}
.hl-big{font-size:clamp(26px,4.4vw,44px);font-weight:700;line-height:1.1;text-wrap:balance;max-width:20ch}
.hl-sub{font-size:17px;color:#C9C3B6}
.hl-clock{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:clamp(56px,11vw,104px);line-height:1;font-variant-numeric:tabular-nums}
.hl-wins{display:flex;flex-direction:column;gap:10px;width:100%;max-width:640px}
.hl .live-win{padding:16px 18px}
.hl .live-win--closed{min-height:64px;font-size:28px}
.hl .live-win-title{font-size:clamp(20px,3vw,28px)}
.hl .live-prize{font-size:13px}
@media (prefers-reduced-motion:reduce){.hl-dot{animation:none}}
/* live mode: a full-screen projector view for pitch day; sizes follow the screen */
.live{position:fixed;inset:0;z-index:300;background:#121A2B;color:#F4EDE0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.live-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 32px 0}
.live-hack{font-size:15px;opacity:.7;text-align:right}
.live-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2.6vh;padding:2vh 6vw;overflow:hidden}
.live-kicker{font-family:'IBM Plex Mono',monospace;font-size:clamp(14px,2.2vh,22px);letter-spacing:.12em;text-transform:uppercase;color:#D9A13B}
.live-huge{font-size:clamp(36px,7.5vw,128px);font-weight:700;line-height:1.05;text-wrap:balance;max-width:16ch}
.live-big{font-size:clamp(32px,6vw,96px);font-weight:700;line-height:1.08;text-wrap:balance;max-width:18ch}
.live-sub{font-size:clamp(16px,3vh,30px);color:#C9C3B6}
.live-next{font-size:clamp(14px,2.4vh,24px);color:#9A94A0}
.live-clock{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:clamp(64px,22vh,240px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.live-clock--warn{color:#D9A13B}
.live-clock--up{color:#E0675F}
.live-spons{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:3vh}
.live-logo{display:inline-flex;align-items:center;justify-content:center;height:72px;padding:10px 18px;border-radius:12px;background:#F4EDE0}
.live-logo img{height:52px;max-width:200px;object-fit:contain}
.live-wins{display:flex;flex-direction:column;gap:2vh;width:min(900px,100%)}
.live-win{display:flex;flex-direction:column;align-items:center;gap:.8vh;padding:2.4vh 24px;border-radius:18px;border:1.5px solid rgba(217,161,59,.6);background:rgba(244,237,224,.04)}
.live-win--closed{border-style:dashed;border-color:rgba(244,237,224,.2);background:none;min-height:10vh;justify-content:center;font-size:5vh;color:rgba(244,237,224,.25)}
.live-prize{font-family:'IBM Plex Mono',monospace;font-size:clamp(14px,2.4vh,24px);color:#121A2B;background:#D9A13B;padding:4px 14px;border-radius:999px}
.live-win-title{font-size:clamp(24px,4.6vh,56px);font-weight:700;line-height:1.1}
.live-in{animation:livein .7s cubic-bezier(.2,.8,.2,1) both}
.live-stage:has(.pods){justify-content:flex-start;padding-top:3vh;padding-bottom:0;gap:2vh}
/* winner reveal on the big screen: a podium, 2nd · 1st · 3rd, each a card on a base of its own height */
.pods{flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;gap:2.2vw;width:min(1560px,96vw)}
.pod{flex:1 1 0;min-width:0;max-width:31vw;display:flex;flex-direction:column}
.pod-card{display:flex;flex-direction:column;align-items:center;gap:1.1vh;padding:1.6vh 1.4vw 2.2vh;margin-bottom:1.4vh;border-radius:22px;border:1.5px solid rgba(244,237,224,.13);background:linear-gradient(180deg,rgba(244,237,224,.08),rgba(244,237,224,.02))}
.pod--gold .pod-card{border-color:rgba(217,161,59,.8);box-shadow:0 0 0 1px rgba(217,161,59,.22),0 2vh 7vh rgba(217,161,59,.2)}
.pod-cover{position:relative;width:100%;height:19vh;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#2F6FA8,#16213A)}
.pod--gold .pod-cover{height:23vh;background:linear-gradient(135deg,#D9A13B,#A4302B)}
.pod--bronze .pod-cover{background:linear-gradient(135deg,#C27C47,#16213A)}
.pod-cover img{width:100%;height:100%;object-fit:cover}
.pod-cover .disp{font-size:7vh;color:rgba(244,237,224,.9)}
.pod-medal{position:absolute;left:1.2vh;top:1.2vh;width:5.6vh;height:5.6vh;border-radius:50%;display:grid;place-items:center;font-family:'Unbounded',sans-serif;font-weight:700;font-size:2.6vh;color:#16213A;box-shadow:0 .6vh 1.8vh rgba(0,0,0,.4);background:radial-gradient(circle at 35% 30%,#FFF0BF,#D9A13B 58%,#9E6F14)}
.pod--silver .pod-medal{background:radial-gradient(circle at 35% 30%,#FFFFFF,#C7CCD6 58%,#868D9B)}
.pod--bronze .pod-medal{background:radial-gradient(circle at 35% 30%,#FFDCC0,#C27C47 58%,#7F4620)}
.pod-prize{display:inline-block;padding:.55vh 1.1vw;border-radius:999px;background:#D9A13B;color:#16213A;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.75vh}
.pod--silver .pod-prize{background:#C7CCD6}.pod--bronze .pod-prize{background:#C27C47;color:#fff}
.pod-title{font-size:clamp(20px,3.5vh,46px);font-weight:700;line-height:1.08;overflow-wrap:anywhere}
.pod--gold .pod-title{font-size:clamp(24px,4.4vh,58px)}
.pod-tag{font-size:1.85vh;line-height:1.35;color:rgba(244,237,224,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pod-team{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.6vh;letter-spacing:.06em;color:#D9A13B}
.pod-people{display:flex;flex-wrap:wrap;justify-content:center;gap:1vh 1.2vw;margin-top:.4vh}
.pod-person{display:flex;align-items:center;gap:.8vh;text-align:left}
.pod-av{width:4.4vh;height:4.4vh;flex:none;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.5vh;color:#fff;border:2px solid rgba(244,237,224,.3)}
.pod-name{display:flex;flex-direction:column;font-size:1.8vh;font-weight:600;line-height:1.2}
.pod-name small{font-size:1.4vh;font-weight:500;color:rgba(244,237,224,.55)}
.pod-base{display:grid;place-items:center;border-radius:16px 16px 0 0;background:linear-gradient(180deg,rgba(244,237,224,.14),rgba(244,237,224,.03));color:rgba(244,237,224,.85)}
.pod-base .disp{font-size:6vh;font-weight:700}
.pod--gold .pod-base{height:15vh;background:linear-gradient(180deg,rgba(217,161,59,.6),rgba(217,161,59,.1));color:#F4EDE0}
.pod--silver .pod-base{height:10vh}.pod--bronze .pod-base{height:7vh}
.pod-card--closed{min-height:34vh;justify-content:center;border-style:dashed;background:none;box-shadow:none}
.pod--gold .pod-card--closed{min-height:40vh}
.pod-q{font-size:12vh;line-height:1;color:rgba(244,237,224,.2)}
.pod-card--closed .pod-prize{background:rgba(244,237,224,.1);color:rgba(244,237,224,.75)}
/* first place: the room goes dark, a spotlight, "1-ci yer" and a 3-2-1 countdown, then the card opens with confetti */
.live-stage:has(.pods){position:relative}
.pod-susp{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;pointer-events:none;
  background:radial-gradient(ellipse 34% 48% at 50% 52%,rgba(217,161,59,.22),rgba(8,12,22,.94) 70%);animation:suspIn .6s ease both}
.pod-susp-k{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:3vh;letter-spacing:.32em;color:#D9A13B;text-transform:uppercase}
.pod-susp-n{font-size:30vh;line-height:1;font-weight:700;color:#F4EDE0;text-shadow:0 0 6vh rgba(217,161,59,.55);animation:suspNum 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes suspIn{from{opacity:0}to{opacity:1}}
@keyframes suspNum{0%{opacity:0;transform:scale(1.6)}18%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(.94)}100%{opacity:0;transform:scale(.8)}}
.pod-hero-in{animation:heroIn .9s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes heroIn{0%{opacity:0;transform:scale(.6);filter:brightness(2.2)}60%{opacity:1;filter:brightness(1.4)}100%{opacity:1;transform:none;filter:none}}
.pod--gold.pod--open .pod-card{animation:heroGlow 2.6s ease-in-out infinite alternate}
@keyframes heroGlow{from{box-shadow:0 0 0 1px rgba(217,161,59,.22),0 2vh 7vh rgba(217,161,59,.2)}to{box-shadow:0 0 0 2px rgba(217,161,59,.5),0 2vh 10vh rgba(217,161,59,.42)}}
.pod-burst{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
.pod-burst i{position:absolute;top:-4vh;border-radius:2px;opacity:0;animation-name:confetti;animation-timing-function:cubic-bezier(.25,.6,.4,1);animation-fill-mode:both}
@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx),110vh) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){.pod-burst{display:none}.pod-susp-n,.pod-hero-in,.pod--gold.pod--open .pod-card{animation:none}}
.pod-extras{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2vh 1.2vw;width:min(1560px,96vw)}
.pod-x{display:flex;align-items:center;gap:1vw;padding:1.2vh 1.4vw;border-radius:14px;border:1px solid rgba(244,237,224,.15);background:rgba(244,237,224,.04)}
.pod-x .pod-prize{background:rgba(244,237,224,.12);color:#F4EDE0}
.pod-x-title{font-size:2.4vh;font-weight:700}.pod-x-names{font-size:1.7vh;color:rgba(244,237,224,.65)}
.pod-x--closed .disp{font-size:2.6vh;color:rgba(244,237,224,.3)}
@media (max-width:820px){.pods{flex-direction:column;align-items:stretch;gap:1.6vh}.pod{max-width:none}.pod--gold{order:-1}.pod-base{display:none}.pod-card{margin-bottom:0}.pod-cover,.pod--gold .pod-cover{height:16vh}}
@keyframes livein{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.live-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;background:rgba(0,0,0,.25);opacity:.35;transition:opacity .25s}
.live-bar:hover,.live-bar:focus-within{opacity:1}
.live-btn{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(244,237,224,.35);background:transparent;color:#F4EDE0;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.live-btn--main{background:#F4EDE0;color:#121A2B;border-color:#F4EDE0;padding:0 20px}
.live-btn:focus-visible,.live-bar button:focus-visible{outline:2px solid #D9A13B;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.live-in{animation:none}}
@media (hover:none){.live-bar{opacity:1}}
@keyframes ocaqpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}
.pulse{animation:ocaqpulse 1.4s ease-in-out infinite}
@media (max-width:1020px){.statrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cert-inner{padding:24px 18px}.cert-name{font-size:30px}.cert-foot{grid-template-columns:minmax(0,1fr)}.cert-seal{width:84px;height:84px}.cert-sign{min-width:150px}}
@media print{
@page{size:A4 landscape;margin:10mm}
@page rep{size:A4 portrait;margin:14mm}
.report{page:rep}
.report .stat,.rep-group{break-inside:avoid}
.noprint{display:none !important}
html,body,.app{background:#fff !important}
.cert{box-shadow:none;padding:0}
.cert--carpet{padding:30px 0}
main{padding:0 !important}
.wrap{padding:0 !important;max-width:none !important}
}

/* comfortable tap targets for small text links inside cards (WCAG 2.2 target size) */
.tap{display:inline-flex;align-items:center;min-height:32px}

/* stacked hackathon header on tablets and phones: a wide banner strip, not a full-screen poster */
@media (max-width:1020px){.hkimg{height:auto!important;min-height:0!important;aspect-ratio:5/3}}
@media (max-width:640px){.hkimg{aspect-ratio:2/1}}

/* smooth screen-to-screen change: each screen's <main> is new when the screen changes, so it fades and rises in once */
@keyframes ocaqScreenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.app[data-pageanim="on"] main{animation:ocaqScreenIn .38s cubic-bezier(.2,.7,.2,1) var(--pa-delay,0ms) both}
@media (prefers-reduced-motion:reduce){.app[data-pageanim="on"] main{animation:none}}
/* paid promotion: the company logo on a promoted card, the premium banner shown when no custom banner was uploaded,
   and the row of Ocaq's own sponsors */
.app{--gold:#B88A1E}
.app[data-theme="dark"]{--gold:#D9A13B}
@media (prefers-color-scheme:dark){.app[data-theme="system"]{--gold:#D9A13B}}
.hb{position:relative;flex-shrink:0;display:inline-flex;width:40px;height:40px}
.hb img,.hb-in{width:40px;height:40px;border-radius:10px;object-fit:contain;background:var(--paper);border:1px solid var(--line)}
.hb-in{display:inline-flex;align-items:center;justify-content:center;border:0;color:#fff;font-size:14px;font-weight:700}
.card.gold{border:2px solid var(--gold) !important;box-shadow:0 8px 24px rgba(184,138,30,.18)}
.crown{position:absolute;top:-14px;right:-11px;width:26px;height:26px;fill:var(--gold);stroke:var(--card);stroke-width:1.6;stroke-linejoin:round}
.prem-logo{height:56px;width:56px;object-fit:contain;align-self:flex-start;background:#FBF7EF;border-radius:12px;padding:4px}
.sprow{display:flex;align-items:center;gap:32px;padding:30px 36px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.sp-label{flex-shrink:0;padding-right:32px;border-right:1px solid var(--line);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sp-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* the partner strip always moves, even with "reduce motion" on: it is slow and pauses on a logo */
.sp-track{display:flex;align-items:center;width:max-content;animation-name:spMove !important;animation-duration:var(--sp-dur,30s) !important;animation-timing-function:linear !important;animation-iteration-count:infinite !important}
.app[data-motion="reduce"] .sp-track{animation-name:spMove !important;animation-duration:var(--sp-dur,30s) !important;animation-iteration-count:infinite !important}
.sp-track:has(.sp-logo:hover),.sp-track:has(.sp-logo:focus-visible){animation-play-state:paused !important}
@keyframes spMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sp-logo{display:inline-flex;align-items:center;padding:0 52px}
.sp-logo img{display:block;height:60px;width:auto;max-width:240px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .2s ease,opacity .2s ease}
.sp-logo:hover img{filter:none;opacity:1}
@media (max-width:640px){.sprow{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 18px}.sp-label{padding-right:0;border-right:0}.sp-view{width:100%}.sp-logo{padding:0 26px}.sp-logo img{height:40px;max-width:170px}}
.prem-strip{position:relative;display:flex;align-items:center;width:100%;aspect-ratio:4/1;padding:0;border:0;border-radius:16px;overflow:hidden;background:#16213A;color:#F4EDE0;font-family:inherit;text-align:left;cursor:pointer}
.prem-text{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:28px 40px;max-width:62%}
.prem-title{font-size:32px;font-weight:700;line-height:1.2}
.prem-sub{font-size:15px;line-height:1.5;color:#C9C3B6}
.prem-img{position:absolute;top:0;right:0;width:45%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
@media (max-width:640px){.prem-strip{aspect-ratio:auto}.prem-text{padding:20px 22px;max-width:none}.prem-title{font-size:22px}.prem-img{display:none}}

/* results report for sponsors */
.rep-head{display:flex;flex-direction:column;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.rep-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.rep-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px}
.rep-group{display:flex;flex-direction:column;gap:8px}
.rep-row{display:flex;align-items:center;gap:12px;font-size:14px;padding:4px 0}
.rep-name{flex:0 0 42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-track{flex:1;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.rep-bar{display:block;height:100%;background:var(--accent);border-radius:4px}
.rep-n{flex:0 0 auto;min-width:64px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:640px){.rep-groups{grid-template-columns:minmax(0,1fr)}}
@media print{.rep-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}.rep-track{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* contact page */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
.ct-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ct-price{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:14px;background:rgba(244,237,224,.07);border:1px solid rgba(244,237,224,.14)}
.ct-left{display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){.ct-grid{grid-template-columns:minmax(0,1fr)}.ct-left{display:contents}.ct-mail{order:1}#ct-form{order:2}.ct-bug{order:3}.ct-promo{order:4}}
@media (max-width:480px){.ct-addr{font-size:20px !important}}
@media (max-width:480px){.ct-prices{grid-template-columns:minmax(0,1fr)}}
.pub-box{position:relative;display:flex;flex-direction:column;gap:18px;padding:28px 30px;border-radius:20px;background:var(--ink);color:var(--on-ink)}
.pub-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:720px}
.pub-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(244,237,224,.1);color:var(--on-ink);font-size:24px;line-height:1;cursor:pointer}
@media (max-width:480px){.pub-plans{grid-template-columns:minmax(0,1fr)}.pub-box{padding:24px 20px}}

/* premium banner light: a soft band sweeps across every 6 s, and a glow follows the pointer (drifts on its own on touch screens) */
.prem-banner{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:16px;overflow:hidden}
.prem-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:inherit;
  background:radial-gradient(420px circle at var(--x,30%) var(--y,50%),rgba(255,240,205,.16),rgba(255,240,205,0) 60%)}
.prem-fx::before{content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:26%;transform:skewX(-18deg);
  background:linear-gradient(90deg,rgba(255,246,222,0),rgba(255,246,222,.14) 45%,rgba(255,246,222,.22) 50%,rgba(255,246,222,.14) 55%,rgba(255,246,222,0));
  animation:premSweep 6s cubic-bezier(.45,.05,.25,1) infinite}
@keyframes premSweep{0%{left:-40%}40%{left:120%}100%{left:120%}}
.app[data-motion="reduce"] .prem-fx::before{animation:none;display:none}
@media (prefers-reduced-motion:reduce){.prem-fx::before{animation:none;display:none}}
/* create form: "Başqa" duration / team size */
.own-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;font-size:16px;font-weight:600}
.own-row .own-n{width:84px;text-align:center}
.own-row .own-u{width:140px}
.own-row .own-t{flex:1;min-width:0;max-width:420px}
.own-row .own-hint{flex-basis:100%;font-size:14px;font-weight:400;color:var(--muted)}
/* profile achievements (like Devpost's) */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ach{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.ach.on{border-color:var(--line2)}
.ach-tx{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.ach-t{font-family:'Unbounded',Verdana,sans-serif;font-weight:600;font-size:15px;line-height:1.3}
.ach:not(.on) .ach-t{color:var(--muted)}
.ach-d{font-size:13.5px;line-height:1.45;color:var(--muted)}
.ach-bar{display:block;height:6px;border-radius:3px;background:var(--chip);overflow:hidden;margin-top:6px}
.ach-bar span{display:block;height:100%;border-radius:3px;background:var(--accent)}
.ach-n{font-size:12px;color:var(--muted)}
.ach-ok{font-size:12px;color:#2E8B5E;margin-top:2px}
.ach-mini{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:0;border:0;background:none;cursor:pointer;font-family:inherit;text-align:left}
.ach-mini-row{display:flex;flex-wrap:wrap;gap:6px}
/* dark theme: company logos are drawn for light backgrounds, so they keep a light backing */
.app[data-theme="dark"] img.lg{background:#F4EDE0;border-radius:8px;padding:3px 6px}
.app[data-theme="dark"] .sprow{background:#F4EDE0;border-color:#F4EDE0}
@media (prefers-color-scheme:dark){.app[data-theme="system"] img.lg{background:#F4EDE0;border-radius:8px;padding:3px 6px}.app[data-theme="system"] .sprow{background:#F4EDE0;border-color:#F4EDE0}}
/* dark theme: blocks painted with the ink colour are navy panels in light mode; keep them navy (a step
   lighter than the page) instead of letting them flip to cream, and give the warning note a dark amber */
.app[data-theme="dark"] .band,.app[data-theme="dark"] .pub-box{--ink:#1C2638;--on-ink:#F4EDE0;--on-ink-muted:#C9C3B6;--ink-line:#2E3B5C}
.app[data-theme="dark"] .warn-note{background:#3A2E14 !important}
.app[data-theme="dark"] .warn-note > span{color:#F0D9A8 !important}
@media (prefers-color-scheme:dark){
  .app[data-theme="system"] .band,.app[data-theme="system"] .pub-box{--ink:#1C2638;--on-ink:#F4EDE0;--on-ink-muted:#C9C3B6;--ink-line:#2E3B5C}
  .app[data-theme="system"] .warn-note{background:#3A2E14 !important}
  .app[data-theme="system"] .warn-note > span{color:#F0D9A8 !important}
}

/* settings: a side menu of sections (Devpost-style); on phones the menu becomes a row of tabs */
.set-wrap{max-width:1080px;display:flex;flex-direction:column;gap:24px}
.set-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:start}
.set-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.set-nav{display:block;width:100%;text-align:left;min-height:44px;padding:10px 16px;margin-left:-2px;border:0;border-left:3px solid transparent;background:none;color:var(--accent);font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;border-radius:0 10px 10px 0}
.set-nav:hover{background:var(--chip)}
.set-nav.on{border-left-color:var(--ink);background:var(--chip);color:var(--ink);font-weight:700}
.set-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.set-title{margin:0;font-size:26px;font-weight:700}
@media (max-width:820px){
  .set-grid{grid-template-columns:1fr;gap:18px}
  .set-side{position:static;flex-direction:row;overflow-x:auto;border-left:0;border-bottom:2px solid var(--line);gap:4px;scrollbar-width:none}
  .set-side::-webkit-scrollbar{display:none}
  .set-nav{width:auto;flex:none;white-space:nowrap;margin:0 0 -2px;border-left:0;border-bottom:3px solid transparent;border-radius:10px 10px 0 0;padding:10px 14px}
  .set-nav.on{border-bottom-color:var(--ink)}
  .set-title{font-size:22px}
}
.set-side{gap:18px}
.set-me{display:flex;align-items:center;gap:12px;padding:0 0 14px 14px;border-bottom:1px solid var(--line);margin-bottom:2px}
.set-me-t{display:flex;flex-direction:column;min-width:0}
.set-me-t strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-me-t .mono{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-group{display:flex;flex-direction:column;gap:2px}
.set-glabel{padding:0 16px 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.set-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 18px}
.set-checks li{display:flex;align-items:center;gap:10px;font-size:15px}
.set-checks .ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);display:inline-grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.set-checks .ck.ok{background:#1F6B4A;border-color:#1F6B4A;color:#fff}
@media (max-width:820px){
  .set-side{gap:4px}
  .set-me{display:none}
  .set-group{flex-direction:row;gap:4px}
  .set-glabel{display:none}
}

/* home: hackathons that match your interests */
.foryou{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.foryou-card{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease}
.foryou-card .disp{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.foryou-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(22,33,58,.12)}

/* full-width partners section */
.sp-full{padding:0 0 72px}
.sp-head{margin-bottom:28px;text-align:center}
.sp-title{margin:0;font-size:32px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sp-full .sp-view{width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sp-full .sp-logo{padding:0 64px}
.sp-full .sp-logo img{height:calc(64px * var(--k,1));max-width:360px}
@media (max-width:640px){.sp-full{padding:0 0 40px}.sp-head{margin-bottom:12px}.sp-title{font-size:24px}.sp-full .sp-logo{padding:0 28px}.sp-full .sp-logo img{height:calc(40px * var(--k,1));max-width:230px}}

/* a logo with a white or cream box blends into the page instead of showing a grey square */
.sp-logo img{mix-blend-mode:darken;filter:grayscale(1) brightness(1.1)}
.sp-logo:hover img{filter:none}
.app[data-theme="dark"] .sp-logo img{mix-blend-mode:normal}
/* the mask makes its own layer, so give the layer the page colour for the logos to blend into */
.sp-view,.sp-track{background:var(--bg)}
/* fewer than SP_MOVE_MIN partners: one white panel split into equal cells (logo + name), the last cell invites new partners */
.app .sp-track.sp-cards,.app[data-motion="reduce"] .sp-track.sp-cards{animation:none!important}
.sp-full .sp-view:has(.sp-cards){-webkit-mask-image:none;mask-image:none;background:transparent;padding:0 16px}
.sp-track.sp-cards{width:min(100%,calc(var(--n,3) * 240px));margin:0 auto;display:flex;flex-wrap:nowrap;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(22,33,58,.04)}
.sp-full .sp-cards .sp-logo{position:relative;flex:1 1 0;min-width:0;width:auto;height:150px;padding:0 24px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid var(--line);background:#fff;transition:background .2s ease}
.sp-full .sp-cards > :first-child{border-left:0}
.sp-full .sp-cards .sp-logo:hover{background:#FBF8F2}
.sp-full .sp-cards .sp-logo::after{content:attr(title);position:absolute;left:0;right:0;bottom:22px;text-align:center;font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8A8F9E}
.sp-full .sp-cards .sp-logo img,.app[data-theme="dark"] .sp-full .sp-cards .sp-logo img{filter:none;mix-blend-mode:normal;opacity:1;height:calc(52px * var(--k,1));max-width:170px}
.sp-invite{flex:1 1 0;min-width:0;width:auto;height:150px;border:0;border-left:1px solid var(--line);background:#FBF8F2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:inherit;color:#16213A;transition:background .2s ease}
.sp-invite::before{content:"+";width:34px;height:34px;border-radius:50%;border:1.5px solid #A4302B;color:#A4302B;display:grid;place-items:center;font:500 22px/1 sans-serif;margin-bottom:4px}
.sp-invite:hover,.sp-invite:focus-visible{background:#F6EFE3}
.sp-invite b{font-size:17px;font-weight:700;color:#A4302B}
.sp-invite span{font-size:13px;color:#6B7180}
@media (max-width:640px){.sp-track.sp-cards{width:100%;flex-wrap:wrap}.sp-full .sp-cards .sp-logo,.sp-invite{flex:0 0 50%;width:50%;height:120px;border-top:1px solid var(--line)}.sp-full .sp-cards .sp-logo{padding-bottom:22px}.sp-full .sp-cards .sp-logo::after{bottom:16px}.sp-full .sp-cards > :nth-child(-n+2){border-top:0}.sp-full .sp-cards > :nth-child(odd){border-left:0}.sp-cards > .sp-invite:nth-child(odd){flex-basis:100%;width:100%}.sp-full .sp-cards .sp-logo img,.app[data-theme="dark"] .sp-full .sp-cards .sp-logo img{height:calc(38px * var(--k,1));max-width:120px}.sp-invite b{font-size:15px}.sp-invite span{font-size:12px}}

/* create form, last step: the real hackathon page at desktop size (1440 px wide, scaled to fit) */
.dprev{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.dprev-k{font-size:12px;letter-spacing:.1em;color:var(--muted)}
.dprev-win{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 18px 50px rgba(22,33,58,.12)}
.dprev-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:var(--chip);border-bottom:1px solid var(--line)}
.dprev-bar i{width:10px;height:10px;border-radius:50%;background:#E0685D}.dprev-bar i:nth-child(2){background:#D9A13B}.dprev-bar i:nth-child(3){background:#3E9C78}
.dprev-bar span{margin-left:12px;font:500 12px 'IBM Plex Mono',monospace;color:var(--muted)}
.dprev-view{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden}
.dprev-frame{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:0 0;background:var(--bg)}
/* project page: short banner when there is no cover, placement strip, team */
.pj-banner{position:relative;overflow:hidden;height:168px;border-radius:20px;display:flex;align-items:flex-end;padding:0 28px}
.pj-banner::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 22px),repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 22px)}
.pj-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%)}
.pj-banner-l{position:relative;z-index:1;font-size:132px;font-weight:700;line-height:.78;color:#F4EDE0;opacity:.95}
.pj-place{display:flex;align-items:center;gap:14px;width:100%;padding:16px 20px;border-radius:16px;border:1.5px solid;font-family:inherit;text-align:left;cursor:pointer;transition:transform .15s ease}
.pj-place:hover{transform:translateY(-1px)}
.pj-place-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pj-place-t strong{font-size:20px;font-weight:700}.pj-place-t span{font-size:14px;opacity:.85}
.pj-place--gold{background:linear-gradient(135deg,#FBEBD0,#F6DDB0);border-color:#D9A13B;color:#5C3A08}
.pj-place--silver{background:linear-gradient(135deg,#F3F4F7,#DEE1E8);border-color:#A9AFBC;color:#2F3542}
.pj-place--bronze{background:linear-gradient(135deg,#F8E4D4,#EDC9AC);border-color:#C27C47;color:#5E3418}
.pj-hack{align-self:flex-start;padding:0;border:0;background:none;font-size:13px;color:var(--accent);cursor:pointer;text-align:left}
.pj-hack:hover{text-decoration:underline}
.pj-team{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.pj-members{display:flex;flex-wrap:wrap;gap:10px}
.pj-member{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-family:inherit;color:var(--ink);text-align:left;cursor:pointer}
.pj-member:hover{border-color:var(--line2)}
@media (max-width:640px){.pj-banner{height:120px;padding:0 20px}.pj-banner-l{font-size:96px}}
@media (prefers-reduced-motion:reduce){.pj-place{transition:none}.pj-place:hover{transform:none}}
/* hackathon projects tab: winners first, then the rest with a thumbnail */
.hp-wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hp-win{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:16px;border:1.5px solid var(--line);background:var(--card);font-family:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.hp-win:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,33,58,.1)}
.hp-win-cover{display:block;position:relative}
.hp-win-cover img{display:block;width:100%;aspect-ratio:5/3;object-fit:cover}
.hp-win-l{font-size:44px;font-weight:700;color:#F4EDE0}
.hp-win-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.hp-win-prize{align-self:flex-start;padding:3px 9px;border-radius:6px;font-size:12px;background:var(--chip);color:var(--ink)}
.hp-win--gold{border-color:#D9A13B;box-shadow:0 0 0 3px rgba(217,161,59,.18)}
.hp-win--gold .hp-win-prize{background:#D9A13B;color:#16213A}
.hp-win--silver{border-color:#A9AFBC}.hp-win--silver .hp-win-prize{background:#C7CCD6;color:#16213A}
.hp-win--bronze{border-color:#C27C47}.hp-win--bronze .hp-win-prize{background:#C27C47;color:#fff}
.hp-card{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-family:inherit;color:var(--ink);text-align:left;cursor:pointer}
.hp-card:hover{border-color:var(--line2)}
.hp-thumb{flex-shrink:0;width:72px;height:72px;border-radius:10px;overflow:hidden;display:block}
.hp-thumb img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.hp-wins{grid-template-columns:minmax(0,1fr)}.hp-win{flex-direction:row}.hp-win-cover{width:112px;flex-shrink:0}.hp-win-cover img,.hp-win-l{height:100%;aspect-ratio:auto!important;min-height:112px}}
@media (prefers-reduced-motion:reduce){.hp-win{transition:none}.hp-win:hover{transform:none}}
/* finished hackathon: winners showcase (2nd, 1st, 3rd on wide screens) and results card */
.fw-band{display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:18px;background:#16213A;color:#F4EDE0}
.fw-all{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;border:0;background:none;font-family:inherit;font-size:14px;font-weight:600;color:#F4EDE0;cursor:pointer}
.fw-all:hover{color:#D9A13B}
.fw-row{display:grid;gap:12px}
.fw-row--podium{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.fw-row--list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));align-items:stretch}
.fw{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:14px;border:1.5px solid #2E3B5C;background:#1E2B48;font-family:inherit;color:#F4EDE0;text-align:left;cursor:pointer;transition:transform .15s ease}
.fw:hover{transform:translateY(-2px)}
.fw--gold{border-color:#D9A13B;box-shadow:0 0 0 3px rgba(217,161,59,.2),0 12px 30px rgba(217,161,59,.15)}
.fw-cover{position:relative;display:block}
.fw-cover img,.fw-l{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;object-fit:cover}
.fw--gold .fw-cover img,.fw--gold .fw-l{aspect-ratio:4/3}
.fw-l{font-size:40px;font-weight:700;color:#F4EDE0}
.fw-medal{position:absolute;left:12px;bottom:-14px;width:30px;height:30px;border-radius:50%;border:2px solid #1E2B48;background:radial-gradient(circle at 35% 30%,#FFF4D6,#D9A13B 58%,#9A6A16)}
.fw--silver .fw-medal{background:radial-gradient(circle at 35% 30%,#FFFFFF,#C7CCD6 58%,#868D9B)}
.fw--bronze .fw-medal{background:radial-gradient(circle at 35% 30%,#FFDCC0,#C27C47 58%,#7F4620)}
.fw--special .fw-medal{display:none}
.fw-body{display:flex;flex-direction:column;gap:4px;padding:22px 14px 14px}
.fw-prize{align-self:flex-start;font-size:12px;color:#D9A13B}
.fw-title{font-size:16px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.fw--gold .fw-title{font-size:19px}
.fw-by{font-size:13px;color:#C9C3B6}
.res-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.res-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:12px;background:var(--chip)}
.res-stat strong{font-size:22px;font-weight:700}.res-stat span{font-size:12px;color:var(--muted)}
@media (max-width:640px){.fw-row{grid-template-columns:minmax(0,1fr)}.fw{flex-direction:row;align-items:stretch}.fw-cover{width:104px;flex-shrink:0}.fw-cover img,.fw-l,.fw--gold .fw-cover img,.fw--gold .fw-l{aspect-ratio:auto;height:100%;min-height:96px}.fw-medal{left:auto;right:-14px;bottom:auto;top:10px}.fw-body{padding:14px 14px 14px 22px;justify-content:center}}
@media (prefers-reduced-motion:reduce){.fw{transition:none}.fw:hover{transform:none}}
.hk-spon{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.hk-spon-logo{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--chip);overflow:hidden;flex-shrink:0}
.hk-spon-logo img{width:36px;height:36px;object-fit:contain}
/* team page: one card per person, the hackathons they look for a team in */
.tp-hack{display:inline-flex;align-items:center;border-radius:999px;background:var(--chip);font-size:13px}
.tp-hack button{min-height:32px;padding:0 12px;border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.tp-hack .tp-x{min-width:32px;min-height:32px;padding:0 10px 0 6px;border-left:1px solid var(--line);color:var(--muted);font-size:18px}
.tp-hack .tp-x:hover{color:var(--accent)}
/* hackathon page on phones: a short cover so the tabs and the join box come up sooner */
@media (max-width:640px){.hkimg{height:132px!important;min-height:0!important}.hk-info{padding:20px 20px 22px!important;gap:12px!important}}
/* home: finished hackathons as a compact list under the open ones */
.past-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.past-row{display:flex;align-items:center;gap:14px;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-family:inherit;color:var(--ink);text-align:left;cursor:pointer}
.past-row:hover{border-color:var(--line2)}
.past-row img{width:76px;height:76px;border-radius:10px;object-fit:cover;flex-shrink:0}
.past-win{align-self:flex-start;padding:3px 8px;border-radius:6px;background:#FBEBD0;color:#5C3A08;font-size:11px;white-space:nowrap}
@media (max-width:1020px){.past-list{grid-template-columns:minmax(0,1fr)}}
/* hackathon people tab: who is still looking for a team */
.pp-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 16px;border-radius:14px;background:#E3E8F4;color:#16213A;font-size:15px}
.pp-cta button{min-height:40px;padding:0 18px;border-radius:999px;border:0;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.app[data-theme="dark"] .pp-cta{background:#222A3C;color:#EEE7DA}
@media (prefers-color-scheme:dark){.app[data-theme="system"] .pp-cta{background:#222A3C;color:#EEE7DA}}
.pp-look{flex-shrink:0;padding:4px 9px;border-radius:6px;background:#E4F1EA;color:#1F5C42;font-size:11px}
/* bug fixes: prizes that are not a place, long names on phones, teammate confirmation */
.pj-place--special{background:var(--card);border-color:var(--line2);color:var(--ink)}
.pj-member{max-width:100%;min-width:0}
.pj-member strong,.pj-member span{overflow-wrap:anywhere}
.pj-team h2+span{overflow-wrap:anywhere}
.pj-cands{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--hair)}
.pj-cand{display:flex;align-items:center;gap:10px;min-width:0}
.pj-team .mono{overflow-wrap:anywhere}
.tp-hack button:first-child{overflow-wrap:anywhere;text-align:left}
@media (max-width:400px){.tp-tabs{flex-wrap:wrap;max-width:100%}.tp-tabs button{flex:1 1 auto}}
/* the podium is 2nd, 1st, 3rd in the page; phones stack it 1st, 2nd, 3rd */
@media (max-width:640px){.fw-row--podium>:nth-child(2){order:-1}}
.pill-wrap button{white-space:normal!important;overflow-wrap:anywhere;max-width:100%;text-align:left}
/* winner badge colours by place, gallery and profile cards */
.pz{align-self:flex-start;padding:3px 9px;border-radius:6px;font-size:12px;overflow-wrap:anywhere}
.pz--gold{background:#D9A13B;color:#16213A}.pz--silver{background:#C7CCD6;color:#16213A}.pz--bronze{background:#C27C47;color:#fff}.pz--special{background:var(--chip);color:var(--ink)}
.card h3,.card p{overflow-wrap:anywhere}
.past-row span{overflow-wrap:anywhere}
.past-row .disp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* partner strip in dark mode: the white panel is dimmed, moving logos sit on a light chip so dark logos stay visible */
.app[data-theme="dark"] .sp-track.sp-cards{filter:brightness(.88)}
.app[data-theme="dark"] .sp-track:not(.sp-cards) .sp-logo img{filter:none;opacity:1;background:#F4EDE0;border-radius:10px;padding:6px 10px}
@media (prefers-color-scheme:dark){.app[data-theme="system"] .sp-track.sp-cards{filter:brightness(.88)}.app[data-theme="system"] .sp-track:not(.sp-cards) .sp-logo img{filter:none;opacity:1;background:#F4EDE0;border-radius:10px;padding:6px 10px}}
/* one long unbroken word in a title, prize, name or table cell never widens the page */
.app h1,.app h2,.app h3,.app p,.app li,.app td,.app th{overflow-wrap:anywhere}
.pj-place-t strong,.pj-place-t span{overflow-wrap:anywhere}
.app table{max-width:100%}
.pf-stats>*{flex:1 1 0;min-width:0}
/* home hero on phones: less empty space above and below */
@media (max-width:640px){.hero-sec{padding:28px 0 40px!important}.hero-sec .hero{gap:28px}}

/* winners' points on the hackathon page */
.wb{display:flex;flex-direction:column;gap:14px}
.wb-head h2{margin:0 0 6px;font-size:22px;font-weight:600}
.wb-head p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.wb-card{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.wb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.wb-name{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:0;border:0;background:none;color:inherit;font-family:inherit;text-align:left;cursor:pointer}
.wb-name:hover .wb-title{text-decoration:underline}
.wb-prize{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.wb-title{font-size:18px;font-weight:600;overflow-wrap:anywhere}
.wb-total{display:flex;align-items:baseline;gap:5px;flex:none;white-space:nowrap;color:var(--muted);font-size:14px}
.wb-total b{font-size:30px;font-weight:700;color:var(--ink)}
.wb-rows{display:flex;flex-direction:column;gap:10px}
.wb-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,1.2fr) auto;align-items:center;gap:12px;font-size:14px}
.wb-crit{overflow-wrap:anywhere}
.wb-bar{display:block;height:8px;border-radius:99px;background:var(--track);overflow:hidden}
.wb-bar span{display:block;height:100%;border-radius:99px;background:#D9A13B}
.wb-pts{font-size:13px;color:var(--text2);white-space:nowrap}
.wb-judges{margin:0;font-size:13px;color:var(--muted)}
@media (max-width:480px){.wb-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}.wb-bar{grid-column:1/-1;grid-row:2}}

/* team change, invite link, Komanda ol */
.tc{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--hair)}
.tc-inv{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:var(--chip)}
.tc-url{font-size:12px;line-height:1.5;color:var(--text2);overflow-wrap:anywhere}
.tc-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tc-form{display:flex;flex-direction:column;gap:12px}
.tc-invite-note{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#FBEBD0;color:#5C3A08;font-size:14px;line-height:1.5}
.team-up{align-self:flex-start;min-height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.team-up:hover{background:var(--accent);color:#fff}
.team-sent{align-self:flex-start;font-size:13px;font-weight:600;color:#1F6B4A}
.mate-tag{align-self:flex-start;padding:3px 8px;border-radius:6px;background:var(--chip);color:var(--text2);font-size:12px}
/* İndi: the organiser's strip on the manage page */
.now-panel{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:18px;background:#16213A;color:#F4EDE0}
.now-head{display:flex;flex-direction:column;gap:4px}
.now-kicker{font-size:12px;letter-spacing:.08em;color:#D9A13B}
.now-title{font-size:22px;font-weight:700}
.now-stats{font-size:14px;color:#C9CFDC}
.now-judges{display:flex;flex-wrap:wrap;gap:8px}
.now-chip{padding:6px 10px;border-radius:999px;background:#26355A;font-size:13px}
.now-chip b{font-weight:600;color:#F2C265}
.now-warn{font-size:14px;color:#F2C265}
.now-btns{display:flex;flex-wrap:wrap;gap:8px}
.now-btns button{min-height:42px;padding:0 16px;border-radius:999px;border:1.5px solid #4A5A82;background:transparent;color:#F4EDE0;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.now-btns button:hover{border-color:#D9A13B;color:#F2C265}

/* the organiser's logo beside Ocaq's on a certificate */
.cert-org{display:inline-flex;align-items:center;margin-left:6px;padding-left:16px;border-left:1px solid var(--c-line)}
.cert-org img{display:block;height:52px;max-width:170px;object-fit:contain}
.cert-org img.lg{mix-blend-mode:multiply}
.cert--navy .cert-org img.lg,.cert--carpet .cert-org img.lg{mix-blend-mode:normal;background:#fff;border-radius:10px;padding:6px}
@media (max-width:640px){.cert-org{margin-left:0;padding-left:10px;min-width:0}.cert-org img{height:34px;max-width:92px}}

/* launch countdown */
.gate{position:fixed;inset:0;z-index:200;overflow:auto;display:flex;background:radial-gradient(900px 700px at 50% 42%,#26355A 0%,#16213A 60%,#101828 100%);color:#F4EDE0}
.gate-in{margin:auto;width:100%;max-width:760px;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.gate-logo{display:flex;align-items:center;gap:14px}
.gate-word{font-size:52px;font-weight:700;letter-spacing:-.01em;line-height:1}
.gate-tag{margin:0;font-size:18px;color:#C9CFDC}
.gate-time{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;margin-top:14px}
.gate-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 6px 18px;border-radius:18px;background:rgba(244,237,224,.07);border:1px solid rgba(244,237,224,.14)}
.gate-box b{font-size:56px;font-weight:700;line-height:1;color:#F2C265;font-variant-numeric:tabular-nums}
.gate-box span{font-size:14px;color:#C9CFDC}
.gate-date{margin:12px 0 0;font-size:24px;font-weight:600;line-height:1.3}
@media (max-width:560px){.gate-word{font-size:40px}.gate-tag{font-size:16px}.gate-time{gap:8px}.gate-box{padding:16px 2px 12px;border-radius:14px}.gate-box b{font-size:30px}.gate-box span{font-size:12px}.gate-date{font-size:18px}}
@media print{.gate{display:none}}
/* a keyframe animation, not a transition: drawing the page again replaces this element, which would cancel a transition */
@keyframes gateOut{from{transform:none;opacity:1}to{transform:translateY(70vh);opacity:0}}
.gate[data-out="1"]{animation:gateOut .85s cubic-bezier(.4,0,.7,.2) forwards;pointer-events:none}