@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format('woff2')}
:root{--ground:#101326;--surface:#2E3959;--surface-2:#353A8C;--ink:#F2EFC4;--soft:#9B9DDA;--accent:#6D81F2;--tab-1:#D0A8A0;--tab-2:#B5A2BE;--margin:clamp(16px,2.5vw,32px);--ease:cubic-bezier(0.23, 1, 0.32, 1)}
body{margin:0;background:#101326;font-family:'Poppins',system-ui,sans-serif;color:#F2EFC4;overflow-x:hidden}
a{color:#F2EFC4}
img{display:block}
:focus-visible{outline:3px solid #6D81F2;outline-offset:3px}
.press{transition:transform .18s var(--ease),rotate .16s var(--ease),background-color .18s var(--ease),color .18s var(--ease)}
.press:active{transform:scale(0.97);transition-duration:.1s}
.tab{transition:transform .2s var(--ease)}
.tape-bar:focus-visible{outline:3px solid #6D81F2;outline-offset:-3px}
.vhs::after,.scan::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(16,19,38,.22) 0 2px,transparent 2px 4px)} /* taste-skill-ignore: VHS scanlines requested by the client */
.tape-strip{background-image:url(img/halftone.png);background-size:5px 5px;clip-path:polygon(4px 0, 28% 3px, 55% 0, 82% 2px, calc(100% - 2px) 0, calc(100% - 5px) 28%, 100% 52%, calc(100% - 3px) 78%, 100% 100%, 74% calc(100% - 3px), 46% 100%, 18% calc(100% - 2px), 3px 100%, 0 72%, 4px 46%, 0 20%)}
.social{transition:transform .18s var(--ease),color .18s var(--ease)}
.lang-switch button{transition:transform .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease)}
.lang-switch button:active{transform:translateY(1px) scale(.96)}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a,button{touch-action:manipulation}
button,.press,.tape-bar,.social,nav a{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tape-bar:active .tab{transform:translateY(1px)}
.social:active{transform:translateY(1px)}
.row{overscroll-behavior-x:contain}
@media (hover:hover) and (pointer:fine){
  a:hover{color:#FFFFFF}
  .press:hover{transform:translateY(-2px)}
  .press.dog:hover{transform:none}
  .taped.tilt > .press.tape-strip:hover{rotate:calc(var(--r) * -1) !important;transform:translateY(-2px) !important}
  .tape-bar:hover .tab{transform:translateY(-3px)}
  .press.tape-strip:not(.dog):hover{rotate:calc(var(--r, 0deg) * -1) !important}
  .social:hover{color:#6D81F2;transform:translateY(-2px)}
  .lang-switch button[aria-pressed="false"]:hover{transform:translateY(-2px) rotate(-3deg)}
  .lang-switch button[aria-pressed="true"]:hover{transform:translateY(-1px)}
  .photo-tape:not(.about-photo):hover img,.photo-tape:not(.about-photo):hover::after{clip-path:polygon(0 6px, 12% 0, 30% 5px, 52% 1px, 74% 6px, 90% 0, 100% 4px, calc(100% - 4px) 30%, 100% 58%, 100% calc(100% - 40px), calc(100% - 14px) calc(100% - 19px), calc(100% - 30px) 100%, 82% calc(100% - 5px), 60% 100%, 38% calc(100% - 4px), 16% 100%, 0 calc(100% - 3px), 4px 70%, 0 42%, 3px 18%)}
  .photo-tape:hover .photo-flap{opacity:1;transform:none}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tape-strip.dog:hover,.tape-bar:hover .tape-strip.dog{clip-path:polygon(4px 0, 28% 3px, 55% 0, 82% 2px, calc(100% - 2px) 0, calc(100% - 5px) 28%, 100% 52%, 100% calc(100% - 24px), calc(100% - 8.4px) calc(100% - 11.4px), calc(100% - 18px) 100%, 74% calc(100% - 3px), 46% 100%, 18% calc(100% - 2px), 3px 100%, 0 72%, 4px 46%, 0 20%)}
  .tape-strip.dog:hover::after,.tape-bar:hover .tape-strip.dog::after{opacity:1;transform:none}
  .taped.dogear:hover > .press.tape-strip{clip-path:polygon(4px 0, 28% 3px, 55% 0, 82% 2px, calc(100% - 2px) 0, calc(100% - 5px) 28%, 100% 52%, 100% calc(100% - 24px), calc(100% - 8.4px) calc(100% - 11.4px), calc(100% - 18px) 100%, 74% calc(100% - 3px), 46% 100%, 18% calc(100% - 2px), 3px 100%, 0 72%, 4px 46%, 0 20%)}
  .taped.dogear:hover::after{opacity:1;transform:none}
}
.load-fill{background-image:url(img/halftone.png);background-size:5px 5px}
.load-frame::after{content:"";position:absolute;inset:-2px;pointer-events:none;border:2px solid}
.load-frame::after{border-color:#6D81F2;translate:3px 2px;opacity:.75}
.photo-tape img,.photo-tape .shot{clip-path:polygon(0 6px, 12% 0, 30% 5px, 52% 1px, 74% 6px, 90% 0, 100% 4px, calc(100% - 4px) 30%, 100% 58%, calc(100% - 3px) 84%, 100% 100%, 82% calc(100% - 5px), 60% 100%, 38% calc(100% - 4px), 16% 100%, 0 calc(100% - 3px), 4px 70%, 0 42%, 3px 18%)}
.photo-tape::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:polygon(0 6px, 12% 0, 30% 5px, 52% 1px, 74% 6px, 90% 0, 100% 4px, calc(100% - 4px) 30%, 100% 58%, calc(100% - 3px) 84%, 100% 100%, 82% calc(100% - 5px), 60% 100%, 38% calc(100% - 4px), 16% 100%, 0 calc(100% - 3px), 4px 70%, 0 42%, 3px 18%);background-image:url(img/halftone.png);background-size:5px 5px;opacity:.55}
.photo-tape::before{content:"";position:absolute;z-index:1;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;rotate:var(--t);background-color:rgba(242,239,196,.82);background-image:url(img/halftone.png);background-size:5px 5px;clip-path:polygon(3px 0, 30% 2px, 60% 0, 100% 3px, calc(100% - 4px) 50%, 100% 100%, 65% calc(100% - 2px), 35% 100%, 0 calc(100% - 3px), 4px 50%)}
.ruled{background-image:url(img/ruled.png);background-size:4px 28px;background-position:0 6px}
.taped::before{content:"";position:absolute;z-index:1;top:-10px;left:50%;width:64px;height:20px;margin-left:-32px;rotate:var(--t);background-color:rgba(208,168,160,.88);background-image:url(img/halftone.png);background-size:5px 5px;clip-path:polygon(3px 0, 30% 2px, 60% 0, 100% 3px, calc(100% - 4px) 50%, 100% 100%, 65% calc(100% - 2px), 35% 100%, 0 calc(100% - 3px), 4px 50%)}
.cassette{background-image:url(img/screw.png),url(img/screw.png),url(img/screw.png),url(img/screw.png);background-size:18px 18px;background-repeat:no-repeat;background-position:left 6px top 6px,right 6px top 6px,left 6px bottom 6px,right 6px bottom 6px}
.tape-foot{position:relative;margin:8px 0 0;width:min(560px,72%);height:52px;background:#1C2140;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);display:flex;align-items:center;justify-content:center;gap:56px}
.tape-foot .hole{width:22px;height:14px;border-radius:7px;background:#101326}
.tape-foot .screw{width:18px;height:18px;background:url(img/screw.png) center/18px 18px no-repeat}
.taped{rotate:var(--r);transition:transform .18s var(--ease),rotate .16s var(--ease)}
.taped > .press.tape-strip,.taped > .press.tape-strip:hover{rotate:0deg !important;transform:none !important;animation:none !important}
.taped > .press.tape-strip:active{rotate:0deg !important;transform:scale(0.97) !important;transition-duration:.1s}
.taped.dogear > .press.tape-strip{clip-path:polygon(4px 0, 28% 3px, 55% 0, 82% 2px, calc(100% - 2px) 0, calc(100% - 5px) 28%, 100% 52%, calc(100% - 3px) 78%, 100% 100%, 100% 100%, 74% calc(100% - 3px), 46% 100%, 18% calc(100% - 2px), 3px 100%, 0 72%, 4px 46%, 0 20%);transition:clip-path .22s var(--ease),background-color .18s var(--ease)}
.taped.dogear::after{content:"";position:absolute;right:0;bottom:0;width:24px;height:24px;pointer-events:none;background:#9B9DDA;clip-path:polygon(24px 0, 15.6px 12.6px, 6px 24px, 2.2px 14px, 1px 6.7px, 12.8px 2.4px);opacity:0;transform:scale(.3);transform-origin:100% 100%;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.about-ruled{background-position:0 22px}
.about-photo{position:relative;float:right;z-index:2;width:200px;margin:4px 0 16px 36px;rotate:4deg}
.about-ruled::after{content:"";display:block;clear:both}
.about-text p + p{margin-top:28px !important}
.about-photo::before{background-color:rgba(208,168,160,.88)}
@media (max-width:480px){.about-label .taped > a{padding:0 14px !important;font-size:15px !important;white-space:nowrap}}
@media (max-width:600px){.about-photo{float:none;width:160px;margin:4px auto 32px;rotate:-2deg}}
.tape-strip.dog{position:relative;clip-path:polygon(4px 0, 28% 3px, 55% 0, 82% 2px, calc(100% - 2px) 0, calc(100% - 5px) 28%, 100% 52%, calc(100% - 3px) 78%, 100% 100%, 100% 100%, 74% calc(100% - 3px), 46% 100%, 18% calc(100% - 2px), 3px 100%, 0 72%, 4px 46%, 0 20%);transition:clip-path .22s var(--ease),transform .1s var(--ease),background-color .18s var(--ease),color .18s var(--ease)}
.tape-strip.dog::after{content:"";position:absolute;right:0;bottom:0;width:24px;height:24px;pointer-events:none;background:#9B9DDA;clip-path:polygon(24px 0, 15.6px 12.6px, 6px 24px, 2.2px 14px, 1px 6.7px, 12.8px 2.4px);opacity:0;transform:scale(.3);transform-origin:100% 100%;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.tape-strip.dog.flap-cream::after{background:#F2EFC4}
.about-photo img,.about-photo::after{clip-path:polygon(0 6px, 12% 0, 30% 5px, 52% 1px, 74% 6px, 90% 0, 100% 4px, calc(100% - 4px) 30%, 100% 58%, calc(100% - 3px) 84%, 100% 100%, 100% 100%, 82% calc(100% - 5px), 60% 100%, 38% calc(100% - 4px), 16% 100%, 0 calc(100% - 3px), 4px 70%, 0 42%, 3px 18%);transition:clip-path .25s var(--ease)}
.contact-ruled{background-position:0 6px}
.faq-item + .faq-item{margin-top:28px}
.faq-card{position:relative;flex:0 1 640px;min-width:0;background-color:#F2EFC4;border-radius:6px;color:#101326;box-sizing:border-box;rotate:-0.8deg}
.contact-card{flex:0 1 480px}
@media (max-width:1099px){.contact-wrap{flex-direction:column;align-items:center !important;gap:56px !important}.faq-card{order:2;width:100%;max-width:640px;flex:none;rotate:0deg}.contact-card{order:1;flex:none}}
.legal-btn{transition:color .18s var(--ease)}
.legal-btn:hover{color:#F2EFC4 !important}
.legal-btn:focus-visible{outline:2px solid #6D81F2;outline-offset:2px}
.photo-tape:not(.about-photo) img,.photo-tape:not(.about-photo)::after{clip-path:polygon(0 6px, 12% 0, 30% 5px, 52% 1px, 74% 6px, 90% 0, 100% 4px, calc(100% - 4px) 30%, 100% 58%, calc(100% - 3px) 84%, 100% 100%, 100% 100%, 82% calc(100% - 5px), 60% 100%, 38% calc(100% - 4px), 16% 100%, 0 calc(100% - 3px), 4px 70%, 0 42%, 3px 18%);transition:clip-path .25s var(--ease)}
.photo-flap{position:absolute;z-index:2;right:0;bottom:0;width:40px;height:40px;pointer-events:none;background:#9B9DDA;clip-path:polygon(40px 0, 26px 21px, 10px 40px, 3.7px 23.3px, 1.7px 11.2px, 21.3px 4px);opacity:0;transform:scale(.3);transform-origin:100% 100%;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.taped.tilt > .press.tape-strip{rotate:var(--r) !important}
.vhs-label.aged{background-image:url(img/aged.png);background-size:100% 100%;border-radius:4px}
.label-lines{background-image:url(img/ruled.png);background-size:4px 28px;background-position:0 27px}
.vhs-label.aged-1{background-image:url(img/aged_1.png)}
.vhs-label.aged-2{background-image:url(img/aged_2.png)}
.vhs-label.aged-3{background-image:url(img/aged_3.png)}
.vhs-label.aged-4{background-image:url(img/aged_4.png)}
.vhs-label.aged-5{background-image:url(img/aged_5.png)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-bottom-color:#6D81F2}
.contact-form textarea:focus{background-color:rgba(109,129,242,.06)}
.contact-form ::placeholder{color:#646a9a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form button[disabled]{opacity:.6;cursor:progress}
.row{scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.shot,.photo-tape{transition:transform .25s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .kb{animation:kb 26s ease-in-out infinite alternate}
  .slide{animation:slidefade 70s linear infinite}
  @keyframes slidefade{0%{opacity:0}1.714%{opacity:1}7.143%{opacity:1}8.857%{opacity:0}100%{opacity:0}}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
  .spin{animation:spin 2.4s linear infinite;transform-origin:50% 50%}
  @keyframes spin{to{transform:rotate(360deg)}}
  .boot{animation:boot .4s var(--ease) both}
  .boot-1{animation-delay:0s}.boot-2{animation-delay:.06s}.boot-3{animation-delay:.12s}.boot-4{animation-delay:.18s}.boot-5{animation-delay:.24s}.boot-6{animation-delay:.3s}
  @keyframes boot{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .cursor{animation:blink 1.1s steps(2,start) infinite}
  @keyframes blink{to{visibility:hidden}}
  @supports (animation-timeline:view()){
    .rise,.rise-2,.rise-3{animation:rise linear both;animation-timeline:view()}
    .rise{animation-range:entry 0% entry 45%}
    .rise-2{animation-range:entry 10% entry 55%}
    .rise-3{animation-range:entry 20% entry 65%}
    @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){
  .boot{animation:fade .2s ease-out both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @supports (animation-timeline:view()){
    .rise,.rise-2,.rise-3{animation:fade linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@media (max-width:760px){
  .hero-bg{object-position:62% 50%}
  .sheet{padding-left:24px !important;padding-right:24px !important}
  .ctrl{display:none !important}
  .window{display:none !important}
  .cassette{margin:0 !important}
  .cat{padding-left:24px !important}
  .vhs-label{flex-basis:100% !important;max-width:none !important}
  .door{display:none !important}
}
@media (max-width:900px){
  .row{flex-direction:column !important;overflow:visible !important;gap:64px !important;margin-top:48px}
  .step{width:auto !important}
  .ctrl,.bar{display:none !important}
}
.vhs-player::after{display:none}