:root{ --ink:#0b0b0b; --accent:#4CAF50; }
*{box-sizing:border-box}
body{
  
  background:radial-gradient(circle at 10px 10px, rgba(0,0,0,.06) 1.5px, transparent 1.6px) repeat,
             linear-gradient(#fff,#efefef);
  background-size:12px 12px,100% 100%;
  font-family:Inter, system-ui, Arial;
  color:var(--ink);
}
.page{
  max-width:1100px; margin:3rem auto; padding:1.5rem;
  background:#6dd8dc; border:6px solid var(--ink); box-shadow:10px 10px 0 var(--ink);
}
.cover{
  box-shadow: 6px 6px 0 black;
  position:relative; border:4px solid var(--ink);
  padding:2.5rem; background:repeating-linear-gradient(45deg,#fff 0,#fff 6px,#f1f1f1 6px,#f1f1f1 12px);
}
.brand{
  line-height:.95; margin:0; text-transform:uppercase; 
}
.tagline{margin:.5rem 0 0;font-weight:600}
.bubble{
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    background: #007e87;
    border: 4px solid #6dd8dc;
    padding: 1rem 1.25rem;
    max-width: 300px;
    border-radius: 24px;
    filter: drop-shadow(6px 6px 0 #fcd23d);;
}
.bubble strong{display:block;font-size:1.1rem;margin-bottom:.25rem}
.bubble:after{
  content:\"\";position:absolute;right:24px;bottom:-18px;width:0;height:0;
  border:12px solid transparent;border-top-color:var(--ink);transform:skewX(-10deg);
}
.bubble:before{
  content:\"\";position:absolute;right:24px;bottom:-14px;width:0;height:0;
  border:12px solid transparent;border-top-color:#fff;transform:skewX(-10deg);z-index:2;
}
.panels{margin-top:1.5rem;display:grid;grid-template-columns:1fr;}
.panel{
  position:relative;border:4px solid var(--ink);background:#fff;
  min-height:320px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:2rem;
}
.inner{text-align:center;z-index:2;position:relative}
h2{font-family:Bangers,system-ui;font-size:2.5rem;margin:.5rem 0}
form{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:1rem}
input[type=text],input[type=password]{
  padding:12px 14px;width:min(100%,320px);
  border-radius:12px;border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);font-size:16px;background:#fff;
}
button[type=submit]{
  cursor:pointer;
}
button[type=submit]:hover{transform:skewX(-6deg) translate(-2px,-2px);}
.error{color:#c00;margin-top:.5rem;font-weight:700}
.hint{margin-top:1rem;font-size:.8rem;color:#444}

/* Yin & Yang background */
.yin-yang{position:absolute;inset:0;display:grid;place-items:center;opacity:.1;}
.yy{position:relative;width:min(60vw,380px);aspect-ratio:1/1;
  border:4px solid var(--ink);border-radius:50%;overflow:hidden;
  background:linear-gradient(180deg,#000 50%,#fff 50%);
}
.yy:before,.yy:after{content:\"\";position:absolute;left:50%;transform:translateX(-50%);
  width:50%;aspect-ratio:1/1;border-radius:50%;border:4px solid var(--ink);}
.yy:before{top:25%;background:#000;}
.yy:after{bottom:25%;background:#fff;}
.dot-white,.dot-black{position:absolute;left:50%;transform:translate(-50%,-50%);
  width:10%;aspect-ratio:1/1;border-radius:50%;border:3px solid var(--ink);}
.dot-white{top:25%;background:#fff;}
.dot-black{top:75%;background:#000;}
.sfx{ position: absolute;
    inset: auto 21px 28px auto;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 35px;
    transform: rotate(-12deg);
    background: #007e87;
    color: #fcd23d;
    padding: 2px 8px;
    border: 3px solid #6dd8dc;
    outline: 3px solid #fcd23d80;}
footer{margin-top:24px;border:4px solid var(--ink);padding:10px 14px;background:#fff;
  display:flex;justify-content:space-between;align-items:center;
  box-shadow:6px 6px 0 var(--ink);font-size:14px;}

  .font-dino{
    font-family: "Rubik", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #007E87;
    text-shadow: -2px -2px 0 #6dd8dc, 2px -2px 0 #6dd8dc, -2px 2px 0 #6dd8dc, 2px 2px 0 #6dd8dc, 0px 6px 8px rgba(0, 0, 0, 0.55);
}
.uwu{
  color: white;
}

.cta {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 16px;
    border: 3px solid var(--ink);
    background: #fcd23d;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--ink);
    transform: skewX(-6deg);
}

    @media (max-width:980px){
.bubble {
     display: none;
}

.sfx {
    display: none;
  
}

.cover {
    position: relative;
    display: flex;
    border: 4px solid var(--ink);
    padding: 0rem; 
    background: repeating-linear-gradient(45deg, #fff 0, #fff 6px, #f1f1f1 6px, #f1f1f1 12px);
    justify-content: center;
}


}