.fade-img{opacity:0;transition:opacity .25s}@keyframes fadeInBox{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;-webkit-touch-callout:none;background:#010101}#root{overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif}.main{position:absolute;top:0;left:0;width:100%;color:#fff;z-index:1}.main>.info{position:absolute;height:100%;max-width:90%;left:80%;transform:translate(-80%);margin-top:120px}.viewport{display:flex;width:50vw;height:auto;min-height:0;align-items:center;justify-content:center;background:rgba(30,30,30,.97);border-radius:12px;padding:0;z-index:1000;font-size:1.1em;margin-left:4vw}.viewport-hidden{opacity:.05;pointer-events:none;transition:opacity .5s}.fade-in-box{animation:fadeInBox .7s}.viewport .iframe-container{width:100%;height:500px;overflow:hidden;border-radius:12px}.viewport iframe{width:100%;height:600px;border:none}.viewport .content{padding:32px 28px}.viewport.play{display:none}.viewport.elements{width:90vw;height:80vh;background:none}.header-left{box-shadow:2px 2px 8px #0003;position:absolute;display:inline-block;top:20px;left:40px;border-radius:80px;padding:20px;backdrop-filter:blur(12px) brightness(1.1);-webkit-backdrop-filter:blur(12px) brightness(1.1)}.header-left img{width:120px;height:120px;border-radius:80px}.bottom{position:absolute;bottom:20px;right:20px}.bottom a{background:none;color:gray}a{text-decoration:none;font-weight:400;font-size:16px;color:inherit;transition:color .2s,background .2s,box-shadow .2s;background:rgba(255,255,255,.07);border-radius:6px;padding:.5rem;margin:0 .5rem;color:#00e0ff;box-shadow:0 2px 12px #0000001f}a:hover,a:focus{background:rgba(255,255,255,.18);box-shadow:0 4px 18px #00e0ff2e;outline:none}.nav{align-items:center;display:flex;gap:16px;justify-content:flex-end;margin:40px 180px 0 40px}.hamburger{display:none;position:fixed;top:36px;right:32px;z-index:2001;width:40px;height:40px;background:none;border:none;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;padding:0}.hamburger span{display:block;width:28px;height:4px;margin:4px 0;background:#fff;border-radius:2px;transition:.3s}.hamburger.open span:nth-child(1){transform:translateY(16px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.nav a{text-transform:uppercase;font-weight:600;position:relative;flex:0 0 auto;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);background:rgba(0,0,0,.4);box-shadow:none}a.play{margin-left:2.5em;background:#fff2;color:#ffb300;border-radius:2em;padding:.3em 1.2em;font-weight:700;letter-spacing:.05em;transition:background .2s,color .2s;position:absolute;top:40px;right:40px}a.play.active{background:#ffb300;color:#222}.nav a.active{border:1px solid rgba(255,255,255,.5)}li{margin-bottom:1em}.slideshow{width:100%;position:relative;border-radius:12px;border:20px solid rgba(30,30,30,.97)}.slideshow img{width:100%;height:auto;max-height:800px}.slideshow button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.2);box-shadow:0 4px 18px #00e0ff2e;border:none;border-radius:6px;background:rgba(255,255,255,.35);cursor:pointer;font-weight:700;font-size:1.1em;margin:0 10px;padding:10px 12px;transition:background .2s,color .2s,box-shadow .2s}.slideshow button.left{left:10px}.slideshow button.right{right:10px}.slideshow button:hover{background:rgba(255,255,255,.4)}@media only screen and (max-width: 1200px){.main>.info{max-width:100%;left:0;transform:translate(0)}.viewport{width:92vw}.header-left{font-size:1em;padding:10px}.header-left img{width:60px;height:60px}}@media only screen and (max-width: 1000px){.hamburger{display:flex}.viewport.elements{width:100vw;height:92vh;margin-left:0}.viewport.elements .content{padding:0}.nav{flex-direction:column;align-items:center;background:rgba(30,30,30,.98);position:fixed;top:0;right:0;left:0;height:0;width:90vw;overflow:hidden;gap:0;padding:0;box-shadow:0 8px 32px #00000026;z-index:2000;transition:height .3s;justify-content:center}.nav.open{height:94vh;top:-20px;padding:40px 0 0;gap:18px;overflow:visible}.nav a{margin:0 24px;font-size:1.8em;padding:10px;width:auto;display:block;text-align:center}a.play{right:100px}.info-container>pre[class*=language-]{font-size:.6rem!important;border-radius:10px 10px 0 0!important}}code[class*=language-],pre[class*=language-]{color:#e4f0fb!important;background:none!important;text-shadow:0 1px rgba(0,0,0,.3)!important;font-family:Menlo,Monaco,Courier New,monospace!important;font-size:.95em!important;text-align:left!important;white-space:pre!important;word-spacing:normal!important;word-break:normal!important;word-wrap:normal!important;line-height:1.5!important;-moz-tab-size:4!important;-o-tab-size:4!important;tab-size:4!important;-webkit-hyphens:none!important;-moz-hyphens:none!important;-ms-hyphens:none!important;hyphens:none!important}pre[class*=language-]{padding:3.75em!important;margin:-2.5em 0!important;overflow:auto!important;border-radius:.75em!important}:not(pre)>code[class*=language-],pre[class*=language-]{background:#252b37!important}:not(pre)>code[class*=language-]{padding:.1em!important;border-radius:.3em!important;white-space:normal!important}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#a6accd!important}.token.punctuation{color:#e4f0fb!important}.token.namespace{opacity:.7!important}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#e4f0fb!important}.token.boolean,.token.number,.token.selector,.token.attr-value,.token.string,.token.char,.token.builtin,.token.inserted{color:#5de4c7!important}.token.attr-name,.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#add7ff!important}.token.atrule,.token.function,.token.class-name{color:#5de4c7!important}.token.keyword{color:#add7ff!important}.token.regex,.token.important{color:#fffac2!important}.token.important,.token.bold{font-weight:700!important}.token.italic{font-style:italic!important}.token.entity{cursor:help!important}
