@import "https://fonts.googleapis.com/css2?family=Oxygen:wght@300; 400; 700&display=swap"; 
@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900; 1,14..32,100..900&family=Oxygen:wght@300; 400; 700&display=swap"; 

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

/* css reset */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }
a:focus { outline:thin dotted }
a:active, a:hover { outline:0 }
h1 { font-size:2em; margin:.67em 0 }
abbr[title] { border-bottom:1px dotted }
b,strong { font-weight:700 }
dfn { font-style:italic }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space:pre-wrap }
q { quotes:"\201C" "\201D" "\2018" "\2019" }
small { font-size:80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top:-.5em }
sub { bottom:-.25em }
img { border:0 }
svg:not(:root) { overflow:hidden }
figure { margin:0 }
fieldset { border:1px solid silver; margin:0 2px; padding:.35em .625em .75em }
legend { border:0; padding:0 }
button, input, select, textarea { font-family:inherit; font-size:100%; margin:0 }
button, input { line-height:normal }
button, select { text-transform:none }
button, html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance:button; cursor:pointer }
button[disabled], html input[disabled] { cursor:default }
input[type="checkbox"], input[type="radio"] { box-sizing:border-box; padding:0 }
input[type="search"] { -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box }
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance:none }
button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0 }
textarea { overflow:auto; vertical-align:top }
table { border-collapse:collapse; border-spacing:0 }
*, ::after, ::before { box-sizing:border-box }
:root { font-size:16px }
input, label, select, button, textarea { margin:0; border:0; padding:0; display:inline-block; vertical-align:middle; white-space:normal; background:none; line-height:1; font-size:13px; font-family:Arial }
input:focus { outline:0 }
input, textarea { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box }
button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
input[type=checkbox], input[type=radio] { width:13px; height:13px }
input[type=search] { -webkit-appearance:textfield; -webkit-box-sizing:content-box }
::-webkit-search-decoration { display:none }
button, input[type="reset"], input[type="button"], input[type="submit"] { overflow:visible; width:auto }
::-webkit-file-upload-button { padding:0; border:0; background:none }
textarea { vertical-align:top; overflow:auto }
select[multiple] { vertical-align:top }



body { --color-text:#fff; --color-bg:#0e0e0f; --color-link:#826437; --color-link-hover:#fff; color:var(--color-text); background-color:var(--color-bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overscroll-behavior:none; font-family:"Inter",sans-serif; font-optical-sizing:auto; font-weight:400; font-style:normal; font-size:16px }
#gl { width:100vw; height:100vh; left:0; top:0; position:absolute }
canvas { display:block }
main { position:relative; width:100%; min-height:100vh }
.js .loading::before { content:''; position:fixed; z-index:100000; top:0; left:0; width:100%; height:100%; background:var(--color-bg) }
.js .loading::after { content:''; position:fixed; z-index:100000; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; pointer-events:none; border-radius:50%; opacity:.4; background:var(--color-link); animation:loaderAnim .7s linear infinite alternate forwards }
@keyframes loaderAnim  { 
    to { opacity: 1; transform: scale3d(0.5,0.5,1); }
}
a { text-decoration:none; color:var(--color-link); outline:none }
a:hover,a:focus { color:var(--color-link-hover); outline:none }

.frame { padding:3rem 5vw; text-align:center; position:relative; z-index:10; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center }
.frame > * { position:relative }
@media screen and (min-width: 53em)  { 
    .frame { position:fixed; text-align:left; z-index:10; top:0; left:0; display:grid; align-content:space-between; width:100%; max-width:none; height:100vh; padding:2rem 3rem; pointer-events:none; grid-template-columns:75% 25%; grid-template-rows:auto auto auto }
}

.content { position:fixed; top:0; left:0; width:100%; min-height:100%; display:flex; justify-content:center; align-items:center; text-align:center; z-index:11 }
.content h3 { font-weight:300; letter-spacing:10px; font-size:13px; color:#ffffffb3; padding:10px 10px 0px; margin-bottom: 0px; }
.content .inner { padding:30px 0 }
.logo { margin-bottom:20px }
.logo img { max-width:194px }
.input-container { display:flex; padding:0 0px; }
.input-text { display:inline-block; width:100%; max-width:340px; height:46px; box-sizing:content-box; padding:0 15px; border-radius:15px; border:1px solid #ffffff26; background-color:#ffffff0d; -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); color:#fff; font-size:15px; transition:border .4s; -webkit-transition:border .4s }
.input-text:focus { border:1px solid #ffffff59 }
.input-text::placeholder { color:#ffffff80 }
.clause label { color:#ffffffb3 }
.btn { height:46px; padding:0 15px; border-radius:15px; border:1px solid #ffffff26; background-color:#ffffff1a; -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); font-family:'Oxygen',sans-serif; font-weight:700; font-style:normal; font-size:14px; color:#fff; margin-left:10px; transition:border .4s; -webkit-transition:border .4s }
.btn:hover { border:1px solid #fff6 }

.clause { position:relative; display:block; margin:10px auto; width:100%; max-width:470px; padding:10px 10px; }
.clause .checkbox-container label, .folding-content { line-height:16px; font-size:12px; color:#ffffffb3 }
.checkbox-container { padding:0 10px }
.checkbox-container > label { cursor:pointer }

.info-container { position:relative; padding:10px 0 }
.btn-fold { color:#fff; font-size:12px; font-weight:500; text-decoration:underline; color:#ffffffb3 }
.btn-fold img { width:8px }
.folding-content { padding:10px 10px; max-height:0; overflow:hidden; opacity:0; transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out }
.folding-content.open { max-height:200px; opacity:1 }

.custom-checkbox { display:block; position:relative; padding-left:15px; margin-bottom:0; cursor:pointer; font-size:22px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none }
.custom-checkbox input { position:absolute; opacity:0; cursor:pointer; height:0; width:0 }
.custom-checkbox .checkmark { position:absolute; top:0; left:0; height:16px; width:16px; border:1px solid #ffffff26; background-color:#ffffff1a; border-radius:4px }
.custom-checkbox:hover input ~ .checkmark { border:1px solid #ffffff59 }
.custom-checkbox .checkmark:after { content:""; position:absolute; display:none }
.custom-checkbox input:checked ~ .checkmark:after { display:block }
.custom-checkbox .checkmark:after { left:4px; top:2px; width:5px; height:8px; border:solid #fff; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg) }