/* ==================== styles.css ==================== */



/* ===== index.html extracted styles ===== */

    body.page-home{
      --sw-bg: #f8f6f2;
      --sw-card: #fffdf9;
      --sw-card-2: #f5f1ea;
      --sw-text: #5b4742;
      --sw-muted: #957a72;
      --sw-border: #d4cbc1;
      --sw-pink: #e0a095;
      --sw-pink-2: #d9a7b6;
      --sw-lilac: #d9bfd3;
      --sw-peach: #e3a89a;
      --sw-green: #b5cdbd;
      --sw-green-2: #dfe9df;
      --sw-shadow: 0 12px 30px rgba(86,67,65,.08);
      --sw-shadow-sm: 0 4px 0 rgba(86,67,65,.08);
      --sw-shadow-md: 0 6px 0 rgba(86,67,65,.09);
      --sw-container: 1280px;
    }

    body.page-home *{
      box-sizing: border-box;
    }

    html{
      scroll-behavior: smooth;
    }

    body.page-home.sw-body{
      margin: 0;
      background: var(--sw-bg);
      color: var(--sw-text);
      font-family: "Nunito", sans-serif;
      overflow-x: hidden;
    }

    body.page-home a{
      text-decoration: none;
      color: inherit;
    }

    body.page-home svg{
      width: 1em;
      height: 1em;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    body.page-home .sw-container{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
    }

    body.page-home .sw-divider{
      width: 100%;
      height: 4px;
      background: var(--sw-border);
      box-shadow: 0 1px 0 rgba(255,255,255,.7);
    }

    body.page-home .sw-header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(248,246,242,.95);
      backdrop-filter: blur(10px);
    }

    body.page-home .sw-header-inner{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
      min-height: 102px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    body.page-home .sw-logo-wrap{
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    body.page-home .sw-logo-badge{
      width: 62px;
      height: 62px;
      border-radius: 19px;
      background: var(--sw-pink);
      color: var(--sw-text);
      display: grid;
      place-items: center;
      box-shadow: var(--sw-shadow-sm), 0 8px 16px rgba(86,67,65,.05);
    }

    body.page-home .sw-logo-badge svg{
      width: 31px;
      height: 31px;
    }

    body.page-home .sw-logo-badge.small{
      width: 54px;
      height: 54px;
      border-radius: 17px;
    }

    body.page-home .sw-logo-text{
      font-size: 29px;
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--sw-text);
    }

    body.page-home .sw-logo-text span{
      color: var(--sw-pink);
    }

    body.page-home .sw-nav{
      flex: 1;
      max-width: 840px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,.76);
      border: 4px solid var(--sw-border);
      border-radius: 999px;
      padding: 10px;
      box-shadow: 0 6px 16px rgba(86,67,65,.05);
      overflow-x: auto;
    }

    body.page-home .sw-nav::-webkit-scrollbar{
      display: none;
    }

    body.page-home .sw-nav-link{
      flex: 1 0 auto;
      min-width: max-content;
      height: 50px;
      padding: 0 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 800;
      color: #856f67;
      transition: .2s ease;
    }

    body.page-home .sw-nav-link svg{
      width: 20px;
      height: 20px;
    }

    body.page-home .sw-nav-link.active{
      background: var(--sw-pink);
      color: var(--sw-text);
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.08);
    }

    body.page-home .sw-nav-link:hover{
      background: rgba(224,160,149,.14);
    }

    body.page-home .sw-section{
      width: 100%;
    }

    body.page-home .sw-hero{
      padding: 64px 0 72px;
      min-height: calc(100vh - 106px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    body.page-home .sw-hero-grid{
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 58px;
      align-items: center;
    }

    body.page-home .sw-pill-label{
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      border-radius: 999px;
      background: #dfe9df;
      border: 3px solid rgba(180,202,187,.5);
      color: var(--sw-text);
      font-size: 16px;
      font-weight: 800;
      box-shadow: 0 3px 8px rgba(86,67,65,.05);
      margin-bottom: 28px;
    }

    body.page-home .sw-pill-dot{
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #644c46;
    }

    body.page-home .sw-hero-title{
      margin: 0 0 26px;
      font-size: 88px;
      line-height: .94;
      letter-spacing: -.07em;
      font-weight: 900;
      color: var(--sw-text);
    }

    body.page-home .sw-accent-word{
      color: var(--sw-pink);
      position: relative;
      display: inline-block;
    }

    body.page-home .sw-accent-word::after{
      content: "";
      position: absolute;
      left: 6px;
      right: -4px;
      bottom: -10px;
      height: 18px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='20' viewBox='0 0 220 20'%3E%3Cpath d='M4 10c22 8 43 8 63 0s41-8 62 0 42 8 87-1' fill='none' stroke='%23e0a095' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    }

    body.page-home .sw-hero-text{
      max-width: 650px;
      margin: 0 0 42px;
      font-size: 24px;
      line-height: 1.68;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-home .sw-hero-buttons{
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    body.page-home .sw-btn{
      height: 72px;
      padding: 0 34px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-size: 24px;
      font-weight: 900;
      transition: .2s ease;
    }

    body.page-home .sw-btn svg{
      width: 26px;
      height: 26px;
    }

    body.page-home .sw-btn-primary{
      min-width: 318px;
      background: var(--sw-pink);
      color: var(--sw-text);
      box-shadow: var(--sw-shadow-md);
    }

    body.page-home .sw-btn-secondary{
      min-width: 270px;
      background: var(--sw-card);
      color: var(--sw-text);
      border: 4px solid var(--sw-border);
      box-shadow: 0 4px 0 rgba(86,67,65,.05);
    }

    body.page-home .sw-btn-dark{
      background: #6a5550;
      color: #fff;
      padding: 0 30px;
      font-size: 20px;
      height: 68px;
      box-shadow: 0 5px 0 rgba(86,67,65,.14);
    }

    body.page-home .sw-btn:hover{
      transform: translateY(-2px);
    }

    body.page-home .sw-hero-card-wrap{
      display: flex;
      justify-content: center;
    }

    body.page-home .sw-hero-card{
      width: 100%;
      max-width: 610px;
      min-height: 605px;
      background: rgba(255,255,255,.75);
      border: 5px solid var(--sw-border);
      border-radius: 44px;
      box-shadow: var(--sw-shadow);
      padding: 28px 28px 26px;
      position: relative;
    }

    body.page-home .sw-window-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;
    }

    body.page-home .sw-window-dots{
      display: flex;
      gap: 10px;
    }

    body.page-home .sw-window-dots .dot{
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: block;
      border: 2px solid rgba(86,67,65,.08);
    }

    body.page-home .sw-window-dots .pink{ background: #dd9da0; }
    body.page-home .sw-window-dots .cream{ background: #dcc0cf; }
    body.page-home .sw-window-dots .green{ background: #a9c1af; }

    body.page-home .sw-window-badge{
      padding: 10px 24px;
      border-radius: 999px;
      background: #ede7df;
      border: 3px solid rgba(212,203,193,.9);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .06em;
      color: #8c7269;
    }

    body.page-home .sw-chat{
      width: 78%;
      padding: 28px 30px;
      border-radius: 30px;
      position: relative;
      box-shadow: 0 4px 10px rgba(86,67,65,.05);
    }

    body.page-home .sw-chat-right{
      margin-left: auto;
      background: #d8b0c2;
      border: 5px solid rgba(179,129,154,.18);
      margin-bottom: 28px;
    }

    body.page-home .sw-chat-right::before{
      content:"";
      position:absolute;
      left:-13px;
      top:50%;
      width:26px;
      height:26px;
      background:#d8b0c2;
      border-left:5px solid rgba(179,129,154,.18);
      border-bottom:5px solid rgba(179,129,154,.18);
      transform:translateY(-50%) rotate(45deg);
    }

    body.page-home .sw-chat-left{
      background: #f0ddd7;
      border: 5px solid #e4a799;
      margin-bottom: 34px;
    }

    body.page-home .sw-chat-left::after{
      content:"";
      position:absolute;
      right:-13px;
      top:50%;
      width:26px;
      height:26px;
      background:#f0ddd7;
      border-right:5px solid #e4a799;
      border-top:5px solid #e4a799;
      transform:translateY(-50%) rotate(45deg);
    }

    body.page-home .sw-chat-label{
      margin: 0 0 12px;
      font-size: 19px;
      font-weight: 900;
      letter-spacing: .01em;
    }

    body.page-home .sw-chat p:last-child{
      margin: 0;
      font-size: 18px;
      line-height: 1.55;
      font-weight: 800;
      color: var(--sw-text);
    }

    body.page-home .sw-score-card{
      margin-top: 20px;
      background: #fff;
      border: 5px solid var(--sw-border);
      border-radius: 34px;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    body.page-home .sw-score-left{
      display: flex;
      align-items: center;
      gap: 18px;
      min-width: 0;
    }

    body.page-home .sw-score-icon{
      width: 70px;
      height: 70px;
      border-radius: 22px;
      background: var(--sw-green);
      color: var(--sw-text);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    body.page-home .sw-score-icon svg{
      width: 34px;
      height: 34px;
    }

    body.page-home .sw-score-title{
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 8px;
    }

    body.page-home .sw-progress{
      width: 165px;
      height: 18px;
      background: #efe7dc;
      border-radius: 999px;
      border: 2px solid rgba(212,203,193,.9);
      overflow: hidden;
    }

    body.page-home .sw-progress span{
      display: block;
      width: 78%;
      height: 100%;
      background: var(--sw-pink);
      border-radius: 999px;
    }

    body.page-home .sw-score-number{
      font-size: 26px;
      font-weight: 900;
      color: var(--sw-pink);
      background: #faefeb;
      padding: 12px 18px;
      border-radius: 20px;
    }

    body.page-home .sw-scroll-arrow{
      display: flex;
      justify-content: center;
      padding-top: 42px;
      color: #9a7e75;
    }

    body.page-home .sw-scroll-arrow svg{
      width: 42px;
      height: 42px;
    }

    body.page-home .sw-hook{
      padding: 78px 0 88px;
    }

    body.page-home .sw-hook-inner{
      text-align: center;
    }

    body.page-home .sw-hook-bar{
      width: 86px;
      height: 12px;
      border-radius: 999px;
      background: var(--sw-pink);
      margin: 0 auto 34px;
    }

    body.page-home .sw-section-title{
      margin: 0 0 24px;
      font-size: 72px;
      line-height: 1.02;
      letter-spacing: -.06em;
      font-weight: 900;
      color: var(--sw-text);
    }

    body.page-home .sw-section-title.left{
      text-align: left;
    }

    body.page-home .sw-hook-text{
      max-width: 1140px;
      margin: 0 auto;
      font-size: 28px;
      line-height: 1.65;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-home .sw-underlined{
      color: var(--sw-pink);
      text-decoration: underline wavy;
      text-underline-offset: 8px;
      text-decoration-thickness: 2px;
      font-weight: 900;
    }

    body.page-home .sw-hook-text em{
      color: var(--sw-pink);
      font-style: italic;
      font-weight: 900;
    }

    body.page-home .sw-stat-grid{
      margin-top: 54px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 38px;
    }

    body.page-home .sw-stat-card{
      background: transparent;
      border: 5px solid var(--sw-border);
      border-radius: 42px;
      padding: 42px 34px 34px;
      min-height: 405px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }

    body.page-home .sw-stat-badge{
      width: 126px;
      height: 126px;
      border-radius: 28px;
      display: grid;
      place-items: center;
      margin-bottom: 34px;
      font-size: 26px;
      font-weight: 900;
      color: var(--sw-text);
      transform: rotate(-2deg);
    }

    body.page-home .sw-stat-badge.peach{ background: var(--sw-peach); }
    body.page-home .sw-stat-badge.pink{ background: var(--sw-pink-2); }
    body.page-home .sw-stat-badge.lilac{ background: var(--sw-lilac); }

    body.page-home .sw-stat-card h3{
      margin: 0 0 22px;
      font-size: 34px;
      line-height: 1.1;
      font-weight: 900;
    }

    body.page-home .sw-stat-card p{
      margin: 0;
      max-width: 280px;
      font-size: 24px;
      line-height: 1.55;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-home .sw-sim{
      padding: 88px 0 96px;
    }

    body.page-home .sw-sim-grid{
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 60px;
      align-items: center;
    }

    body.page-home .sw-sim-icon{
      width: 92px;
      height: 92px;
      border-radius: 24px;
      background: var(--sw-green);
      display: grid;
      place-items: center;
      color: var(--sw-text);
      box-shadow: var(--sw-shadow-sm);
      margin-bottom: 34px;
    }

    body.page-home .sw-sim-icon svg{
      width: 42px;
      height: 42px;
    }

    body.page-home .sw-sim-text{
      max-width: 620px;
      font-size: 28px;
      line-height: 1.65;
      font-weight: 700;
      color: var(--sw-muted);
      margin: 0 0 34px;
    }

    body.page-home .sw-btn-dark .arrow{
      font-size: 28px;
      line-height: 1;
    }

    body.page-home .sw-sim-card-wrap{
      display: flex;
      justify-content: center;
    }

    body.page-home .sw-sim-card{
      position: relative;
      width: 100%;
      max-width: 640px;
      background: rgba(255,255,255,.72);
      border: 5px solid var(--sw-border);
      border-radius: 46px;
      padding: 52px 36px 36px;
      box-shadow: var(--sw-shadow);
      transform: rotate(2.5deg);
    }

    body.page-home .sw-data-tag{
      position: absolute;
      top: -16px;
      right: -18px;
      background: #d8b0c2;
      color: var(--sw-text);
      border: 4px solid rgba(212,203,193,.7);
      border-radius: 22px;
      padding: 14px 24px;
      font-size: 18px;
      font-weight: 900;
      transform: rotate(12deg);
      box-shadow: 0 6px 12px rgba(86,67,65,.06);
    }

    body.page-home .sw-metric-box{
      background: rgba(245,241,234,.8);
      border-radius: 28px;
      padding: 24px 24px 22px;
      margin-bottom: 22px;
    }

    body.page-home .sw-metric-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
      font-size: 20px;
      font-weight: 900;
    }

    body.page-home .sw-chip{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 900;
    }

    body.page-home .sw-chip.pink{
      background: #f4e3e3;
      color: var(--sw-pink);
    }

    body.page-home .sw-chip.green{
      background: #e5eee7;
      color: #9ab5a1;
    }

    body.page-home .sw-metric-bar{
      width: 100%;
      height: 22px;
      border-radius: 999px;
      background: #f8f4ee;
      border: 2px solid rgba(212,203,193,.95);
      overflow: hidden;
    }

    body.page-home .sw-metric-bar .fill{
      display: block;
      height: 100%;
      border-radius: 999px;
    }

    body.page-home .fill.pink-1{
      width: 42%;
      background: #dd9fa3;
    }

    body.page-home .fill.pink-2{
      width: 83%;
      background: #d8b0c2;
    }

    body.page-home .fill.green{
      width: 70%;
      background: #b7cfbd;
    }

    body.page-home .sw-final{
      padding: 28px 0 92px;
    }

    body.page-home .sw-final-card{
      width: min(100%, 1150px);
      margin: 0 auto;
      background: var(--sw-pink);
      border-radius: 82px;
      box-shadow: 0 10px 0 rgba(224,160,149,.7), 0 16px 28px rgba(86,67,65,.08);
      padding: 92px 40px 88px;
      text-align: center;
    }

    body.page-home .sw-final-card h2{
      margin: 0 0 24px;
      font-size: 76px;
      line-height: 1;
      letter-spacing: -.06em;
      font-weight: 900;
    }

    body.page-home .sw-final-card p{
      max-width: 840px;
      margin: 0 auto 38px;
      font-size: 30px;
      line-height: 1.5;
      font-weight: 800;
      color: var(--sw-text);
    }

    body.page-home .sw-final-btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 360px;
      height: 88px;
      padding: 0 34px;
      border-radius: 999px;
      background: #fff;
      color: var(--sw-text);
      font-size: 28px;
      font-weight: 900;
      box-shadow: 0 7px 0 rgba(86,67,65,.10);
    }

    body.page-home .sw-footer{
      padding: 74px 0 80px;
      background: var(--sw-bg);
    }

    body.page-home .sw-footer-inner{
      display: grid;
      grid-template-columns: 1.2fr 1fr auto;
      align-items: center;
      gap: 34px;
    }

    body.page-home .sw-footer-logo-row{
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }

    body.page-home .sw-footer-title{
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    body.page-home .sw-footer-brand p{
      max-width: 470px;
      margin: 0;
      font-size: 22px;
      line-height: 1.6;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-home .sw-footer-links{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    body.page-home .sw-footer-links a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 96px;
      height: 54px;
      padding: 0 22px;
      border-radius: 999px;
      background: #ebe4d8;
      color: #8d756d;
      font-size: 16px;
      font-weight: 800;
    }

    body.page-home .sw-footer-face{
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: #f7eaf0;
      border: 5px solid #e9d6e0;
      display: grid;
      place-items: center;
      color: var(--sw-text);
    }

    body.page-home .sw-footer-face svg{
      width: 30px;
      height: 30px;
    }

    @media (max-width: 1200px){
      body.page-home .sw-hero-title,
body.page-home .sw-section-title,
body.page-home .sw-final-card h2{
        font-size: 62px;
      }

      body.page-home .sw-hook-text,
body.page-home .sw-sim-text,
body.page-home .sw-final-card p{
        font-size: 24px;
      }

      body.page-home .sw-stat-card p{
        font-size: 20px;
      }
    }

    @media (max-width: 980px){
      body.page-home .sw-header-inner{
        flex-direction: column;
        justify-content: center;
        padding: 14px 0;
        min-height: auto;
      }

      body.page-home .sw-nav{
        width: 100%;
        max-width: none;
      }

      body.page-home .sw-hero-grid,
body.page-home .sw-sim-grid,
body.page-home .sw-footer-inner,
body.page-home .sw-stat-grid{
        grid-template-columns: 1fr;
      }

      body.page-home .sw-hero-title{
        font-size: 62px;
      }

      body.page-home .sw-section-title{
        font-size: 54px;
      }

      body.page-home .sw-final-card h2{
        font-size: 58px;
      }

      body.page-home .sw-sim-card{
        transform: none;
      }

      body.page-home .sw-footer-inner{
        text-align: center;
      }

      body.page-home .sw-footer-brand{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    @media (max-width: 700px){
      body.page-home .sw-container,
body.page-home .sw-header-inner{
        width: min(100%, calc(100% - 24px));
      }

      body.page-home .sw-hero{
        padding: 44px 0 56px;
      }

      body.page-home .sw-hero-title{
        font-size: 48px;
      }

      body.page-home .sw-hero-text,
body.page-home .sw-hook-text,
body.page-home .sw-sim-text,
body.page-home .sw-final-card p{
        font-size: 18px;
      }

      body.page-home .sw-btn,
body.page-home .sw-final-btn{
        width: 100%;
        min-width: 0;
        font-size: 20px;
      }

      body.page-home .sw-hero-buttons{
        flex-direction: column;
        align-items: stretch;
      }

      body.page-home .sw-chat,
body.page-home .sw-chat-left,
body.page-home .sw-chat-right{
        width: 100%;
      }

      body.page-home .sw-chat-left::after,
body.page-home .sw-chat-right::before{
        display: none;
      }

      body.page-home .sw-score-card{
        flex-direction: column;
        align-items: stretch;
      }

      body.page-home .sw-score-left{
        justify-content: flex-start;
      }

      body.page-home .sw-final-card{
        border-radius: 46px;
        padding: 60px 24px;
      }

      body.page-home .sw-final-card h2{
        font-size: 42px;
      }

      body.page-home .sw-stat-card{
        min-height: auto;
      }
    }
  


/* ===== game.html extracted styles ===== */

    body.page-game{
      --sw-bg: #f8f6f2;
      --sw-panel: #fcfbf8;
      --sw-card: #fffdf9;
      --sw-soft: #f1eee8;
      --sw-soft-2: #ece7de;
      --sw-text: #5b4742;
      --sw-muted: #8b746b;
      --sw-border: #cdbfb2;
      --sw-pink: #e0a095;
      --sw-pink-deep: #d08d80;
      --sw-pink-2: #d9a7b6;
      --sw-lilac: #d9bfd3;
      --sw-peach: #e3a89a;
      --sw-green: #b5cdbd;
      --sw-green-2: #dfe9df;
      --sw-yellow: #e7d2a4;
      --sw-red-soft: #df9a93;
      --sw-shadow: 0 12px 28px rgba(86,67,65,.07);
      --sw-shadow-sm: 0 4px 0 rgba(86,67,65,.08);
      --sw-shadow-md: 0 6px 0 rgba(86,67,65,.09);
      --sw-container: 1280px;
      --radius-xl: 38px;
      --radius-lg: 28px;
      --radius-md: 22px;
      --radius-pill: 999px;
    }

    body.page-game *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body.page-game{
      margin: 0;
      background: var(--sw-bg);
      color: var(--sw-text);
      font-family: "Nunito", sans-serif;
      overflow-x: hidden;
    }
    body.page-game a{
      text-decoration: none;
      color: inherit;
    }
    body.page-game button{
      font: inherit;
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
    }
    body.page-game svg{
      width: 1em;
      height: 1em;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    body.page-game .sw-container{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
    }

    body.page-game .sw-divider{
      width: 100%;
      height: 4px;
      background: var(--sw-border);
      box-shadow: 0 1px 0 rgba(255,255,255,.7);
    }

    body.page-game .sw-header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(248,246,242,.96);
      backdrop-filter: blur(10px);
    }

    body.page-game .sw-header-inner{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
      min-height: 102px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    body.page-game .sw-logo-wrap{
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    body.page-game .sw-logo-badge{
      width: 62px;
      height: 62px;
      border-radius: 19px;
      background: var(--sw-pink);
      color: var(--sw-text);
      display: grid;
      place-items: center;
      box-shadow: var(--sw-shadow-sm), 0 8px 16px rgba(86,67,65,.05);
    }

    body.page-game .sw-logo-badge svg{
      width: 31px;
      height: 31px;
    }

    body.page-game .sw-logo-badge.small{
      width: 54px;
      height: 54px;
      border-radius: 17px;
    }

    body.page-game .sw-logo-text{
      font-size: 29px;
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--sw-text);
    }

    body.page-game .sw-logo-text span{ color: var(--sw-pink); }

    body.page-game .sw-nav{
      flex: 1;
      max-width: 840px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,.76);
      border: 4px solid var(--sw-border);
      border-radius: 999px;
      padding: 10px;
      box-shadow: 0 6px 16px rgba(86,67,65,.05);
      overflow-x: auto;
    }

    body.page-game .sw-nav::-webkit-scrollbar{ display: none; }

    body.page-game .sw-nav-link{
      flex: 1 0 auto;
      min-width: max-content;
      height: 50px;
      padding: 0 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 800;
      color: #856f67;
      transition: .2s ease;
    }

    body.page-game .sw-nav-link svg{
      width: 20px;
      height: 20px;
    }

    body.page-game .sw-nav-link.active{
      background: var(--sw-pink);
      color: var(--sw-text);
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.08);
    }

    body.page-game .sw-nav-link:hover{
      background: rgba(224,160,149,.14);
    }

    body.page-game .sw-main{
      min-height: calc(100vh - 106px);
      padding: 26px 0 54px;
    }

    body.page-game .game-shell{
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    body.page-game .intro-wrap{
      position: relative;
      display: flex;
      justify-content: center;
      padding-top: 6px;
    }

    body.page-game .intro-pin{
      position: absolute;
      left: 14%;
      top: -6px;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: #d7adbf;
      border: 5px solid var(--sw-border);
      display: grid;
      place-items: center;
      box-shadow: 0 4px 10px rgba(86,67,65,.06);
      z-index: 2;
    }

    body.page-game .intro-pin svg{
      width: 28px;
      height: 28px;
    }

    body.page-game .intro-card{
      width: min(870px, 100%);
      background: rgba(255,255,255,.7);
      border: 5px solid var(--sw-border);
      border-radius: 46px;
      box-shadow: var(--sw-shadow);
      padding: 52px 56px 44px;
      text-align: center;
      position: relative;
    }

    body.page-game .intro-card::before{
      content: "";
      position: absolute;
      width: 62px;
      height: 4px;
      left: -44px;
      top: 18px;
      background: var(--sw-border);
      border-radius: 999px;
    }

    body.page-game .intro-phone{
      width: 146px;
      height: 146px;
      margin: 0 auto 26px;
      border-radius: 50%;
      background: #db9d91;
      display: grid;
      place-items: center;
      color: var(--sw-text);
      box-shadow: inset 0 0 0 5px rgba(91,71,66,.08), 0 6px 12px rgba(86,67,65,.06);
    }

    body.page-game .intro-phone svg{
      width: 64px;
      height: 64px;
    }

    body.page-game .intro-title{
      margin: 0 0 18px;
      font-size: clamp(48px, 6vw, 82px);
      line-height: .95;
      letter-spacing: -.06em;
      font-weight: 900;
    }

    body.page-game .intro-text{
      max-width: 760px;
      margin: 0 auto 24px;
      font-size: 22px;
      line-height: 1.72;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-game .intro-note{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 58px;
      padding: 10px 22px;
      border-radius: 20px;
      background: #e7e1d7;
      color: #947b73;
      font-size: 15px;
      font-weight: 900;
      margin-bottom: 34px;
    }

    body.page-game .start-btn{
      min-width: 340px;
      min-height: 90px;
      padding: 0 34px;
      border-radius: var(--radius-pill);
      background: var(--sw-pink);
      color: var(--sw-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      font-size: 24px;
      font-weight: 900;
      box-shadow: 0 6px 0 rgba(208,141,128,.9);
      transition: transform .15s ease;
    }

    body.page-game .start-btn:hover{ transform: translateY(-2px); }

    body.page-game .start-btn svg{
      width: 30px;
      height: 30px;
      fill: currentColor;
      stroke: none;
    }

    body.page-game .planner-grid{
      display: none;
      grid-template-columns: 1.45fr .95fr;
      gap: 26px;
      align-items: start;
    }

    body.page-game .planner-grid.visible{ display: grid; }

    body.page-game .planner-col,
body.page-game .stats-col{
      background: rgba(255,255,255,.62);
      border: 5px solid var(--sw-border);
      border-radius: 46px;
      box-shadow: var(--sw-shadow);
      padding: 30px 30px 28px;
    }

    body.page-game .planner-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 26px;
      flex-wrap: wrap;
    }

    body.page-game .planner-title{
      margin: 0;
      font-size: 42px;
      line-height: 1;
      letter-spacing: -.04em;
      font-weight: 900;
    }

    body.page-game .time-badge{
      min-height: 64px;
      padding: 0 28px;
      border-radius: 24px;
      background: var(--sw-pink);
      border: 3px solid rgba(208,141,128,.9);
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--sw-text);
      font-size: 18px;
      font-weight: 900;
      box-shadow: 0 3px 0 rgba(208,141,128,.95);
    }

    body.page-game .time-badge svg{
      width: 22px;
      height: 22px;
    }

    body.page-game .day-track{
      width: 100%;
      height: 34px;
      border-radius: 999px;
      background: transparent;
      border: 4px solid var(--sw-border);
      overflow: hidden;
      margin-bottom: 24px;
    }

    body.page-game .day-fill{
      width: 0%;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #efb2aa 0%, #e0a095 100%);
      transition: width .25s ease;
    }

    body.page-game .activity-list{
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    body.page-game .activity-card{
      min-height: 124px;
      border-radius: 34px;
      border: 5px solid var(--sw-border);
      background: rgba(242,239,234,.8);
      box-shadow: 0 3px 0 rgba(86,67,65,.05);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 20px;
    }

    body.page-game .activity-left{
      display: flex;
      align-items: center;
      gap: 18px;
      min-width: 0;
      flex: 1;
    }

    body.page-game .activity-icon{
      width: 76px;
      height: 76px;
      border-radius: 24px;
      display: grid;
      place-items: center;
      box-shadow: 0 5px 0 rgba(86,67,65,.06), 0 8px 18px rgba(86,67,65,.04);
      flex-shrink: 0;
    }

    body.page-game .activity-icon svg{
      width: 38px;
      height: 38px;
    }

    body.page-game .icon-tiktok{ background: #e6e2da; }
    body.page-game .icon-instagram{ background: #d5a6ba; }
    body.page-game .icon-snapchat{ background: #eadfc7; }
    body.page-game .icon-youtube{ background: #edd5d1; }
    body.page-game .icon-pinterest{ background: #f1dede; }
    body.page-game .icon-linkedin{ background: #dce8f0; }
    body.page-game .icon-exercise{ background: #dce7de; }
    body.page-game .icon-eating{ background: #ede4c7; }
    body.page-game .icon-sleep{ background: #dce5ef; }
    body.page-game .icon-socializing{ background: #d8e7df; }
    body.page-game .icon-studying{ background: #eddad4; }

    body.page-game .activity-title{
      font-size: 20px;
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    body.page-game .activity-sub{
      font-size: 16px;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-game .activity-right{
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    body.page-game .counter-btn{
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 28px;
      font-weight: 900;
      transition: transform .12s ease, opacity .12s ease;
    }

    body.page-game .counter-btn:hover{ transform: translateY(-1px); }

    body.page-game .counter-btn.minus{
      background: #f3f0ec;
      color: #9e8d85;
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.05);
    }

    body.page-game .counter-btn.plus{
      background: #e3a293;
      color: var(--sw-text);
      box-shadow: inset 0 -4px 0 rgba(208,141,128,.55);
    }

    body.page-game .counter-btn:disabled{
      opacity: .45;
      cursor: not-allowed;
      transform: none;
    }

    body.page-game .counter-value{
      width: 32px;
      text-align: center;
      font-size: 28px;
      font-weight: 900;
    }

    body.page-game .planner-actions{
      display: flex;
      gap: 14px;
      margin-top: 22px;
    }

    body.page-game .reset-btn,
body.page-game .finish-btn{
      min-height: 58px;
      border-radius: 16px;
      padding: 0 22px;
      font-size: 16px;
      font-weight: 900;
    }

    body.page-game .reset-btn{
      min-width: 100px;
      border: 3px solid var(--sw-border);
      background: #fff;
      color: var(--sw-text);
    }

    body.page-game .finish-btn{
      flex: 1;
      background: #4f3b36;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 4px 0 rgba(58,41,37,.35);
    }

    body.page-game .stats-head{
      display: flex;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 20px;
    }

    body.page-game .stats-avatar{
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--sw-green);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    body.page-game .stats-avatar svg{
      width: 30px;
      height: 30px;
    }

    body.page-game .stats-title{
      margin: 2px 0 2px;
      font-size: 28px;
      line-height: 1;
      font-weight: 900;
    }

    body.page-game .stats-sub{
      font-size: 16px;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-game .stat-list{
      display: flex;
      flex-direction: column;
      gap: 26px;
      margin-top: 8px;
    }

    body.page-game .stat-card{
      border-radius: 28px;
      border: 4px solid var(--sw-border);
      background: rgba(242,239,234,.82);
      padding: 16px 18px 15px;
    }

    body.page-game .stat-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }

    body.page-game .stat-name{
      font-size: 18px;
      font-weight: 900;
      line-height: 1.1;
    }

    body.page-game .stat-score{
      min-width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #e3ece2;
      display: grid;
      place-items: center;
      color: #98b59e;
      font-size: 16px;
      font-weight: 900;
      padding-top: 1px;
    }

    body.page-game .stat-track{
      width: 100%;
      height: 18px;
      border-radius: 999px;
      border: 2px solid rgba(205,191,178,.95);
      background: #ebe8df;
      overflow: hidden;
    }

    body.page-game .stat-fill{
      height: 100%;
      border-radius: 999px;
      transition: width .25s ease;
    }

    body.page-game .fill-sleep{ background: #a8c2af; }
    body.page-game .fill-fomo{ background: #df9b95; }
    body.page-game .fill-confidence{ background: #de9b8a; }
    body.page-game .fill-happiness{ background: #d3aac0; }
    body.page-game .fill-motivation{ background: #de9a8b; }
    body.page-game .fill-sadness{ background: #c9b7cc; }
    body.page-game .fill-hunger{ background: #e0c584; }
    body.page-game .fill-social{ background: #b5cdbd; }

    body.page-game .results-modal{
      position: fixed;
      inset: 0;
      background: rgba(53,39,36,.34);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 1200;
    }

    body.page-game .results-modal.visible{ display: flex; }

    body.page-game .results-card{
      width: min(700px, 100%);
      max-height: min(86vh, 900px);
      overflow: auto;
      background: rgba(255,252,248,.96);
      border: 5px solid var(--sw-border);
      border-radius: 36px;
      box-shadow: 0 24px 60px rgba(53,39,36,.18);
      padding: 30px 28px 26px;
    }

    body.page-game .results-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    body.page-game .results-title{
      margin: 0;
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    body.page-game .close-results{
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #f0ebe3;
      border: 3px solid var(--sw-border);
      font-size: 24px;
      font-weight: 900;
    }

    body.page-game .grade-row{
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 22px;
      flex-wrap: wrap;
    }

    body.page-game .grade-badge{
      min-width: 100px;
      min-height: 100px;
      border-radius: 28px;
      background: var(--sw-pink);
      display: grid;
      place-items: center;
      font-size: 42px;
      font-weight: 900;
      box-shadow: inset 0 -5px 0 rgba(208,141,128,.5);
    }

    body.page-game .grade-copy h3{
      margin: 0 0 6px;
      font-size: 24px;
      font-weight: 900;
    }

    body.page-game .grade-copy p{
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--sw-muted);
      line-height: 1.55;
    }

    body.page-game .summary-box{
      border-radius: 26px;
      border: 4px solid var(--sw-border);
      background: #f5f1eb;
      padding: 18px 18px 16px;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.65;
      color: var(--sw-muted);
      margin-bottom: 22px;
    }

    body.page-game .results-actions{
      display: flex;
      gap: 14px;
      margin-top: 24px;
      flex-wrap: wrap;
    }

    body.page-game .results-actions button{
      min-height: 58px;
      border-radius: 18px;
      padding: 0 24px;
      font-size: 16px;
      font-weight: 900;
    }

    body.page-game .play-again{
      background: var(--sw-pink);
      color: var(--sw-text);
      box-shadow: 0 4px 0 rgba(208,141,128,.8);
    }

    body.page-game .close-btn{
      background: #fff;
      border: 3px solid var(--sw-border);
      color: var(--sw-text);
    }

    body.page-game .sw-footer{
      padding: 48px 0 56px;
      background: var(--sw-bg);
    }

    body.page-game .sw-footer-inner{
      display: grid;
      grid-template-columns: 1.2fr 1fr auto;
      align-items: center;
      gap: 34px;
    }

    body.page-game .sw-footer-logo-row{
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }

    body.page-game .sw-footer-title{
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    body.page-game .sw-footer-brand p{
      max-width: 470px;
      margin: 0;
      font-size: 18px;
      line-height: 1.6;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-game .sw-footer-links{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    body.page-game .sw-footer-links a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 96px;
      height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      background: #ebe4d8;
      color: #8d756d;
      font-size: 14px;
      font-weight: 800;
    }

    body.page-game .sw-footer-face{
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: #f7eaf0;
      border: 4px solid #e9d6e0;
      display: grid;
      place-items: center;
      color: var(--sw-text);
    }

    body.page-game .sw-footer-face svg{
      width: 28px;
      height: 28px;
    }

    @media (max-width: 1150px){
      body.page-game .planner-grid{
        grid-template-columns: 1fr;
      }
      body.page-game .intro-pin{
        left: 6%;
      }
    }

    @media (max-width: 980px){
      body.page-game .sw-header-inner{
        flex-direction: column;
        justify-content: center;
        padding: 14px 0;
        min-height: auto;
      }

      body.page-game .sw-nav{
        width: 100%;
        max-width: none;
      }

      body.page-game .sw-footer-inner{
        grid-template-columns: 1fr;
        text-align: center;
      }

      body.page-game .sw-footer-brand{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    @media (max-width: 760px){
      body.page-game .sw-container,
body.page-game .sw-header-inner{
        width: min(100%, calc(100% - 24px));
      }

      body.page-game .sw-main{
        padding-top: 18px;
      }

      body.page-game .intro-card{
        padding: 36px 22px 32px;
      }

      body.page-game .intro-card::before,
body.page-game .intro-pin{
        display: none;
      }

      body.page-game .intro-phone{
        width: 112px;
        height: 112px;
      }

      body.page-game .intro-title{
        font-size: 46px;
      }

      body.page-game .intro-text{
        font-size: 18px;
      }

      body.page-game .start-btn{
        min-width: 0;
        width: 100%;
        font-size: 21px;
      }

      body.page-game .planner-col,
body.page-game .stats-col{
        padding: 20px 16px 18px;
        border-radius: 28px;
      }

      body.page-game .planner-top{
        flex-direction: column;
        align-items: stretch;
      }

      body.page-game .planner-title{
        font-size: 34px;
      }

      body.page-game .time-badge{
        justify-content: center;
      }

      body.page-game .activity-card{
        padding: 14px;
        min-height: auto;
        gap: 12px;
      }

      body.page-game .activity-icon{
        width: 62px;
        height: 62px;
        border-radius: 20px;
      }

      body.page-game .activity-icon svg{
        width: 30px;
        height: 30px;
      }

      body.page-game .activity-right{
        gap: 10px;
      }

      body.page-game .counter-btn{
        width: 48px;
        height: 48px;
      }

      body.page-game .counter-value{
        width: 22px;
        font-size: 24px;
      }

      body.page-game .planner-actions{
        flex-direction: column;
      }

      body.page-game .reset-btn,
body.page-game .finish-btn{
        width: 100%;
      }

      body.page-game .results-card{
        padding: 22px 18px 20px;
      }
    }
  


/* ===== scroll.html extracted styles ===== */

    body.page-scroll{
      --sw-bg: #f8f6f2;
      --sw-card: #fcfbf8;
      --sw-card-inner: #f7f5f1;
      --sw-text: #5b4742;
      --sw-muted: #8b746b;
      --sw-border: #cfc2b6;
      --sw-pink: #e0a095;
      --sw-pink-deep: #d89285;
      --sw-pink-2: #d9a7b6;
      --sw-lilac: #d9bfd3;
      --sw-peach: #e3a89a;
      --sw-green: #b5cdbd;
      --sw-green-2: #dfe9df;
      --sw-blue-soft: #dbe6ee;
      --sw-yellow-soft: #e9e0cb;
      --sw-shadow: 0 12px 28px rgba(86,67,65,.07);
      --sw-shadow-sm: 0 4px 0 rgba(86,67,65,.08);
      --sw-shadow-md: 0 6px 0 rgba(86,67,65,.09);
      --sw-container: 1280px;
    }

    body.page-scroll *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body.page-scroll{
      margin: 0;
      background: var(--sw-bg);
      color: var(--sw-text);
      font-family: "Nunito", sans-serif;
      overflow-x: hidden;
    }

    body.page-scroll a{
      text-decoration: none;
      color: inherit;
    }

    body.page-scroll button{
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      cursor: pointer;
    }

    body.page-scroll svg{
      width: 1em;
      height: 1em;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    body.page-scroll .sw-container{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
    }

    body.page-scroll .sw-divider{
      width: 100%;
      height: 4px;
      background: var(--sw-border);
      box-shadow: 0 1px 0 rgba(255,255,255,.7);
    }

    body.page-scroll .sw-header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(248,246,242,.96);
      backdrop-filter: blur(10px);
    }

    body.page-scroll .sw-header-inner{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
      min-height: 102px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    body.page-scroll .sw-logo-wrap{
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    body.page-scroll .sw-logo-badge{
      width: 62px;
      height: 62px;
      border-radius: 19px;
      background: var(--sw-pink);
      color: var(--sw-text);
      display: grid;
      place-items: center;
      box-shadow: var(--sw-shadow-sm), 0 8px 16px rgba(86,67,65,.05);
    }

    body.page-scroll .sw-logo-badge svg{
      width: 31px;
      height: 31px;
    }

    body.page-scroll .sw-logo-badge.small{
      width: 54px;
      height: 54px;
      border-radius: 17px;
    }

    body.page-scroll .sw-logo-text{
      font-size: 29px;
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--sw-text);
    }

    body.page-scroll .sw-logo-text span{
      color: var(--sw-pink);
    }

    body.page-scroll .sw-nav{
      flex: 1;
      max-width: 840px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,.76);
      border: 4px solid var(--sw-border);
      border-radius: 999px;
      padding: 10px;
      box-shadow: 0 6px 16px rgba(86,67,65,.05);
      overflow-x: auto;
    }

    body.page-scroll .sw-nav::-webkit-scrollbar{
      display: none;
    }

    body.page-scroll .sw-nav-link{
      flex: 1 0 auto;
      min-width: max-content;
      height: 50px;
      padding: 0 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 800;
      color: #856f67;
      transition: .2s ease;
    }

    body.page-scroll .sw-nav-link svg{
      width: 20px;
      height: 20px;
    }

    body.page-scroll .sw-nav-link.active{
      background: var(--sw-pink);
      color: var(--sw-text);
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.08);
    }

    body.page-scroll .sw-nav-link:hover{
      background: rgba(224,160,149,.14);
    }

    body.page-scroll .feed-main{
      padding: 58px 0 0;
    }

    body.page-scroll .feed-hero{
      text-align: center;
      padding: 10px 0 52px;
    }

    body.page-scroll .feed-pill{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 72px;
      padding: 0 34px;
      border-radius: 999px;
      background: #a9bfae;
      color: #4f413c;
      font-size: 20px;
      font-weight: 900;
      box-shadow: 0 4px 0 rgba(86,67,65,.08), 0 8px 16px rgba(86,67,65,.05);
      margin-bottom: 34px;
    }

    body.page-scroll .feed-title{
      margin: 0 0 22px;
      font-size: clamp(60px, 7vw, 90px);
      line-height: .95;
      letter-spacing: -.06em;
      font-weight: 900;
      color: var(--sw-text);
    }

    body.page-scroll .feed-subtext{
      max-width: 980px;
      margin: 0 auto;
      font-size: 24px;
      line-height: 1.7;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-scroll .feed-list{
      display: flex;
      flex-direction: column;
      gap: 36px;
      padding-bottom: 88px;
    }

    body.page-scroll .feed-card{
      width: min(100%, 840px);
      margin: 0 auto;
      background: rgba(252,251,248,.82);
      border: 5px solid var(--sw-border);
      border-radius: 52px;
      box-shadow: var(--sw-shadow);
      padding: 42px 42px 34px;
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .55s ease, transform .55s ease;
    }

    body.page-scroll .feed-card.visible{
      opacity: 1;
      transform: translateY(0);
    }

    body.page-scroll .card-tag-row{
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    body.page-scroll .icon-box{
      width: 64px;
      height: 64px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      box-shadow: 0 4px 0 rgba(86,67,65,.05);
    }

    body.page-scroll .icon-box svg{
      width: 30px;
      height: 30px;
    }

    body.page-scroll .tag-pill{
      min-height: 54px;
      padding: 0 22px;
      border-radius: 20px;
      border: 4px solid rgba(207,194,182,.95);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 3px 0 rgba(86,67,65,.04);
    }

    body.page-scroll .tag-sleep .icon-box,
body.page-scroll .tag-sleep .tag-pill{
      background: #dde5de;
      color: #9ab49d;
    }

    body.page-scroll .tag-platform .icon-box,
body.page-scroll .tag-platform .tag-pill{
      background: #dfe8ef;
      color: #8fb2c9;
    }

    body.page-scroll .tag-good .icon-box,
body.page-scroll .tag-good .tag-pill{
      background: #dde5de;
      color: #9ab49d;
    }

    body.page-scroll .tag-fomo .icon-box,
body.page-scroll .tag-fomo .tag-pill{
      background: #eedfe1;
      color: #d49295;
    }

    body.page-scroll .tag-age .icon-box,
body.page-scroll .tag-age .tag-pill{
      background: #e8e8de;
      color: #5e4a44;
    }

    body.page-scroll .tag-academic .icon-box,
body.page-scroll .tag-academic .tag-pill{
      background: #eee7d8;
      color: #dbbb6f;
    }

    body.page-scroll .tag-balance .icon-box,
body.page-scroll .tag-balance .tag-pill{
      background: #e8e8de;
      color: #7d6a63;
    }

    body.page-scroll .card-title{
      margin: 0 0 24px;
      font-size: clamp(36px, 4vw, 58px);
      line-height: 1.05;
      letter-spacing: -.04em;
      font-weight: 900;
    }

    body.page-scroll .card-title.peach{
      color: var(--sw-pink-deep);
    }

    body.page-scroll .card-title.dark{
      color: var(--sw-text);
    }

    body.page-scroll .stat-bubble{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 74px;
      padding: 0 30px;
      border-radius: 26px;
      background: #f4e7e3;
      border: 4px solid #e5c4bb;
      color: var(--sw-text);
      font-size: 28px;
      font-weight: 900;
      box-shadow: 0 3px 0 rgba(86,67,65,.04);
      margin-bottom: 26px;
    }

    body.page-scroll .card-body{
      font-size: 24px;
      line-height: 1.72;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-scroll .card-body p{
      margin: 0;
    }

    body.page-scroll .card-divider{
      width: 100%;
      height: 0;
      border-top: 4px dotted var(--sw-border);
      margin: 34px 0 24px;
      opacity: .95;
    }

    body.page-scroll .card-source{
      font-size: 17px;
      font-weight: 900;
      color: var(--sw-text);
    }

    body.page-scroll .feed-end{
      text-align: center;
      padding: 28px 0 110px;
    }

    body.page-scroll .feed-end-icon{
      width: 110px;
      height: 110px;
      margin: 0 auto 28px;
      border-radius: 50%;
      border: 5px solid var(--sw-border);
      display: grid;
      place-items: center;
      color: #8e7168;
    }

    body.page-scroll .feed-end-icon svg{
      width: 44px;
      height: 44px;
    }

    body.page-scroll .feed-end h2{
      margin: 0 0 12px;
      font-size: 36px;
      line-height: 1.2;
      letter-spacing: -.03em;
      font-weight: 900;
      color: var(--sw-text);
    }

    body.page-scroll .feed-end p{
      margin: 0;
      font-size: 22px;
      line-height: 1.6;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-scroll .sw-footer{
      padding: 74px 0 80px;
      background: rgba(255,255,255,.25);
      border-top: 4px solid var(--sw-border);
    }

    body.page-scroll .sw-footer-inner{
      display: grid;
      grid-template-columns: 1.2fr 1fr auto;
      align-items: center;
      gap: 34px;
    }

    body.page-scroll .sw-footer-logo-row{
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }

    body.page-scroll .sw-footer-title{
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    body.page-scroll .sw-footer-brand p{
      max-width: 470px;
      margin: 0;
      font-size: 22px;
      line-height: 1.6;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-scroll .sw-footer-links{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    body.page-scroll .sw-footer-links a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 96px;
      height: 54px;
      padding: 0 22px;
      border-radius: 999px;
      background: #ebe4d8;
      color: #8d756d;
      font-size: 16px;
      font-weight: 800;
    }

    body.page-scroll .sw-footer-face{
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: #f7eaf0;
      border: 5px solid #e9d6e0;
      display: grid;
      place-items: center;
      color: var(--sw-text);
    }

    body.page-scroll .sw-footer-face svg{
      width: 30px;
      height: 30px;
    }

    @media (max-width: 1200px){
      body.page-scroll .feed-subtext,
body.page-scroll .card-body{
        font-size: 21px;
      }
    }

    @media (max-width: 980px){
      body.page-scroll .sw-header-inner{
        flex-direction: column;
        justify-content: center;
        padding: 14px 0;
        min-height: auto;
      }

      body.page-scroll .sw-nav{
        width: 100%;
        max-width: none;
      }

      body.page-scroll .sw-footer-inner{
        grid-template-columns: 1fr;
        text-align: center;
      }

      body.page-scroll .sw-footer-brand{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    @media (max-width: 760px){
      body.page-scroll .sw-container,
body.page-scroll .sw-header-inner{
        width: min(100%, calc(100% - 24px));
      }

      body.page-scroll .feed-main{
        padding-top: 36px;
      }

      body.page-scroll .feed-pill{
        min-height: 58px;
        font-size: 18px;
        padding: 0 24px;
        margin-bottom: 24px;
      }

      body.page-scroll .feed-title{
        font-size: 54px;
      }

      body.page-scroll .feed-subtext{
        font-size: 18px;
      }

      body.page-scroll .feed-card{
        padding: 24px 20px 22px;
        border-radius: 34px;
      }

      body.page-scroll .card-title{
        font-size: 30px;
      }

      body.page-scroll .stat-bubble{
        min-height: 60px;
        padding: 0 22px;
        font-size: 22px;
      }

      body.page-scroll .card-body{
        font-size: 18px;
      }

      body.page-scroll .feed-end{
        padding-bottom: 72px;
      }

      body.page-scroll .feed-end h2{
        font-size: 28px;
      }

      body.page-scroll .feed-end p{
        font-size: 18px;
      }

      body.page-scroll .sw-footer{
        padding: 52px 0 58px;
      }

      body.page-scroll .sw-footer-brand p{
        font-size: 18px;
      }
    }
  


/* ===== data.html extracted styles ===== */

    body.page-data{
      --sw-bg: #f5f3f0;
      --sw-card: #faf8f6;
      --sw-card-2: #efebe5;
      --sw-card-3: #e9e5df;
      --sw-text: #58443f;
      --sw-muted: #8f786f;
      --sw-border: #cdbfb2;
      --sw-pink: #de998c;
      --sw-pink-2: #e8d5d3;
      --sw-green: #dfe7df;
      --sw-green-ink: #a7bcae;
      --sw-peach: #edd8d4;
      --sw-peach-ink: #cfa59d;
      --sw-blue: #dbe7ee;
      --sw-blue-ink: #a7c2d4;
      --sw-yellow: #ebe4d6;
      --sw-yellow-ink: #d8bb72;
      --sw-plum: #e8dde8;
      --sw-plum-ink: #b18aa8;
      --sw-shadow: 0 12px 30px rgba(86,67,65,.08);
      --sw-shadow-sm: 0 4px 0 rgba(86,67,65,.08);
      --sw-shadow-md: 0 6px 0 rgba(86,67,65,.09);
      --sw-container: 1280px;
    }

    body.page-data *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }

    body.page-data{
      margin: 0;
      background: var(--sw-bg);
      color: var(--sw-text);
      font-family: "Nunito", sans-serif;
      overflow-x: hidden;
    }

    body.page-data a{
      text-decoration: none;
      color: inherit;
    }

    body.page-data button,
body.page-data select,
body.page-data input{
      font: inherit;
      color: inherit;
    }

    body.page-data button{
      border: 0;
      background: none;
      cursor: pointer;
      padding: 0;
    }

    body.page-data svg{
      width: 1em;
      height: 1em;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    body.page-data .sw-container{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
    }

    body.page-data .sw-divider{
      width: 100%;
      height: 4px;
      background: var(--sw-border);
      box-shadow: 0 1px 0 rgba(255,255,255,.7);
    }

    body.page-data .sw-header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(245,243,240,.96);
      backdrop-filter: blur(10px);
    }

    body.page-data .sw-header-inner{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
      min-height: 102px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    body.page-data .sw-logo-wrap{
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    body.page-data .sw-logo-badge{
      width: 62px;
      height: 62px;
      border-radius: 19px;
      background: var(--sw-pink);
      color: var(--sw-text);
      display: grid;
      place-items: center;
      box-shadow: var(--sw-shadow-sm), 0 8px 16px rgba(86,67,65,.05);
    }

    body.page-data .sw-logo-badge svg{
      width: 31px;
      height: 31px;
    }

    body.page-data .sw-logo-badge.small{
      width: 54px;
      height: 54px;
      border-radius: 17px;
    }

    body.page-data .sw-logo-text{
      font-size: 29px;
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--sw-text);
    }

    body.page-data .sw-logo-text span{
      color: var(--sw-pink);
    }

    body.page-data .sw-nav{
      flex: 1;
      max-width: 840px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,.76);
      border: 4px solid var(--sw-border);
      border-radius: 999px;
      padding: 10px;
      box-shadow: 0 6px 16px rgba(86,67,65,.05);
      overflow-x: auto;
    }

    body.page-data .sw-nav::-webkit-scrollbar{
      display: none;
    }

    body.page-data .sw-nav-link{
      flex: 1 0 auto;
      min-width: max-content;
      height: 50px;
      padding: 0 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 800;
      color: #856f67;
      transition: .2s ease;
    }

    body.page-data .sw-nav-link svg{
      width: 20px;
      height: 20px;
    }

    body.page-data .sw-nav-link.active{
      background: var(--sw-pink);
      color: var(--sw-text);
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.08);
    }

    body.page-data .sw-nav-link:hover{
      background: rgba(224,160,149,.14);
    }

    body.page-data .research-main{
      padding: 46px 0 84px;
    }

    body.page-data .hero{
      text-align: center;
      margin-bottom: 34px;
    }

    body.page-data .hero-badge{
      width: 126px;
      height: 126px;
      margin: 0 auto 22px;
      border-radius: 34px;
      background: #eee4e4;
      display: grid;
      place-items: center;
      box-shadow: 0 8px 0 rgba(205,191,178,.28), 0 14px 26px rgba(86,67,65,.06);
      transform: rotate(-2deg);
    }

    body.page-data .hero-badge svg{
      width: 56px;
      height: 56px;
    }

    body.page-data .hero h1{
      margin: 0 0 18px;
      font-size: clamp(48px, 6vw, 84px);
      line-height: .96;
      letter-spacing: -.06em;
      font-weight: 900;
    }

    body.page-data .hero-card{
      width: min(980px, 100%);
      margin: 0 auto;
      background: rgba(255,255,255,.62);
      border: 5px solid var(--sw-border);
      border-radius: 30px;
      padding: 24px 28px;
      box-shadow: 0 8px 18px rgba(86,67,65,.04);
      font-size: 19px;
      line-height: 1.75;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-data .goal-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin: 30px 0 28px;
    }

    body.page-data .goal-card{
      background: rgba(255,255,255,.65);
      border: 4px solid var(--sw-border);
      border-radius: 26px;
      padding: 20px;
      box-shadow: var(--sw-shadow);
    }

    body.page-data .goal-card .label{
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 900;
      color: #8b756d;
      margin-bottom: 10px;
    }

    body.page-data .goal-card .value{
      font-size: clamp(22px, 2vw, 32px);
      line-height: 1.06;
      letter-spacing: -.03em;
      font-weight: 900;
      margin-bottom: 8px;
    }

    body.page-data .goal-card .sub{
      font-size: 14px;
      line-height: 1.55;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-data .insight-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 32px;
    }

    body.page-data .insight-card{
      background: rgba(255,255,255,.65);
      border: 4px solid var(--sw-border);
      border-radius: 28px;
      padding: 22px;
      box-shadow: var(--sw-shadow);
    }

    body.page-data .insight-card h3{
      margin: 0 0 10px;
      font-size: clamp(24px, 2vw, 30px);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: -.03em;
    }

    body.page-data .insight-card p{
      margin: 0;
      font-size: 15px;
      line-height: 1.65;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-data .viz-panel{
      background: rgba(255,255,255,.65);
      border: 5px solid var(--sw-border);
      border-radius: 38px;
      padding: 28px;
      box-shadow: var(--sw-shadow);
      margin-bottom: 34px;
    }

    body.page-data .viz-head{
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      margin-bottom: 18px;
    }

    body.page-data .viz-head h2{
      margin: 0 0 8px;
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1;
      letter-spacing: -.05em;
      font-weight: 900;
    }

    body.page-data .viz-head p{
      margin: 0;
      font-size: 17px;
      line-height: 1.65;
      font-weight: 700;
      color: var(--sw-muted);
      max-width: 820px;
    }

    body.page-data .viz-controls{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 22px;
    }

    body.page-data .sw-select{
      min-height: 58px;
      padding: 0 18px;
      border-radius: 20px;
      border: 3px solid var(--sw-border);
      background: #fff;
      font-size: 16px;
      font-weight: 800;
      outline: none;
    }

    body.page-data .viz-grid{
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
    }

    body.page-data .viz-card{
      background: var(--sw-card);
      border: 4px solid rgba(205,191,178,.8);
      border-radius: 28px;
      padding: 22px;
      min-height: 380px;
    }

    body.page-data .viz-card h3{
      margin: 0 0 8px;
      font-size: clamp(22px, 2vw, 30px);
      font-weight: 900;
      letter-spacing: -.03em;
      line-height: 1.1;
    }

    body.page-data .viz-card p{
      margin: 0 0 18px;
      font-size: 15px;
      line-height: 1.55;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-data #vizCanvas{
      width: 100%;
      min-height: 320px;
    }

    body.page-data .stat-badges{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    body.page-data .stat-badge{
      background: var(--sw-card-2);
      border: 3px solid rgba(205,191,178,.72);
      border-radius: 22px;
      padding: 16px;
    }

    body.page-data .stat-badge .mini{
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #8c766d;
      font-weight: 900;
      margin-bottom: 8px;
    }

    body.page-data .stat-badge .big{
      font-size: clamp(22px, 2vw, 30px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.03em;
      margin-bottom: 6px;
    }

    body.page-data .stat-badge .caption{
      font-size: 14px;
      line-height: 1.45;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-data .dataset-stack{
      display: flex;
      flex-direction: column;
      gap: 34px;
    }

    body.page-data .dataset-card{
      background: rgba(255,255,255,.65);
      border: 5px solid var(--sw-border);
      border-radius: 42px;
      padding: 28px 28px 30px;
      box-shadow: var(--sw-shadow);
    }

    body.page-data .dataset-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    body.page-data .dataset-title-wrap{
      display: flex;
      align-items: flex-start;
      gap: 18px;
      min-width: 0;
    }

    body.page-data .dataset-icon{
      width: 82px;
      height: 82px;
      border-radius: 24px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.06);
    }

    body.page-data .dataset-icon.pink{ background: #efd7df; color: #b58394; }
    body.page-data .dataset-icon.blue{ background: var(--sw-blue); color: var(--sw-blue-ink); }

    body.page-data .dataset-icon svg{
      width: 36px;
      height: 36px;
    }

    body.page-data .dataset-title{
      margin: 0 0 10px;
      font-size: clamp(32px, 4vw, 58px);
      line-height: .98;
      letter-spacing: -.05em;
      font-weight: 900;
    }

    body.page-data .dataset-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 14px;
      border-radius: 999px;
      border: 2px solid var(--sw-border);
      background: #ece6dd;
      font-size: 13px;
      font-weight: 900;
      color: #866f66;
      margin-bottom: 16px;
    }

    body.page-data .dataset-desc{
      max-width: 860px;
      font-size: 18px;
      line-height: 1.65;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-data .dataset-metrics{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin: 24px 0 18px;
    }

    body.page-data .metric-card{
      background: #ddd6cf;
      border: 3px solid rgba(205,191,178,.7);
      border-radius: 24px;
      padding: 16px 18px;
    }

    body.page-data .metric-card .m-label{
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #856f67;
      margin-bottom: 10px;
    }

    body.page-data .metric-card .m-value{
      font-size: clamp(22px, 2vw, 34px);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -.03em;
      margin-bottom: 4px;
    }

    body.page-data .metric-card .m-sub{
      font-size: 14px;
      font-weight: 700;
      color: #8f786f;
      line-height: 1.45;
    }

    body.page-data .table-controls{
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }

    body.page-data .search-wrap{
      height: 64px;
      border: 4px solid var(--sw-border);
      border-radius: 22px;
      background: rgba(255,255,255,.72);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 18px;
    }

    body.page-data .search-wrap svg{
      width: 24px;
      height: 24px;
      color: #9a837a;
    }

    body.page-data .search-wrap input{
      width: 100%;
      height: 100%;
      border: 0;
      outline: none;
      background: transparent;
      font-size: 18px;
      font-weight: 800;
    }

    body.page-data .table-btn{
      min-height: 64px;
      padding: 0 22px;
      border-radius: 22px;
      border: 4px solid var(--sw-border);
      background: rgba(255,255,255,.75);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 6px 12px rgba(86,67,65,.03);
    }

    body.page-data .table-btn.primary{
      background: #6f5750;
      border-color: #6f5750;
      color: #fff;
    }

    body.page-data .table-status{
      display: flex;
      justify-content: space-between;
      gap: 20px;
      font-size: 14px;
      line-height: 1.5;
      font-weight: 800;
      color: #8c766d;
      margin: 8px 0 12px;
      flex-wrap: wrap;
    }

    body.page-data .table-wrap{
      border: 4px solid var(--sw-border);
      border-radius: 26px;
      overflow: hidden;
      background: #f7f5f2;
    }

    body.page-data .table-scroll{
      overflow: auto;
      max-height: 420px;
    }

    body.page-data .table-scroll.expanded{
      max-height: 900px;
    }

    body.page-data table{
      width: 100%;
      border-collapse: collapse;
      min-width: 860px;
    }

    body.page-data th,
body.page-data td{
      text-align: left;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(205,191,178,.85);
      font-size: 15px;
      font-weight: 800;
      color: #5e4a45;
      white-space: nowrap;
      vertical-align: top;
    }

    body.page-data th{
      position: sticky;
      top: 0;
      z-index: 1;
      background: #e6ded2;
      cursor: pointer;
    }

    body.page-data th:hover{
      background: #dfd5c7;
    }

    body.page-data tr:nth-child(even) td{
      background: rgba(239,235,229,.62);
    }

    body.page-data .sort-ind{
      margin-left: 6px;
      opacity: .6;
      font-size: 12px;
    }

    body.page-data .footer-note{
      background: #f0ddda;
      border: 5px solid #e4c2bc;
      border-radius: 48px;
      padding: 36px 34px;
      margin-top: 36px;
      box-shadow: var(--sw-shadow);
      text-align: center;
    }

    body.page-data .footer-note h2{
      margin: 0 0 12px;
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1;
    }

    body.page-data .footer-note p{
      max-width: 900px;
      margin: 0 auto;
      font-size: 20px;
      line-height: 1.7;
      font-weight: 700;
    }

    body.page-data .sw-footer{
      padding: 74px 0 80px;
      background: #f7f6f4;
      border-top: 4px solid var(--sw-border);
      margin-top: 80px;
    }

    body.page-data .sw-footer-inner{
      display: grid;
      grid-template-columns: 1.2fr 1fr auto;
      align-items: center;
      gap: 34px;
    }

    body.page-data .sw-footer-logo-row{
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }

    body.page-data .sw-footer-title{
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    body.page-data .sw-footer-brand p{
      max-width: 470px;
      margin: 0;
      font-size: 22px;
      line-height: 1.6;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-data .sw-footer-links{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    body.page-data .sw-footer-links a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 110px;
      height: 54px;
      padding: 0 22px;
      border-radius: 999px;
      background: #e8e2d8;
      color: #8d756d;
      font-size: 16px;
      font-weight: 800;
    }

    body.page-data .sw-footer-face{
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: #f2dfe7;
      border: 5px solid #ead2dc;
      display: grid;
      place-items: center;
      color: var(--sw-text);
    }

    body.page-data .sw-footer-face svg{
      width: 30px;
      height: 30px;
    }

    body.page-data /* visualization system */

    .relationship-notes{
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    body.page-data .relationship-note{
      background: var(--sw-card-2);
      border-radius: 18px;
      padding: 14px 16px;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 800;
      color: #765f59;
    }

    body.page-data .scatter-wrap{
      position: relative;
      width: 100%;
      height: 340px;
      border-radius: 24px;
      background:
        linear-gradient(to top, rgba(205,191,178,.28) 1px, transparent 1px) 0 0 / 100% 20%,
        linear-gradient(to right, rgba(205,191,178,.28) 1px, transparent 1px) 0 0 / 20% 100%,
        #f8f5f1;
      border: 3px solid rgba(205,191,178,.72);
      overflow: hidden;
    }

    body.page-data .scatter-point{
      position: absolute;
      border-radius: 50%;
      transform: translate(-50%, 50%);
      border: 2px solid rgba(255,255,255,.88);
      box-shadow: 0 6px 12px rgba(86,67,65,.08);
      opacity: .92;
    }

    body.page-data .scatter-axis-label{
      font-size: 13px;
      font-weight: 900;
      color: #866f66;
      margin-top: 10px;
    }

    body.page-data .scatter-legend,
body.page-data .map-legend,
body.page-data .matrix-legend,
body.page-data .wave-legend{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    body.page-data .legend-chip{
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--sw-card-2);
      border: 2px solid rgba(205,191,178,.75);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 900;
      color: #7f6861;
    }

    body.page-data .legend-dot{
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-block;
    }

    body.page-data .matrix{
      display: grid;
      gap: 8px;
    }

    body.page-data .matrix-head,
body.page-data .matrix-side,
body.page-data .matrix-cell{
      border-radius: 16px;
      min-height: 62px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    body.page-data .matrix-head,
body.page-data .matrix-side{
      background: #ece3d8;
      font-size: 13px;
      font-weight: 900;
      color: #6e5751;
    }

    body.page-data .matrix-cell{
      color: #5d4844;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.3;
      border: 2px solid rgba(255,255,255,.75);
    }

    body.page-data .stack-bars{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    body.page-data .stack-row{
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 12px;
      align-items: center;
    }

    body.page-data .stack-label{
      font-size: 14px;
      font-weight: 900;
      color: #715b55;
    }

    body.page-data .stack-track{
      display: flex;
      width: 100%;
      min-height: 28px;
      overflow: hidden;
      border-radius: 999px;
      background: #eadfd7;
    }

    body.page-data .stack-seg{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 900;
      color: #5d4742;
      min-width: 24px;
    }

    body.page-data .donut-wrap{
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 22px;
      align-items: center;
    }

    body.page-data .donut{
      width: 220px;
      height: 220px;
      border-radius: 50%;
      position: relative;
      margin: 0 auto;
    }

    body.page-data .donut::after{
      content: "";
      position: absolute;
      inset: 32px;
      background: #faf8f6;
      border-radius: 50%;
      box-shadow: inset 0 0 0 3px rgba(205,191,178,.5);
    }

    body.page-data .donut-center{
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 2;
      text-align: center;
      padding: 48px;
      font-size: 14px;
      font-weight: 900;
      color: #6c5751;
    }

    body.page-data .state-map{
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }

    body.page-data .state-tile{
      border-radius: 16px;
      min-height: 68px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 2px solid rgba(255,255,255,.8);
      text-align: center;
    }

    body.page-data .state-code{
      font-size: 13px;
      font-weight: 900;
      color: #5f4a45;
    }

    body.page-data .state-value{
      font-size: 12px;
      font-weight: 800;
      color: #755f58;
      margin-top: 4px;
    }

    body.page-data .wave-wrap{
      display: flex;
      align-items: end;
      gap: 10px;
      height: 260px;
      padding: 20px 10px 4px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(233,229,223,.8));
      border: 3px solid rgba(205,191,178,.72);
    }

    body.page-data .wave-bar-wrap{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: end;
      gap: 10px;
      min-width: 0;
    }

    body.page-data .wave-bar{
      width: 100%;
      border-radius: 999px 999px 22px 22px;
      min-height: 14px;
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.06);
    }

    body.page-data .wave-label{
      font-size: 12px;
      line-height: 1.25;
      text-align: center;
      font-weight: 900;
      color: #715a54;
      word-break: break-word;
    }

    body.page-data .mini-bars{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    body.page-data .mini-row{
      display: grid;
      grid-template-columns: 170px 1fr 62px;
      gap: 12px;
      align-items: center;
    }

    body.page-data .mini-label{
      font-size: 14px;
      font-weight: 900;
      color: #735d57;
      word-break: break-word;
    }

    body.page-data .mini-track{
      width: 100%;
      height: 18px;
      border-radius: 999px;
      background: #eadfd7;
      overflow: hidden;
    }

    body.page-data .mini-fill{
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #df9c91 0%, #d7b2aa 100%);
    }

    body.page-data .mini-value{
      font-size: 14px;
      font-weight: 900;
      color: #7b655f;
      text-align: right;
    }

    @media (max-width: 1180px){
      body.page-data .goal-grid,
body.page-data .insight-grid,
body.page-data .dataset-metrics{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body.page-data .viz-grid{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 980px){
      body.page-data .sw-header-inner{
        flex-direction: column;
        justify-content: center;
        padding: 14px 0;
        min-height: auto;
      }

      body.page-data .sw-nav{
        width: 100%;
        max-width: none;
      }

      body.page-data .table-controls{
        grid-template-columns: 1fr 1fr;
      }

      body.page-data .table-controls .search-wrap{
        grid-column: 1 / -1;
      }

      body.page-data .sw-footer-inner{
        grid-template-columns: 1fr;
        text-align: center;
      }

      body.page-data .sw-footer-brand{
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      body.page-data .dataset-head{
        flex-direction: column;
      }
    }

    @media (max-width: 760px){
      body.page-data .sw-container,
body.page-data .sw-header-inner{
        width: min(100%, calc(100% - 24px));
      }

      body.page-data .research-main{
        padding-top: 34px;
      }

      body.page-data .hero-badge{
        width: 96px;
        height: 96px;
        border-radius: 28px;
      }

      body.page-data .hero-badge svg{
        width: 42px;
        height: 42px;
      }

      body.page-data .hero h1{
        font-size: 50px;
      }

      body.page-data .hero-card{
        padding: 20px 18px;
        font-size: 17px;
      }

      body.page-data .goal-grid,
body.page-data .insight-grid,
body.page-data .dataset-metrics,
body.page-data .stat-badges{
        grid-template-columns: 1fr;
      }

      body.page-data .viz-panel,
body.page-data .dataset-card{
        padding: 18px;
        border-radius: 28px;
      }

      body.page-data .dataset-title{
        font-size: 34px;
      }

      body.page-data .dataset-icon{
        width: 66px;
        height: 66px;
        border-radius: 20px;
      }

      body.page-data .dataset-icon svg{
        width: 28px;
        height: 28px;
      }

      body.page-data .table-controls{
        grid-template-columns: 1fr;
      }

      body.page-data .stack-row,
body.page-data .mini-row{
        grid-template-columns: 1fr;
      }

      body.page-data .donut-wrap{
        grid-template-columns: 1fr;
      }

      body.page-data .state-map{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      body.page-data .sw-footer{
        padding: 52px 0 58px;
      }

      body.page-data .sw-footer-brand p{
        font-size: 18px;
      }
    }
  


/* ===== advice.html extracted styles ===== */

    body.page-advice{
      --sw-bg: #f5f3f0;
      --sw-card: #faf8f6;
      --sw-card-2: #efebe5;
      --sw-card-3: #e9e5df;
      --sw-text: #58443f;
      --sw-muted: #8f786f;
      --sw-border: #cdbfb2;
      --sw-pink: #de998c;
      --sw-pink-2: #e8d5d3;
      --sw-green: #dfe7df;
      --sw-green-ink: #a7bcae;
      --sw-peach: #edd8d4;
      --sw-peach-ink: #cfa59d;
      --sw-blue: #dbe7ee;
      --sw-blue-ink: #a7c2d4;
      --sw-yellow: #ebe4d6;
      --sw-yellow-ink: #d8bb72;
      --sw-shadow: 0 12px 30px rgba(86,67,65,.08);
      --sw-shadow-sm: 0 4px 0 rgba(86,67,65,.08);
      --sw-shadow-md: 0 6px 0 rgba(86,67,65,.09);
      --sw-container: 1280px;
    }

    body.page-advice *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }

    body.page-advice{
      margin: 0;
      background: var(--sw-bg);
      color: var(--sw-text);
      font-family: "Nunito", sans-serif;
      overflow-x: hidden;
    }

    body.page-advice a{
      text-decoration: none;
      color: inherit;
    }

    body.page-advice button{
      font: inherit;
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
      padding: 0;
    }

    body.page-advice svg{
      width: 1em;
      height: 1em;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    body.page-advice .sw-container{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
    }

    body.page-advice .sw-divider{
      width: 100%;
      height: 4px;
      background: var(--sw-border);
      box-shadow: 0 1px 0 rgba(255,255,255,.7);
    }

    body.page-advice .sw-header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(245,243,240,.96);
      backdrop-filter: blur(10px);
    }

    body.page-advice .sw-header-inner{
      width: min(var(--sw-container), calc(100% - 48px));
      margin: 0 auto;
      min-height: 102px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    body.page-advice .sw-logo-wrap{
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    body.page-advice .sw-logo-badge{
      width: 62px;
      height: 62px;
      border-radius: 19px;
      background: var(--sw-pink);
      color: var(--sw-text);
      display: grid;
      place-items: center;
      box-shadow: var(--sw-shadow-sm), 0 8px 16px rgba(86,67,65,.05);
    }

    body.page-advice .sw-logo-badge svg{
      width: 31px;
      height: 31px;
    }

    body.page-advice .sw-logo-badge.small{
      width: 54px;
      height: 54px;
      border-radius: 17px;
    }

    body.page-advice .sw-logo-text{
      font-size: 29px;
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--sw-text);
    }

    body.page-advice .sw-logo-text span{
      color: var(--sw-pink);
    }

    body.page-advice .sw-nav{
      flex: 1;
      max-width: 840px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,.76);
      border: 4px solid var(--sw-border);
      border-radius: 999px;
      padding: 10px;
      box-shadow: 0 6px 16px rgba(86,67,65,.05);
      overflow-x: auto;
    }

    body.page-advice .sw-nav::-webkit-scrollbar{
      display: none;
    }

    body.page-advice .sw-nav-link{
      flex: 1 0 auto;
      min-width: max-content;
      height: 50px;
      padding: 0 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 800;
      color: #856f67;
      transition: .2s ease;
    }

    body.page-advice .sw-nav-link svg{
      width: 20px;
      height: 20px;
    }

    body.page-advice .sw-nav-link.active{
      background: var(--sw-pink);
      color: var(--sw-text);
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.08);
    }

    body.page-advice .sw-nav-link:hover{
      background: rgba(224,160,149,.14);
    }

    body.page-advice .advice-main{
      padding: 56px 0 80px;
    }

    body.page-advice .hero{
      text-align: center;
      margin-bottom: 38px;
    }

    body.page-advice .hero-icon{
      width: 128px;
      height: 128px;
      margin: 0 auto 24px;
      border-radius: 36px;
      background: #eee4e4;
      color: var(--sw-text);
      display: grid;
      place-items: center;
      box-shadow: 0 8px 0 rgba(205,191,178,.28), 0 14px 26px rgba(86,67,65,.06);
      transform: rotate(-2deg);
    }

    body.page-advice .hero-icon svg{
      width: 56px;
      height: 56px;
    }

    body.page-advice .hero h1{
      margin: 0 0 24px;
      font-size: clamp(48px, 6vw, 86px);
      line-height: .96;
      letter-spacing: -.06em;
      font-weight: 900;
    }

    body.page-advice .hero-card{
      width: min(740px, 100%);
      margin: 0 auto;
      background: rgba(255,255,255,.62);
      border: 5px solid var(--sw-border);
      border-radius: 30px;
      padding: 26px 30px;
      box-shadow: 0 8px 18px rgba(86,67,65,.04);
      font-size: 20px;
      line-height: 1.75;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-advice .accordion-stack{
      width: min(950px, 100%);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 26px;
    }

    body.page-advice .accordion{
      background: rgba(255,255,255,.65);
      border: 5px solid var(--sw-border);
      border-radius: 48px;
      box-shadow: var(--sw-shadow);
      overflow: hidden;
      transition: transform .18s ease;
    }

    body.page-advice .accordion:hover{
      transform: translateY(-1px);
    }

    body.page-advice .accordion-head{
      width: 100%;
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 28px 30px;
      text-align: left;
    }

    body.page-advice .acc-icon{
      width: 84px;
      height: 84px;
      border-radius: 24px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow: inset 0 -4px 0 rgba(86,67,65,.06);
    }

    body.page-advice .acc-icon svg{
      width: 40px;
      height: 40px;
    }

    body.page-advice .acc-icon.green{
      background: var(--sw-green);
      color: var(--sw-green-ink);
    }

    body.page-advice .acc-icon.peach{
      background: var(--sw-peach);
      color: var(--sw-peach-ink);
    }

    body.page-advice .acc-icon.blue{
      background: var(--sw-blue);
      color: var(--sw-blue-ink);
    }

    body.page-advice .acc-icon.pink{
      background: #f0dddd;
      color: #d5a0a4;
    }

    body.page-advice .acc-icon.yellow{
      background: var(--sw-yellow);
      color: var(--sw-yellow-ink);
    }

    body.page-advice .acc-copy{
      min-width: 0;
      flex: 1;
    }

    body.page-advice .acc-title{
      font-size: clamp(24px, 3vw, 46px);
      line-height: 1.06;
      font-weight: 900;
      letter-spacing: -.04em;
      margin-bottom: 6px;
    }

    body.page-advice .acc-sub{
      font-size: 16px;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-advice .acc-arrow{
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 4px solid var(--sw-border);
      background: rgba(255,255,255,.75);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      transition: transform .24s ease;
    }

    body.page-advice .acc-arrow svg{
      width: 25px;
      height: 25px;
    }

    body.page-advice .accordion.open .acc-arrow{
      transform: rotate(180deg);
    }

    body.page-advice .accordion-body{
      max-height: 0;
      overflow: hidden;
      transition: max-height .38s ease;
      border-top: 0 solid transparent;
    }

    body.page-advice .accordion.open .accordion-body{
      border-top: 4px solid rgba(205,191,178,.62);
    }

    body.page-advice .accordion-inner{
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    body.page-advice .tip-card{
      background: var(--sw-card-2);
      border-radius: 30px;
      padding: 24px 28px;
      display: flex;
      align-items: flex-start;
      gap: 18px;
      box-shadow: inset 0 0 0 3px rgba(205,191,178,.28);
    }

    body.page-advice .tip-check{
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 3px solid rgba(205,191,178,.9);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      margin-top: 2px;
      background: rgba(255,255,255,.35);
    }

    body.page-advice .tip-check svg{
      width: 22px;
      height: 22px;
    }

    body.page-advice .tip-check.green{ color: #a7bcae; }
    body.page-advice .tip-check.peach{ color: #cfa59d; }
    body.page-advice .tip-check.blue{ color: #a7c2d4; }
    body.page-advice .tip-check.pink{ color: #d5a0a4; }
    body.page-advice .tip-check.yellow{ color: #d8bb72; }

    body.page-advice .tip-content{
      min-width: 0;
      flex: 1;
    }

    body.page-advice .tip-title{
      font-size: clamp(22px, 2.8vw, 34px);
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: -.03em;
      margin-bottom: 12px;
    }

    body.page-advice .tip-text{
      font-size: 18px;
      line-height: 1.7;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-advice .tip-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      border: 2px solid rgba(205,191,178,.95);
      background: rgba(255,255,255,.65);
      color: #9a847b;
      font-size: 13px;
      font-weight: 900;
    }

    body.page-advice .tip-pill svg{
      width: 15px;
      height: 15px;
    }

    body.page-advice .remember-wrap{
      width: min(950px, 100%);
      margin: 26px auto 0;
      position: relative;
    }

    body.page-advice .remember-badge{
      position: absolute;
      right: -18px;
      top: -18px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 5px solid var(--sw-border);
      background: rgba(255,255,255,.9);
      color: var(--sw-pink);
      display: grid;
      place-items: center;
      box-shadow: 0 8px 18px rgba(86,67,65,.05);
    }

    body.page-advice .remember-badge svg{
      width: 28px;
      height: 28px;
    }

    body.page-advice .remember-card{
      background: #f0ddda;
      border: 5px solid #e4c2bc;
      border-radius: 58px;
      padding: 54px 50px 50px;
      text-align: center;
      box-shadow: var(--sw-shadow);
    }

    body.page-advice .remember-card h2{
      margin: 0 0 18px;
      font-size: clamp(36px, 4vw, 58px);
      line-height: 1;
      letter-spacing: -.04em;
      font-weight: 900;
    }

    body.page-advice .remember-card p{
      max-width: 760px;
      margin: 0 auto;
      font-size: 22px;
      line-height: 1.75;
      font-weight: 700;
      color: var(--sw-text);
    }

    body.page-advice .sw-footer{
      padding: 74px 0 80px;
      background: #f7f6f4;
      border-top: 4px solid var(--sw-border);
    }

    body.page-advice .sw-footer-inner{
      display: grid;
      grid-template-columns: 1.2fr 1fr auto;
      align-items: center;
      gap: 34px;
    }

    body.page-advice .sw-footer-logo-row{
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }

    body.page-advice .sw-footer-title{
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    body.page-advice .sw-footer-brand p{
      max-width: 470px;
      margin: 0;
      font-size: 22px;
      line-height: 1.6;
      font-weight: 700;
      color: var(--sw-muted);
    }

    body.page-advice .sw-footer-links{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    body.page-advice .sw-footer-links a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 110px;
      height: 54px;
      padding: 0 22px;
      border-radius: 999px;
      background: #e8e2d8;
      color: #8d756d;
      font-size: 16px;
      font-weight: 800;
    }

    body.page-advice .sw-footer-face{
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: #f2dfe7;
      border: 5px solid #ead2dc;
      display: grid;
      place-items: center;
      color: var(--sw-text);
    }

    body.page-advice .sw-footer-face svg{
      width: 30px;
      height: 30px;
    }

    @media (max-width: 980px){
      body.page-advice .sw-header-inner{
        flex-direction: column;
        justify-content: center;
        padding: 14px 0;
        min-height: auto;
      }

      body.page-advice .sw-nav{
        width: 100%;
        max-width: none;
      }

      body.page-advice .sw-footer-inner{
        grid-template-columns: 1fr;
        text-align: center;
      }

      body.page-advice .sw-footer-brand{
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      body.page-advice .remember-badge{
        right: 8px;
      }
    }

    @media (max-width: 760px){
      body.page-advice .sw-container,
body.page-advice .sw-header-inner{
        width: min(100%, calc(100% - 24px));
      }

      body.page-advice .advice-main{
        padding-top: 34px;
      }

      body.page-advice .hero-icon{
        width: 96px;
        height: 96px;
        border-radius: 28px;
      }

      body.page-advice .hero-icon svg{
        width: 42px;
        height: 42px;
      }

      body.page-advice .hero h1{
        font-size: 50px;
      }

      body.page-advice .hero-card{
        padding: 20px 18px;
        font-size: 17px;
      }

      body.page-advice .accordion{
        border-radius: 32px;
      }

      body.page-advice .accordion-head{
        padding: 18px 16px;
        gap: 14px;
      }

      body.page-advice .acc-icon{
        width: 64px;
        height: 64px;
        border-radius: 18px;
      }

      body.page-advice .acc-icon svg{
        width: 30px;
        height: 30px;
      }

      body.page-advice .acc-title{
        font-size: 28px;
      }

      body.page-advice .acc-sub{
        font-size: 14px;
      }

      body.page-advice .acc-arrow{
        width: 48px;
        height: 48px;
      }

      body.page-advice .accordion-inner{
        padding: 18px 16px 20px;
      }

      body.page-advice .tip-card{
        padding: 18px 16px;
        border-radius: 22px;
        gap: 12px;
      }

      body.page-advice .tip-title{
        font-size: 22px;
      }

      body.page-advice .tip-text{
        font-size: 16px;
      }

      body.page-advice .remember-card{
        border-radius: 34px;
        padding: 36px 20px 32px;
      }

      body.page-advice .remember-badge{
        width: 52px;
        height: 52px;
        right: 8px;
        top: -12px;
      }

      body.page-advice .remember-card p{
        font-size: 18px;
      }

      body.page-advice .sw-footer{
        padding: 52px 0 58px;
      }

      body.page-advice .sw-footer-brand p{
        font-size: 18px;
      }
    }
  
/* ===== survey.html custom styles ===== */
body.page-survey{
  --sw-bg: #f5f3f0;
  --sw-card: #faf8f6;
  --sw-card-2: #efebe5;
  --sw-card-3: #e9e5df;
  --sw-text: #58443f;
  --sw-muted: #8f786f;
  --sw-border: #cdbfb2;
  --sw-pink: #de998c;
  --sw-pink-2: #e8d5d3;
  --sw-green: #dfe7df;
  --sw-green-ink: #a7bcae;
  --sw-peach: #edd8d4;
  --sw-peach-ink: #cfa59d;
  --sw-blue: #dbe7ee;
  --sw-blue-ink: #a7c2d4;
  --sw-yellow: #ebe4d6;
  --sw-yellow-ink: #d8bb72;
  --sw-shadow: 0 12px 30px rgba(86,67,65,.08);
  --sw-shadow-sm: 0 4px 0 rgba(86,67,65,.08);
  --sw-shadow-md: 0 6px 0 rgba(86,67,65,.09);
  --sw-container: 1280px;
  margin: 0;
  background: var(--sw-bg);
  color: var(--sw-text);
  font-family: "Nunito", sans-serif;
  overflow-x: hidden;
}
body.page-survey *{ box-sizing: border-box; }
body.page-survey a{ text-decoration: none; color: inherit; }
body.page-survey button,
body.page-survey input,
body.page-survey select,
body.page-survey textarea{ font: inherit; color: inherit; }
body.page-survey button{ cursor: pointer; }
body.page-survey svg{
  width: 1em;
  height: 1em;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
body.page-survey .sw-container{
  width: min(var(--sw-container), calc(100% - 48px));
  margin: 0 auto;
}
body.page-survey .survey-main{
  padding: 52px 0 84px;
}
body.page-survey .survey-hero{
  text-align: center;
  margin-bottom: 34px;
}
body.page-survey .survey-icon{
  width: 128px;
  height: 128px;
  margin: 0 auto 24px;
  border-radius: 36px;
  background: #eee4e4;
  color: var(--sw-text);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 0 rgba(205,191,178,.28), 0 14px 26px rgba(86,67,65,.06);
  transform: rotate(-2deg);
}
body.page-survey .survey-icon svg{
  width: 56px;
  height: 56px;
}
body.page-survey .survey-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--sw-green);
  color: #6f8174;
  font-size: 16px;
  font-weight: 900;
  border: 3px solid rgba(205,191,178,.72);
  margin: 0 0 22px;
}
body.page-survey .survey-hero h1{
  margin: 0 0 20px;
  font-size: clamp(48px, 6vw, 86px);
  line-height: .96;
  letter-spacing: -.06em;
  font-weight: 900;
}
body.page-survey .survey-lede{
  width: min(920px, 100%);
  margin: 0 auto;
  background: rgba(255,255,255,.62);
  border: 5px solid var(--sw-border);
  border-radius: 30px;
  padding: 26px 30px;
  box-shadow: 0 8px 18px rgba(86,67,65,.04);
  font-size: 20px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--sw-muted);
}
body.page-survey .survey-shell{
  width: min(1040px, calc(100% - 48px));
}
body.page-survey .survey-form{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
body.page-survey .survey-progress-card,
body.page-survey .survey-section,
body.page-survey .survey-submit-card,
body.page-survey .survey-result{
  background: rgba(255,255,255,.66);
  border: 5px solid var(--sw-border);
  border-radius: 42px;
  box-shadow: var(--sw-shadow);
}
body.page-survey .survey-progress-card{
  padding: 22px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: center;
}
body.page-survey .mini-label{
  display: block;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 900;
  color: #8c766d;
  margin-bottom: 7px;
}
body.page-survey .survey-progress-card strong{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.03em;
}
body.page-survey .survey-progress-bar{
  height: 28px;
  border-radius: 999px;
  border: 4px solid var(--sw-border);
  background: #f3eee7;
  overflow: hidden;
}
body.page-survey .survey-progress-bar span{
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #e8b1aa, var(--sw-pink));
  border-radius: 999px;
  transition: width .22s ease;
}
body.page-survey .survey-section{
  padding: 30px;
}
body.page-survey .survey-section legend{
  float: left;
  width: 100%;
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 900;
}
body.page-survey .section-note{
  clear: both;
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 700;
  color: var(--sw-muted);
}
body.page-survey .survey-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
body.page-survey .survey-field{
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--sw-card-2);
  border-radius: 28px;
  padding: 20px;
  box-shadow: inset 0 0 0 3px rgba(205,191,178,.32);
}
body.page-survey .survey-field.wide{
  margin-top: 18px;
}
body.page-survey .survey-field span,
body.page-survey .checkbox-title,
body.page-survey .slider-field span{
  font-size: 16px;
  line-height: 1.45;
  font-weight: 900;
  color: #65504a;
}
body.page-survey .survey-field input,
body.page-survey .survey-field select,
body.page-survey .survey-field textarea{
  width: 100%;
  border: 4px solid var(--sw-border);
  border-radius: 20px;
  background: #fffdf9;
  outline: none;
  font-weight: 800;
}
body.page-survey .survey-field input,
body.page-survey .survey-field select{
  min-height: 58px;
  padding: 0 16px;
}
body.page-survey .survey-field textarea{
  resize: vertical;
  padding: 16px;
  line-height: 1.55;
}
body.page-survey .checkbox-card{
  margin-top: 18px;
  background: var(--sw-card-2);
  border-radius: 28px;
  padding: 20px;
  box-shadow: inset 0 0 0 3px rgba(205,191,178,.32);
}
body.page-survey .checkbox-title{
  display: block;
  margin-bottom: 14px;
}
body.page-survey .checkbox-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body.page-survey .checkbox-grid label{
  min-height: 48px;
  border-radius: 18px;
  background: #fffdf9;
  border: 3px solid rgba(205,191,178,.75);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 900;
}
body.page-survey .slider-stack{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
body.page-survey .slider-field{
  background: var(--sw-card-2);
  border-radius: 26px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 14px;
  align-items: center;
  box-shadow: inset 0 0 0 3px rgba(205,191,178,.32);
}
body.page-survey .slider-field span{
  grid-column: 1 / -1;
}
body.page-survey .slider-field input{
  width: 100%;
  accent-color: var(--sw-pink);
}
body.page-survey .slider-field output{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fffdf9;
  border: 3px solid var(--sw-border);
  font-weight: 900;
}
body.page-survey .survey-submit-card{
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  background: #f0ddda;
  border-color: #e4c2bc;
}
body.page-survey .survey-submit-card h2{
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 900;
}
body.page-survey .survey-submit-card p{
  margin: 0;
  color: #7f665f;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
}
body.page-survey .survey-submit{
  min-height: 70px;
  padding: 0 30px;
  border-radius: 999px;
  background: #6f5750;
  color: #fff;
  border: 0;
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(86,67,65,.18);
}
body.page-survey .survey-result{
  padding: 24px 28px;
  text-align: center;
}
body.page-survey .survey-result h3{
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 900;
}
body.page-survey .survey-result p{
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--sw-muted);
}
@media (max-width: 900px){
  body.page-survey .survey-progress-card,
  body.page-survey .survey-submit-card{
    grid-template-columns: 1fr;
  }
  body.page-survey .survey-grid,
  body.page-survey .slider-stack{
    grid-template-columns: 1fr;
  }
  body.page-survey .checkbox-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  body.page-survey .survey-shell,
  body.page-survey .sw-container{
    width: min(100% - 28px, var(--sw-container));
  }
  body.page-survey .survey-section,
  body.page-survey .survey-submit-card{
    padding: 22px;
    border-radius: 32px;
  }
  body.page-survey .checkbox-grid{
    grid-template-columns: 1fr;
  }
}



/* ==================== index.html ==================== */

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ScrollWell | Home</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&amp;display=swap" rel="stylesheet"/><link href="styles.css" rel="stylesheet"/>
  

</head>
<body class="page-home sw-body">
<header class="sw-header">
<div class="sw-header-inner">
<a class="sw-logo-wrap" href="index.html">
<div class="sw-logo-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-logo-text">Scroll<span>Well</span></div>
</a>
<nav class="sw-nav">
<a class="sw-nav-link active" href="index.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M3 11.5 12 4l9 7.5"></path>
<path d="M5.5 10.5V20h13V10.5"></path>
</svg>
<span>Home</span>
</a>
<a class="sw-nav-link" href="game.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="10" rx="5" width="17" x="3.5" y="8"></rect>
<path d="M8 13h4M10 11v4M16.5 12.2h.01M18.5 14.2h.01"></path>
</svg>
<span>Simulator</span>
</a>
<a class="sw-nav-link" href="scroll.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="17" rx="2.5" width="11" x="6.5" y="3.5"></rect>
<path d="M9 17.3h6"></path>
</svg>
<span>For You</span>
</a>
<a class="sw-nav-link" href="data.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 19V9"></path>
<path d="M12 19V5"></path>
<path d="M19 19v-8"></path>
</svg>
<span>Research</span>
</a>
<a class="sw-nav-link" href="advice.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 3c-3.4 0-6 2.2-6 5.5 0 2.2 1.1 3.6 2.6 4.6V17l3.4-1.8 3.4 1.8v-3.9C16.9 12.1 18 10.7 18 8.5 18 5.2 15.4 3 12 3Z"></path>
<path d="M10 8h.01M14 8h.01M10.2 11.3c.5.4 1.1.7 1.8.7s1.3-.3 1.8-.7"></path>
</svg>
<span>Advice</span>
</a>

<a aria-label="Open survey page" class="sw-nav-link" href="survey.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 11l2 2 4-4"></path>
<path d="M8 4h8"></path>
<path d="M9 3h6a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1V5a2 2 0 0 1 2-2z"></path>
</svg>
        Survey
      </a></nav>
</div>
<div class="sw-divider"></div>
</header>
<main>
<section class="sw-section sw-hero">
<div class="sw-container sw-hero-grid">
<div class="sw-hero-copy">
<div class="sw-pill-label">
<span class="sw-pill-dot"></span>
<span>Take control of your digital life</span>
</div>
<h1 class="sw-hero-title">
            Scroll <span class="sw-accent-word">Well,</span><br/>
            Live Better.
          </h1>
<p class="sw-hero-text">
            Understand how your phone habits affect your mental health through
            interactive games and bite-sized insights. No lectures, just real
            data and better vibes.
          </p>
<div class="sw-hero-buttons">
<a class="sw-btn sw-btn-primary" href="game.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="10" rx="5" width="17" x="3.5" y="8"></rect>
<path d="M8 13h4M10 11v4M16.5 12.2h.01M18.5 14.2h.01"></path>
</svg>
<span>Play the Simulator</span>
</a>
<a class="sw-btn sw-btn-secondary" href="scroll.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="17" rx="2.5" width="11" x="6.5" y="3.5"></rect>
<path d="M9 17.3h6"></path>
</svg>
<span>Explore Feed</span>
</a>
</div>
</div>
<div class="sw-hero-card-wrap">
<div class="sw-hero-card">
<div class="sw-window-top">
<div class="sw-window-dots">
<span class="dot pink"></span>
<span class="dot cream"></span>
<span class="dot green"></span>
</div>
<div class="sw-window-badge">SCROLLWELL APP</div>
</div>
<div class="sw-chat sw-chat-right">
<p class="sw-chat-label">DID YOU KNOW?</p>
<p>There's a nearly 2-hour gap in sleep between students with Negative vs Positive social media outcomes.</p>
</div>
<div class="sw-chat sw-chat-left">
<p class="sw-chat-label">FUN FACT</p>
<p>LinkedIn users tend to report more positive outcomes compared to other platforms.</p>
</div>
<div class="sw-score-card">
<div class="sw-score-left">
<div class="sw-score-icon">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 3c4.8 0 8 3.1 8 7.9 0 5.7-4.2 7.8-8 10.1-3.8-2.3-8-4.4-8-10.1C4 6.1 7.2 3 12 3Z"></path>
<path d="M9.7 11.8h1.7l1-2.2 1.5 4 1-2h1.4"></path>
</svg>
</div>
<div class="sw-score-meta">
<div class="sw-score-title">Mental Health Score</div>
<div class="sw-progress">
<span></span>
</div>
</div>
</div>
<div class="sw-score-number">7.8</div>
</div>
</div>
</div>
</div>
<div class="sw-scroll-arrow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 5v14"></path>
<path d="m6 13 6 6 6-6"></path>
</svg>
</div>
</section>
<section class="sw-section sw-hook">
<div class="sw-container sw-hook-inner">
<div class="sw-hook-bar"></div>
<h2 class="sw-section-title">The internet is great, but...</h2>
<p class="sw-hook-text">
          We spend an average of <span class="sw-underlined">5.2 hours a day</span> on social media.
          Heavy users (7+ hrs) report a <span class="sw-underlined">40% drop</span> in mental health scores.
          But it's not just about screen time—it's about <em>how</em> and <em>where</em> we spend it.
        </p>
<div class="sw-stat-grid">
<article class="sw-stat-card">
<div class="sw-stat-badge peach">2hr Gap</div>
<h3>Sleep Quality</h3>
<p>Between positive and negative outcomes.</p>
</article>
<article class="sw-stat-card">
<div class="sw-stat-badge pink">74%</div>
<h3>Platform Matters</h3>
<p>Negative reporting rate for heavy short-form video users.</p>
</article>
<article class="sw-stat-card">
<div class="sw-stat-badge lilac">+ Health</div>
<h3>The Good News</h3>
<p>Curated use can actually improve connection and inspiration.</p>
</article>
</div>
</div>
</section>
<section class="sw-section sw-sim">
<div class="sw-container sw-sim-grid">
<div class="sw-sim-copy">
<div class="sw-sim-icon">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="10" rx="5" width="17" x="3.5" y="8"></rect>
<path d="M8 13h4M10 11v4M16.5 12.2h.01M18.5 14.2h.01"></path>
</svg>
</div>
<h2 class="sw-section-title left">Live a day in the life.</h2>
<p class="sw-sim-text">
            Our interactive simulator lets you control a 24-hour day.
            Choose when to scroll, when to study, when to sleep, and watch your
            health stats react in real-time based on actual research data.
          </p>
<a class="sw-btn sw-btn-dark" href="game.html">
<span>Play Simulator</span>
<span class="arrow">→</span>
</a>
</div>
<div class="sw-sim-card-wrap">
<div class="sw-sim-card">
<div class="sw-data-tag">Real Data!</div>
<div class="sw-metric-box">
<div class="sw-metric-top">
<span>Self Confidence</span>
<span class="sw-chip pink">Decreasing</span>
</div>
<div class="sw-metric-bar"><span class="fill pink-1"></span></div>
</div>
<div class="sw-metric-box">
<div class="sw-metric-top">
<span>FOMO Level</span>
<span class="sw-chip pink">High</span>
</div>
<div class="sw-metric-bar"><span class="fill pink-2"></span></div>
</div>
<div class="sw-metric-box">
<div class="sw-metric-top">
<span>Sleep Quality</span>
<span class="sw-chip green">Good</span>
</div>
<div class="sw-metric-bar"><span class="fill green"></span></div>
</div>
</div>
</div>
</div>
</section>
<section class="sw-section sw-final">
<div class="sw-container">
<div class="sw-final-card">
<h2>Ready to scroll well?</h2>
<p>
            Join thousands of students who are learning to balance their
            digital diets without giving up the internet.
          </p>
<a class="sw-final-btn" href="scroll.html">Explore the Feed</a>
</div>
</div>
</section>
</main>
<div class="sw-divider"></div>
<footer class="sw-footer">
<div class="sw-container sw-footer-inner">
<div class="sw-footer-brand">
<div class="sw-footer-logo-row">
<div class="sw-logo-badge small">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-footer-title">ScrollWell</div>
</div>
<p>
          Empowering healthy digital habits through
          interactive education and research-backed insights.
        </p>
</div>
<div class="sw-footer-links">
<a href="game.html">Game</a>
<a href="scroll.html">Feed</a>
<a href="data.html">Research</a>
<a href="advice.html">Advice</a>
</div>
<div class="sw-footer-face">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="8"></circle>
<path d="M9 14.2c.8.9 1.8 1.3 3 1.3s2.2-.4 3-1.3"></path>
<path d="M9.2 10.3h.01M14.8 10.3h.01"></path>
</svg>
</div>
</div>
</footer>
<script>
    function icon(name, cls = "svg-icon") {
      const icons = {
        heartHandshake: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 11 8 9a3 3 0 0 0-4 4l2 2"/><path d="M14 13l2 2a3 3 0 0 0 4-4l-2-2"/><path d="M7.5 12.5 12 8l4.5 4.5"/><path d="M9 15l3 3 3-3"/><path d="M12 8V4"/></svg>`,
        gamepad: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="9" width="18" height="10" rx="4"/><path d="M8 14h4"/><path d="M10 12v4"/><path d="M16 13h.01"/><path d="M18 15h.01"/></svg>`,
        scroll: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h11"/><path d="M8 12h11"/><path d="M8 18h11"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg>`,
        chart: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15v-4"/><path d="M12 15V8"/><path d="M17 15v-7"/></svg>`,
        brain: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3a3.5 3.5 0 0 0-2.9 5.45A3.5 3.5 0 0 0 5 15a3.5 3.5 0 0 0 5 3.16"/><path d="M14.5 3a3.5 3.5 0 0 1 2.9 5.45A3.5 3.5 0 0 1 19 15a3.5 3.5 0 0 1-5 3.16"/><path d="M12 3v18"/><path d="M9 8h3"/><path d="M12 16h3"/></svg>`,
        menu: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>`,
        smile: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 10h.01"/><path d="M15 10h.01"/></svg>`,
        arrowRight: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>`,
        arrowDown: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m12 5 0 14"/><path d="m19 12-7 7-7-7"/></svg>`,
        clock: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>`,
        moon: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a7 7 0 1 0 9 9A9 9 0 1 1 12 3z"/></svg>`,
        users: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
        book: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>`,
        dumbbell: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14.4 14.4 9.6 9.6"/><path d="M18.657 17.243a2 2 0 1 1-2.828 2.828l-1.415-1.414a2 2 0 1 1 2.828-2.829z"/><path d="m21.5 21.5-1.4-1.4"/><path d="M3.5 3.5 4.9 4.9"/><path d="M8.172 5.343a2 2 0 1 1-2.829 2.829L3.93 6.757A2 2 0 1 1 6.757 3.93z"/><path d="m14.4 9.6 1.4-1.4"/><path d="m9.6 14.4-1.4 1.4"/></svg>`,
        utensil: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v7c0 2 1.5 3 3 3s3-1 3-3V2"/><path d="M6 2v20"/><path d="M14 2v8c0 1.1.9 2 2 2h5"/><path d="M18 2v20"/></svg>`,
        briefcase: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M2 12h20"/></svg>`,
        heart: `<svg class="${cls}" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 21s-6.7-4.35-9.33-8.12C.6 10.3 1.5 6.7 4.62 5.3 7.1 4.2 9.66 5.27 12 7.48c2.34-2.2 4.9-3.27 7.38-2.17 3.12 1.4 4.02 5 .95 7.58C18.7 16.65 12 21 12 21z"/></svg>`,
        minus: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"><path d="M5 12h14"/></svg>`,
        plus: `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>`
      };
      return icons[name] || "";
    }

    function $(id) {
      return document.getElementById(id);
    }

    function renderHeader(activePage) {
      const host = $("site-header");
      if (!host) return;

      const links = [
        ["index.html", "Home", "heartHandshake"],
        ["game.html", "Simulator", "gamepad"],
        ["scroll.html", "For You", "scroll"],
        ["data.html", "Research", "chart"],
        ["advice.html", "Advice", "brain"]
      ];

      const desktopLinks = links.map(([href, label, ic]) => `
        <a class="nav-link ${activePage === href ? "active" : ""}" href="${href}">
          ${icon(ic)}
          <span>${label}</span>
        </a>
      `).join("");

      const mobileLinks = links.map(([href, label, ic]) => `
        <a class="${activePage === href ? "active" : ""}" href="${href}">
          ${icon(ic, "svg-icon lg")}
          <span>${label}</span>
        </a>
      `).join("");

      host.innerHTML = `
        <nav class="navbar">
          <div class="container nav-inner">
            <a class="brand" href="index.html">
              <span class="brand-box">${icon("heartHandshake", "svg-icon lg")}</span>
              <span>Scroll<span class="brand-pink">Well</span></span>
            </a>
            <div class="nav-pills">${desktopLinks}</div>
            <button class="mobile-toggle" aria-label="Open menu">
              ${icon("menu", "svg-icon lg")}
            </button>
          </div>
          <div class="mobile-menu">
            <div class="container">${mobileLinks}</div>
          </div>
        </nav>
      `;

      const toggle = host.querySelector(".mobile-toggle");
      const menu = host.querySelector(".mobile-menu");
      if (toggle && menu) {
        toggle.addEventListener("click", () => {
          menu.classList.toggle("open");
        });
      }
    }

    function renderFooter() {
      const host = $("site-footer");
      if (!host) return;

      host.innerHTML = `
        <footer>
          <div class="container footer-inner">
            <div>
              <a class="brand" href="index.html">
                <span class="brand-box">${icon("heartHandshake", "svg-icon lg")}</span>
                <span>ScrollWell</span>
              </a>
              <p style="max-width:360px;font-size:1rem;font-weight:800;color:var(--muted-foreground);margin:16px 0 0">
                Empowering healthy digital habits through interactive education and research-backed insights.
              </p>
            </div>
            <div class="footer-links">
              <a href="game.html">Game</a>
              <a href="scroll.html">Feed</a>
              <a href="data.html">Research</a>
              <a href="advice.html">Advice</a>
            </div>
            <div class="footer-face">${icon("smile", "svg-icon lg")}</div>
          </div>
        </footer>
      `;
    }

    function initHomePage() {
      const reveals = document.querySelectorAll(".reveal");
      if (!reveals.length) return;

      const observer = new IntersectionObserver(
        entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.classList.add("visible");
            }
          });
        },
        { threshold: 0.15 }
      );

      reveals.forEach(el => observer.observe(el));
    }

    function initGamePage() {
      const intro = $("game-intro");
      const play = $("game-play");
      const results = $("game-results");

      if (!intro || !play) return;

      const activitiesBase = [
        {
          id: "tiktok",
          label: "TikTok",
          icon: "scroll",
          bg: "var(--muted)",
          color: "var(--foreground)",
          max: 8,
          effects: { sleep: -12, fomo: 8, confidence: -10, happiness: -5, motivation: -8, sadness: 6, hunger: 0, social: -4 }
        },
        {
          id: "instagram",
          label: "Instagram",
          icon: "heart",
          bg: "var(--accent)",
          color: "var(--accent-foreground)",
          max: 8,
          effects: { sleep: -10, fomo: 10, confidence: -12, happiness: -4, motivation: -5, sadness: 7, hunger: 0, social: -2 }
        },
        {
          id: "snapchat",
          label: "Snapchat",
          icon: "scroll",
          bg: "color-mix(in srgb,var(--chart-4) 20%, transparent)",
          color: "var(--chart-4)",
          max: 8,
          effects: { sleep: -8, fomo: 14, confidence: -6, happiness: -3, motivation: -4, sadness: 5, hunger: 0, social: 2 }
        },
        {
          id: "youtube",
          label: "YouTube",
          icon: "gamepad",
          bg: "color-mix(in srgb,var(--destructive) 20%, transparent)",
          color: "var(--destructive)",
          max: 8,
          effects: { sleep: -6, fomo: 3, confidence: -2, happiness: 2, motivation: -3, sadness: 1, hunger: 0, social: -2 }
        },
        {
          id: "pinterest",
          label: "Pinterest",
          icon: "heart",
          bg: "color-mix(in srgb,var(--destructive) 20%, transparent)",
          color: "var(--destructive)",
          max: 6,
          effects: { sleep: -3, fomo: 1, confidence: 2, happiness: 3, motivation: 4, sadness: -2, hunger: 0, social: 0 }
        },
        {
          id: "linkedin",
          label: "LinkedIn",
          icon: "briefcase",
          bg: "color-mix(in srgb,var(--chart-5) 20%, transparent)",
          color: "var(--chart-5)",
          max: 4,
          effects: { sleep: -2, fomo: 2, confidence: 3, happiness: 1, motivation: 6, sadness: -1, hunger: 0, social: 2 }
        },
        {
          id: "exercise",
          label: "Exercise",
          icon: "dumbbell",
          bg: "color-mix(in srgb,var(--chart-2) 20%, transparent)",
          color: "var(--chart-2)",
          max: 4,
          effects: { sleep: 8, fomo: -5, confidence: 10, happiness: 12, motivation: 10, sadness: -8, hunger: 8, social: 3 }
        },
        {
          id: "eating",
          label: "Eating",
          icon: "utensil",
          bg: "color-mix(in srgb,var(--chart-4) 20%, transparent)",
          color: "var(--chart-4)",
          max: 4,
          effects: { sleep: 2, fomo: 0, confidence: 2, happiness: 5, motivation: 3, sadness: -2, hunger: -20, social: 4 }
        },
        {
          id: "sleep",
          label: "Sleeping",
          icon: "moon",
          bg: "color-mix(in srgb,var(--chart-5) 20%, transparent)",
          color: "var(--chart-5)",
          max: 10,
          effects: { sleep: 15, fomo: -3, confidence: 5, happiness: 6, motivation: 8, sadness: -5, hunger: 3, social: 0 }
        },
        {
          id: "socializing",
          label: "Socializing",
          icon: "users",
          bg: "color-mix(in srgb,var(--secondary) 20%, transparent)",
          color: "var(--secondary-foreground)",
          max: 6,
          effects: { sleep: -2, fomo: -10, confidence: 8, happiness: 10, motivation: 5, sadness: -8, hunger: 2, social: 15 }
        },
        {
          id: "studying",
          label: "Studying",
          icon: "book",
          bg: "color-mix(in srgb,var(--chart-1) 20%, transparent)",
          color: "var(--chart-1)",
          max: 8,
          effects: { sleep: -3, fomo: 3, confidence: 5, happiness: -1, motivation: 8, sadness: 1, hunger: 2, social: -2 }
        }
      ];

      const baseStats = {
        sleep: 70,
        fomo: 30,
        confidence: 70,
        happiness: 70,
        motivation: 65,
        sadness: 25,
        hunger: 40,
        social: 60
      };

      const statMeta = {
        sleep: ["Sleep Quality", "var(--chart-2)"],
        fomo: ["FOMO Level", "var(--destructive)"],
        confidence: ["Self Confidence", "var(--primary)"],
        happiness: ["Happiness", "var(--accent)"],
        motivation: ["Motivation", "var(--chart-1)"],
        sadness: ["Sadness", "var(--chart-5)"],
        hunger: ["Hunger", "var(--chart-4)"],
        social: ["Social Connection", "var(--secondary)"]
      };

      let activities = activitiesBase.map(a => ({ ...a, hours: 0 }));

      function remainingHours() {
        return 24 - activities.reduce((sum, a) => sum + a.hours, 0);
      }

      function clamp(value, min, max) {
        return Math.max(min, Math.min(max, value));
      }

      function computeStats() {
        const stats = { ...baseStats };

        activities.forEach(activity => {
          Object.entries(activity.effects).forEach(([key, effect]) => {
            stats[key] = clamp(stats[key] + effect * activity.hours, 0, 100);
          });
        });

        return stats;
      }

      function gameGrade(score) {
        if (score >= 90) return ["A+", "var(--chart-2)"];
        if (score >= 80) return ["A", "var(--chart-2)"];
        if (score >= 70) return ["B", "var(--chart-5)"];
        if (score >= 60) return ["C", "var(--chart-4)"];
        if (score >= 50) return ["D", "var(--destructive)"];
        return ["F", "var(--destructive)"];
      }

      function overall(stats) {
        const positive = stats.sleep + stats.confidence + stats.happiness + stats.motivation + stats.social;
        const negative = (100 - stats.fomo) + (100 - stats.sadness) + (100 - stats.hunger);
        const score = Math.round((positive + negative) / 8);
        const [letter, color] = gameGrade(score);
        return { score, letter, color };
      }

      function renderActivities() {
        const activityList = $("activity-list");
        const remainingBanner = $("remaining-hours");
        const dayProgress = $("day-progress");
        const liveStats = $("live-stats");

        if (!activityList || !remainingBanner || !dayProgress || !liveStats) return;

        const remaining = remainingHours();

        remainingBanner.innerHTML = `${icon("clock")}<span>${remaining}h remaining</span>`;
        remainingBanner.className = `hours-banner ${remaining > 0 ? "hours-good" : "hours-bad"}`;

        dayProgress.style.width = `${((24 - remaining) / 24) * 100}%`;

        activityList.innerHTML = activities.map(a => `
          <div class="activity-row">
            <div class="cat-icon" style="width:56px;height:56px;border-radius:20px;background:${a.bg};color:${a.color}">
              ${icon(a.icon, "svg-icon lg")}
            </div>
            <div class="activity-meta">
              <div class="activity-title">${a.label}</div>
              <div class="activity-sub">Max ${a.max}h</div>
            </div>
            <div class="counter">
              <button class="minus" data-id="${a.id}" data-delta="-1">${icon("minus")}</button>
              <span class="num">${a.hours}</span>
              <button class="plus" data-id="${a.id}" data-delta="1">${icon("plus")}</button>
            </div>
          </div>
        `).join("");

        const stats = computeStats();

        liveStats.innerHTML = Object.entries(statMeta).map(([key, [label, color]]) => `
          <div class="stat-panel">
            <div class="mini-head">
              <span>${label}</span>
              <span>${stats[key]}</span>
            </div>
            <div class="bar">
              <div class="fill" style="width:${stats[key]}%;background:${color}"></div>
            </div>
          </div>
        `).join("");
      }

      function showResults() {
        if (!results) return;

        const finalGrade = $("final-grade");
        const finalScore = $("final-score");
        const resultsStats = $("results-stats");

        if (!finalGrade || !finalScore || !resultsStats) return;

        const stats = computeStats();
        const ov = overall(stats);

        finalGrade.textContent = ov.letter;
        finalGrade.style.color = ov.color;
        finalScore.textContent = `Overall score: ${ov.score}/100`;

        resultsStats.innerHTML = Object.entries(statMeta).map(([key, [label, color]]) => `
          <div class="stat-panel">
            <div class="mini-head">
              <span>${label}</span>
              <span>${stats[key]}</span>
            </div>
            <div class="bar">
              <div class="fill" style="width:${stats[key]}%;background:${color}"></div>
            </div>
          </div>
        `).join("");

        intro.classList.add("hidden");
        play.classList.add("hidden");
        results.classList.remove("hidden");
      }

      const startButton = $("start-game");
      const resetButton = $("reset-game");
      const finishButton = $("finish-game");
      const playAgainButton = $("play-again");
      const activityList = $("activity-list");

      if (startButton) {
        startButton.addEventListener("click", () => {
          intro.classList.add("hidden");
          play.classList.remove("hidden");
          if (results) results.classList.add("hidden");
          renderActivities();
        });
      }

      if (activityList) {
        activityList.addEventListener("click", e => {
          const btn = e.target.closest("button[data-id]");
          if (!btn) return;

          const id = btn.dataset.id;
          const delta = Number(btn.dataset.delta);

          activities = activities.map(activity => {
            if (activity.id !== id) return activity;

            const next = activity.hours + delta;
            if (next < 0 || next > activity.max) return activity;
            if (delta > 0 && remainingHours() <= 0) return activity;

            return { ...activity, hours: next };
          });

          renderActivities();
        });
      }

      if (resetButton) {
        resetButton.addEventListener("click", () => {
          activities = activitiesBase.map(a => ({ ...a, hours: 0 }));
          intro.classList.remove("hidden");
          play.classList.add("hidden");
          if (results) results.classList.add("hidden");
        });
      }

      if (finishButton) {
        finishButton.addEventListener("click", showResults);
      }

      if (playAgainButton) {
        playAgainButton.addEventListener("click", () => {
          activities = activitiesBase.map(a => ({ ...a, hours: 0 }));
          if (results) results.classList.add("hidden");
          intro.classList.remove("hidden");
          play.classList.add("hidden");
        });
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      const activePage = document.body.dataset.page || "";

      renderHeader(activePage);
      renderFooter();

      document.querySelectorAll(".icon-slot").forEach(el => {
        const ic = el.dataset.ic;
        const size = el.classList.contains("lg")
          ? "svg-icon lg"
          : el.classList.contains("xl")
          ? "svg-icon xl"
          : "svg-icon";g
        el.innerHTML = icon(ic, size);
      });

      if (activePage === "index.html") {
        initHomePage();
      }

      if (activePage === "game.html") {
        initGamePage();
      }
    });
  </script>
</body>
</html>


/* ==================== game.html ==================== */

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ScrollWell | Simulator</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&amp;display=swap" rel="stylesheet"/><link href="styles.css" rel="stylesheet"/>
  

</head>
<body class="page-game">
<header class="sw-header">
<div class="sw-header-inner">
<a class="sw-logo-wrap" href="index.html">
<div class="sw-logo-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-logo-text">Scroll<span>Well</span></div>
</a>
<nav class="sw-nav">
<a class="sw-nav-link" href="index.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M3 11.5 12 4l9 7.5"></path>
<path d="M5.5 10.5V20h13V10.5"></path>
</svg>
<span>Home</span>
</a>
<a class="sw-nav-link active" href="game.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="10" rx="5" width="17" x="3.5" y="8"></rect>
<path d="M8 13h4M10 11v4M16.5 12.2h.01M18.5 14.2h.01"></path>
</svg>
<span>Simulator</span>
</a>
<a class="sw-nav-link" href="scroll.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="17" rx="2.5" width="11" x="6.5" y="3.5"></rect>
<path d="M9 17.3h6"></path>
</svg>
<span>For You</span>
</a>
<a class="sw-nav-link" href="data.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 19V9"></path>
<path d="M12 19V5"></path>
<path d="M19 19v-8"></path>
</svg>
<span>Research</span>
</a>
<a class="sw-nav-link" href="advice.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 3c-3.4 0-6 2.2-6 5.5 0 2.2 1.1 3.6 2.6 4.6V17l3.4-1.8 3.4 1.8v-3.9C16.9 12.1 18 10.7 18 8.5 18 5.2 15.4 3 12 3Z"></path>
<path d="M10 8h.01M14 8h.01M10.2 11.3c.5.4 1.1.7 1.8.7s1.3-.3 1.8-.7"></path>
</svg>
<span>Advice</span>
</a>

<a aria-label="Open survey page" class="sw-nav-link" href="survey.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 11l2 2 4-4"></path>
<path d="M8 4h8"></path>
<path d="M9 3h6a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1V5a2 2 0 0 1 2-2z"></path>
</svg>
        Survey
      </a></nav>
</div>
<div class="sw-divider"></div>
</header>
<main class="sw-main">
<div class="sw-container">
<section class="game-shell">
<div class="intro-wrap" id="introWrap">
<div class="intro-pin">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 21s-6.7-4.35-9.33-8.12C.6 10.3 1.5 6.7 4.62 5.3 7.1 4.2 9.66 5.27 12 7.48c2.34-2.2 4.9-3.27 7.38-2.17 3.12 1.4 4.02 5 .95 7.58C18.7 16.65 12 21 12 21z"></path>
</svg>
</div>
<div class="intro-card">
<div class="intro-phone">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="17" rx="2.3" width="10" x="7" y="3.5"></rect>
<path d="M11.7 17.4h.6"></path>
</svg>
</div>
<h1 class="intro-title">A Day in Your Life</h1>
<p class="intro-text">
              You have 24 hours. How will you spend them? Allocate your time between
              social media, exercise, sleep, socializing, and more. Watch how your
              choices affect your mental health in real-time.
            </p>
<div class="intro-note">
              Effects are based on real research data from studies of 1,700+ students.
            </div>
<button class="start-btn" id="startBtn">
<svg viewbox="0 0 24 24">
<path d="M8 6.5v11l9-5.5-9-5.5Z"></path>
</svg>
<span>Start Your Day</span>
</button>
</div>
</div>
<div class="planner-grid" id="plannerGrid">
<div class="planner-col">
<div class="planner-top">
<h2 class="planner-title">Plan Your Day</h2>
<div class="time-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="9"></circle>
<path d="M12 7v5l3 2"></path>
</svg>
<span id="remainingHours">24h remaining</span>
</div>
</div>
<div class="day-track">
<div class="day-fill" id="dayFill"></div>
</div>
<div class="activity-list" id="activityList"></div>
<div class="planner-actions">
<button class="reset-btn" id="resetBtn">Reset</button>
<button class="finish-btn" id="finishBtn">
<span>Finish Day</span>
<span>›</span>
</button>
</div>
</div>
<aside class="stats-col">
<div class="stats-head">
<div class="stats-avatar">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9.5 3a3.5 3.5 0 0 0-2.9 5.45A3.5 3.5 0 0 0 5 15a3.5 3.5 0 0 0 5 3.16"></path>
<path d="M14.5 3a3.5 3.5 0 0 1 2.9 5.45A3.5 3.5 0 0 1 19 15a3.5 3.5 0 0 1-5 3.16"></path>
<path d="M12 3v18"></path>
<path d="M9 8h3"></path>
<path d="M12 16h3"></path>
</svg>
</div>
<div>
<div class="stats-title">You</div>
<div class="stats-sub">Real-time health status</div>
</div>
</div>
<div class="stat-list" id="statList"></div>
</aside>
</div>
</section>
</div>
</main>
<div class="results-modal" id="resultsModal">
<div class="results-card">
<div class="results-top">
<h2 class="results-title">Your Day Results</h2>
<button class="close-results" id="closeResults">×</button>
</div>
<div class="grade-row">
<div class="grade-badge" id="gradeBadge">B</div>
<div class="grade-copy">
<h3 id="gradeTitle">Pretty balanced day.</h3>
<p id="gradeText">You mixed responsibilities and rest, but a few choices still pushed your stress higher than ideal.</p>
</div>
</div>
<div class="summary-box" id="summaryBox"></div>
<div class="stat-list" id="resultsStatList"></div>
<div class="results-actions">
<button class="play-again" id="playAgainBtn">Play Again</button>
<button class="close-btn" id="closeBtn">Close</button>
</div>
</div>
</div>
<div class="sw-divider"></div>
<footer class="sw-footer">
<div class="sw-container sw-footer-inner">
<div class="sw-footer-brand">
<div class="sw-footer-logo-row">
<div class="sw-logo-badge small">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-footer-title">ScrollWell</div>
</div>
<p>
          Empowering healthy digital habits through interactive education and research-backed insights.
        </p>
</div>
<div class="sw-footer-links">
<a href="game.html">Game</a>
<a href="scroll.html">Feed</a>
<a href="data.html">Research</a>
<a href="advice.html">Advice</a>
</div>
<div class="sw-footer-face">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="8"></circle>
<path d="M9 14.2c.8.9 1.8 1.3 3 1.3s2.2-.4 3-1.3"></path>
<path d="M9.2 10.3h.01M14.8 10.3h.01"></path>
</svg>
</div>
</div>
</footer>
<script>
    const activitiesBase = [
      {
        id: "tiktok",
        label: "TikTok",
        max: 8,
        iconClass: "icon-tiktok",
        icon: `
          <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M14.7 3.5c.5 2 1.7 3.6 3.7 4.4v2.6a7.2 7.2 0 0 1-3.5-1v5.8a5.9 5.9 0 1 1-5.9-5.9c.4 0 .9 0 1.2.1v2.8a2.8 2.8 0 1 0 1.9 2.7V3.5h2.6Z"/>
          </svg>
        `,
        effects: { sleep: -12, fomo: 8, confidence: -10, happiness: -5, motivation: -8, sadness: 6, hunger: 0, social: -4 }
      },
      {
        id: "instagram",
        label: "Instagram",
        max: 8,
        iconClass: "icon-instagram",
        icon: `
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <rect x="4.2" y="4.2" width="15.6" height="15.6" rx="4.2"/>
            <circle cx="12" cy="12" r="3.8"/>
            <path d="M17.2 6.8h.01"/>
          </svg>
        `,
        effects: { sleep: -10, fomo: 10, confidence: -12, happiness: -4, motivation: -5, sadness: 7, hunger: 0, social: -2 }
      },
      {
        id: "snapchat",
        label: "Snapchat",
        max: 8,
        iconClass: "icon-snapchat",
        icon: `
          <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M12 4.4c2.5 0 4.3 1.9 4.3 4.3 0 .8-.2 1.5-.2 2.1.2.4.5.8 1 .9.6.2 1 .4 1 .8s-.5.7-1.1.8c-.2 0-.6.2-.8.6-.4.8-.8 1.3-1.7 1.5-.5.1-.8.2-1 .6l-.3.8h-2.4l-.3-.8c-.2-.4-.5-.5-1-.6-.9-.2-1.3-.7-1.7-1.5-.2-.4-.6-.6-.8-.6-.6-.1-1.1-.4-1.1-.8s.4-.6 1-.8c.5-.1.8-.5 1-.9 0-.6-.2-1.3-.2-2.1 0-2.4 1.8-4.3 4.3-4.3Z"/>
          </svg>
        `,
        effects: { sleep: -8, fomo: 14, confidence: -6, happiness: -3, motivation: -4, sadness: 5, hunger: 0, social: 2 }
      },
      {
        id: "youtube",
        label: "YouTube",
        max: 8,
        iconClass: "icon-youtube",
        icon: `
          <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M20.3 8.1c-.2-1-.9-1.7-1.9-1.9C16.8 5.8 12 5.8 12 5.8s-4.8 0-6.4.4c-1 .2-1.7.9-1.9 1.9-.4 1.6-.4 3.9-.4 3.9s0 2.3.4 3.9c.2 1 .9 1.7 1.9 1.9 1.6.4 6.4.4 6.4.4s4.8 0 6.4-.4c1-.2 1.7-.9 1.9-1.9.4-1.6.4-3.9.4-3.9s0-2.3-.4-3.9ZM10.2 15.1V8.9l5.2 3.1-5.2 3.1Z"/>
          </svg>
        `,
        effects: { sleep: -6, fomo: 3, confidence: -2, happiness: 2, motivation: -3, sadness: 1, hunger: 0, social: -2 }
      },
      {
        id: "pinterest",
        label: "Pinterest",
        max: 6,
        iconClass: "icon-pinterest",
        icon: `
          <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M12 4.2c-4.2 0-6.8 3-6.8 6.4 0 2.5 1.4 4 2.2 4 .3 0 .4-.8.4-1 0-.3-.8-1-8-2.4-1.5 0-1.2-4.3 5.2-4.3 3.5 0 5.3 2.5 5.3 5.2 0 3.9-1.7 6.6-4.2 6.6-1.3 0-2.3-1.1-2-2.4.4-1.5 1.1-3 1.1-4 0-.9-.5-1.6-1.5-1.6-1.2 0-2.1 1.2-2.1 2.9 0 1 .3 1.7.3 1.7l-1.2 5.1c-.4 1.7-.1 3.9 0 4.1.1.1.2.1.3 0 .1-.2 1.2-1.9 1.6-3.6l.6-2.3c.3.6 1.4 1.2 2.5 1.2 3.3 0 5.7-3 5.7-7.2 0-3.8-3.2-6.6-7.4-6.6Z"/>
          </svg>
        `,
        effects: { sleep: -3, fomo: 1, confidence: 2, happiness: 3, motivation: 4, sadness: -2, hunger: 0, social: 0 }
      },
      {
        id: "linkedin",
        label: "LinkedIn",
        max: 4,
        iconClass: "icon-linkedin",
        icon: `
          <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M6.2 8.2a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4Zm-1.4 2.1h2.8v8.9H4.8v-8.9Zm4.6 0H12v1.2h.1c.4-.7 1.4-1.5 2.9-1.5 3.1 0 3.7 2 3.7 4.7v4.5h-2.8v-4c0-1 0-2.3-1.4-2.3s-1.6 1.1-1.6 2.2v4.1H9.4v-8.9Z"/>
          </svg>
        `,
        effects: { sleep: -2, fomo: 2, confidence: 3, happiness: 1, motivation: 6, sadness: -1, hunger: 0, social: 2 }
      },
      {
        id: "exercise",
        label: "Exercise",
        max: 4,
        iconClass: "icon-exercise",
        icon: `
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M14.4 14.4 9.6 9.6"/>
            <path d="M18.657 17.243a2 2 0 1 1-2.828 2.828l-1.415-1.414a2 2 0 1 1 2.828-2.829z"/>
            <path d="m21.5 21.5-1.4-1.4"/>
            <path d="M3.5 3.5 4.9 4.9"/>
            <path d="M8.172 5.343a2 2 0 1 1-2.829 2.829L3.93 6.757A2 2 0 1 1 6.757 3.93z"/>
            <path d="m14.4 9.6 1.4-1.4"/>
            <path d="m9.6 14.4-1.4 1.4"/>
          </svg>
        `,
        effects: { sleep: 8, fomo: -5, confidence: 10, happiness: 12, motivation: 10, sadness: -8, hunger: 8, social: 3 }
      },
      {
        id: "eating",
        label: "Eating",
        max: 4,
        iconClass: "icon-eating",
        icon: `
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M3 2v7c0 2 1.5 3 3 3s3-1 3-3V2"/>
            <path d="M6 2v20"/>
            <path d="M14 2v8c0 1.1.9 2 2 2h5"/>
            <path d="M18 2v20"/>
          </svg>
        `,
        effects: { sleep: 2, fomo: 0, confidence: 2, happiness: 5, motivation: 3, sadness: -2, hunger: -20, social: 4 }
      },
      {
        id: "sleep",
        label: "Sleeping",
        max: 10,
        iconClass: "icon-sleep",
        icon: `
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M12 3a7 7 0 1 0 9 9A9 9 0 1 1 12 3z"/>
          </svg>
        `,
        effects: { sleep: 15, fomo: -3, confidence: 5, happiness: 6, motivation: 8, sadness: -5, hunger: 3, social: 0 }
      },
      {
        id: "socializing",
        label: "Socializing",
        max: 6,
        iconClass: "icon-socializing",
        icon: `
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
        `,
        effects: { sleep: -2, fomo: -10, confidence: 8, happiness: 10, motivation: 5, sadness: -8, hunger: 2, social: 15 }
      },
      {
        id: "studying",
        label: "Studying",
        max: 8,
        iconClass: "icon-studying",
        icon: `
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
          </svg>
        `,
        effects: { sleep: -3, fomo: 3, confidence: 5, happiness: -1, motivation: 8, sadness: 1, hunger: 2, social: -2 }
      }
    ];

    const baseStats = {
      sleep: 70,
      fomo: 30,
      confidence: 70,
      happiness: 70,
      motivation: 65,
      sadness: 25,
      hunger: 40,
      social: 60
    };

    const statMeta = {
      sleep: { label: "Sleep Quality", fillClass: "fill-sleep" },
      fomo: { label: "FOMO Level", fillClass: "fill-fomo" },
      confidence: { label: "Self Confidence", fillClass: "fill-confidence" },
      happiness: { label: "Happiness", fillClass: "fill-happiness" },
      motivation: { label: "Motivation", fillClass: "fill-motivation" },
      sadness: { label: "Sadness", fillClass: "fill-sadness" },
      hunger: { label: "Hunger", fillClass: "fill-hunger" },
      social: { label: "Social Connection", fillClass: "fill-social" }
    };

    let activities = activitiesBase.map(a => ({ ...a, hours: 0 }));

    const introWrap = document.getElementById("introWrap");
    const plannerGrid = document.getElementById("plannerGrid");
    const activityList = document.getElementById("activityList");
    const remainingHoursEl = document.getElementById("remainingHours");
    const dayFill = document.getElementById("dayFill");
    const statList = document.getElementById("statList");
    const resultsStatList = document.getElementById("resultsStatList");
    const resultsModal = document.getElementById("resultsModal");
    const gradeBadge = document.getElementById("gradeBadge");
    const gradeTitle = document.getElementById("gradeTitle");
    const gradeText = document.getElementById("gradeText");
    const summaryBox = document.getElementById("summaryBox");

    function clamp(value, min, max) {
      return Math.max(min, Math.min(max, value));
    }

    function totalHours() {
      return activities.reduce((sum, item) => sum + item.hours, 0);
    }

    function remainingHours() {
      return 24 - totalHours();
    }

    function computeStats() {
      const stats = { ...baseStats };

      activities.forEach(activity => {
        Object.entries(activity.effects).forEach(([key, value]) => {
          stats[key] = clamp(stats[key] + value * activity.hours, 0, 100);
        });
      });

      return stats;
    }

    function overallScore(stats) {
      const positive = stats.sleep + stats.confidence + stats.happiness + stats.motivation + stats.social;
      const inverseNegative = (100 - stats.fomo) + (100 - stats.sadness) + (100 - stats.hunger);
      return Math.round((positive + inverseNegative) / 8);
    }

    function getGrade(score) {
      if (score >= 90) return { letter: "A+", title: "Excellent balance.", text: "You built a healthy day with strong recovery, connection, and structure.", color: "#b5cdbd" };
      if (score >= 80) return { letter: "A", title: "Very strong day.", text: "Your choices supported good energy, confidence, and overall mental health.", color: "#bfd4c3" };
      if (score >= 70) return { letter: "B", title: "Pretty balanced day.", text: "You mixed responsibilities and rest, but a few choices still pushed your stress higher than ideal.", color: "#dfc4d4" };
      if (score >= 60) return { letter: "C", title: "Mixed results.", text: "Some parts of your day helped, but too much time went toward habits that lowered well-being.", color: "#e8d2a1" };
      if (score >= 50) return { letter: "D", title: "Rough day.", text: "Your plan left you tired, more stressed, and less supported than you could have been.", color: "#e6b2a6" };
      return { letter: "F", title: "Unhealthy balance.", text: "This routine seriously hurt sleep, mood, and confidence.", color: "#e0a095" };
    }

    function renderActivities() {
      const remaining = remainingHours();
      remainingHoursEl.textContent = `${remaining}h remaining`;
      dayFill.style.width = `${(totalHours() / 24) * 100}%`;

      activityList.innerHTML = activities.map(activity => {
        const disableMinus = activity.hours <= 0;
        const disablePlus = activity.hours >= activity.max || remaining <= 0;

        return `
          <div class="activity-card">
            <div class="activity-left">
              <div class="activity-icon ${activity.iconClass}">
                ${activity.icon}
              </div>
              <div>
                <div class="activity-title">${activity.label}</div>
                <div class="activity-sub">Max ${activity.max}h</div>
              </div>
            </div>

            <div class="activity-right">
              <button class="counter-btn minus" data-id="${activity.id}" data-action="minus" ${disableMinus ? "disabled" : ""}>−</button>
              <div class="counter-value">${activity.hours}</div>
              <button class="counter-btn plus" data-id="${activity.id}" data-action="plus" ${disablePlus ? "disabled" : ""}>+</button>
            </div>
          </div>
        `;
      }).join("");
    }

    function renderStats(targetEl) {
      const stats = computeStats();

      targetEl.innerHTML = Object.entries(statMeta).map(([key, meta]) => `
        <div class="stat-card">
          <div class="stat-top">
            <div class="stat-name">${meta.label}</div>
            <div class="stat-score">${stats[key]}</div>
          </div>
          <div class="stat-track">
            <div class="stat-fill ${meta.fillClass}" style="width:${stats[key]}%"></div>
          </div>
        </div>
      `).join("");
    }

    function renderAll() {
      renderActivities();
      renderStats(statList);
    }

    function openGame() {
      introWrap.style.display = "none";
      plannerGrid.classList.add("visible");
      renderAll();
      window.scrollTo({ top: 0, behavior: "smooth" });
    }

    function resetGame() {
      activities = activitiesBase.map(a => ({ ...a, hours: 0 }));
      resultsModal.classList.remove("visible");
      plannerGrid.classList.remove("visible");
      introWrap.style.display = "flex";
      renderAll();
      window.scrollTo({ top: 0, behavior: "smooth" });
    }

    function buildSummary(stats) {
      const highestGood = Object.entries(stats)
        .filter(([k]) => !["fomo", "sadness", "hunger"].includes(k))
        .sort((a, b) => b[1] - a[1])[0];

      const highestBad = [
        ["FOMO Level", stats.fomo],
        ["Sadness", stats.sadness],
        ["Hunger", stats.hunger]
      ].sort((a, b) => b[1] - a[1])[0];

      return `Your strongest area was ${statMeta[highestGood[0]].label.toLowerCase()} at ${highestGood[1]}. Your biggest challenge was ${highestBad[0].toLowerCase()} at ${highestBad[1]}. Social media-heavy choices tended to reduce sleep, confidence, and mood, while time spent sleeping, exercising, eating, and socializing improved your balance.`;
    }

    function showResults() {
      const stats = computeStats();
      const score = overallScore(stats);
      const grade = getGrade(score);

      gradeBadge.textContent = grade.letter;
      gradeBadge.style.background = grade.color;
      gradeTitle.textContent = `${grade.title} ${score}/100`;
      gradeText.textContent = grade.text;
      summaryBox.textContent = buildSummary(stats);

      renderStats(resultsStatList);
      resultsModal.classList.add("visible");
    }

    document.getElementById("startBtn").addEventListener("click", openGame);
    document.getElementById("resetBtn").addEventListener("click", resetGame);
    document.getElementById("finishBtn").addEventListener("click", showResults);
    document.getElementById("playAgainBtn").addEventListener("click", resetGame);
    document.getElementById("closeResults").addEventListener("click", () => resultsModal.classList.remove("visible"));
    document.getElementById("closeBtn").addEventListener("click", () => resultsModal.classList.remove("visible"));

    resultsModal.addEventListener("click", (e) => {
      if (e.target === resultsModal) resultsModal.classList.remove("visible");
    });

    activityList.addEventListener("click", (e) => {
      const btn = e.target.closest("button[data-id]");
      if (!btn) return;

      const id = btn.dataset.id;
      const action = btn.dataset.action;

      activities = activities.map(activity => {
        if (activity.id !== id) return activity;

        let next = activity.hours;
        if (action === "minus") next -= 1;
        if (action === "plus") next += 1;

        if (next < 0) next = 0;
        if (next > activity.max) next = activity.max;

        if (action === "plus" && remainingHours() <= 0) return activity;

        return { ...activity, hours: next };
      });

      renderAll();
    });

    renderAll();
  </script>
</body>
</html>


/* ==================== scroll.html ==================== */

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ScrollWell | For You</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&amp;display=swap" rel="stylesheet"/><link href="styles.css" rel="stylesheet"/>
  

</head>
<body class="page-scroll">
<header class="sw-header">
<div class="sw-header-inner">
<a class="sw-logo-wrap" href="index.html">
<div class="sw-logo-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-logo-text">Scroll<span>Well</span></div>
</a>
<nav class="sw-nav">
<a class="sw-nav-link" href="index.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M3 11.5 12 4l9 7.5"></path>
<path d="M5.5 10.5V20h13V10.5"></path>
</svg>
<span>Home</span>
</a>
<a class="sw-nav-link" href="game.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="10" rx="5" width="17" x="3.5" y="8"></rect>
<path d="M8 13h4M10 11v4M16.5 12.2h.01M18.5 14.2h.01"></path>
</svg>
<span>Simulator</span>
</a>
<a class="sw-nav-link active" href="scroll.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="17" rx="2.5" width="11" x="6.5" y="3.5"></rect>
<path d="M9 17.3h6"></path>
</svg>
<span>For You</span>
</a>
<a class="sw-nav-link" href="data.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 19V9"></path>
<path d="M12 19V5"></path>
<path d="M19 19v-8"></path>
</svg>
<span>Research</span>
</a>
<a class="sw-nav-link" href="advice.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 3c-3.4 0-6 2.2-6 5.5 0 2.2 1.1 3.6 2.6 4.6V17l3.4-1.8 3.4 1.8v-3.9C16.9 12.1 18 10.7 18 8.5 18 5.2 15.4 3 12 3Z"></path>
<path d="M10 8h.01M14 8h.01M10.2 11.3c.5.4 1.1.7 1.8.7s1.3-.3 1.8-.7"></path>
</svg>
<span>Advice</span>
</a>

<a aria-label="Open survey page" class="sw-nav-link" href="survey.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 11l2 2 4-4"></path>
<path d="M8 4h8"></path>
<path d="M9 3h6a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1V5a2 2 0 0 1 2-2z"></path>
</svg>
        Survey
      </a></nav>
</div>
<div class="sw-divider"></div>
</header>
<main class="feed-main">
<section class="feed-hero sw-container">
<div class="feed-pill">Scroll to learn</div>
<h1 class="feed-title">For You</h1>
<p class="feed-subtext">
        Bite-sized facts, tips, and insights about social media and your health.
        Scroll through real research — no comparison culture, no cancel culture,
        just knowledge.
      </p>
</section>
<section class="feed-list sw-container">
<article class="feed-card reveal">
<div class="card-tag-row tag-sleep">
<div class="icon-box">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 3a7 7 0 1 0 9 9A9 9 0 1 1 12 3z"></path>
</svg>
</div>
<div class="tag-pill">Sleep</div>
</div>
<h2 class="card-title peach">The 2-Hour Sleep Gap</h2>
<div class="stat-bubble">2-hour gap</div>
<div class="card-body">
<p>
            Students with negative social media outcomes sleep an average of
            5.4 hours per night, compared to 7.6 hours for those with positive
            outcomes. That's a nearly 2-hour difference — one of the strongest
            signals in the data.
          </p>
</div>
<div class="card-divider"></div>
<div class="card-source">Source: Kaggle Student Health Dataset (n=1,700)</div>
</article>
<article class="feed-card reveal">
<div class="card-tag-row tag-platform">
<div class="icon-box">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M4 7h6l3 4h7"></path>
<path d="M20 7v8"></path>
<path d="m16 11 4 4 0-4"></path>
</svg>
</div>
<div class="tag-pill">Platform Impact</div>
</div>
<h2 class="card-title peach">Not All Platforms Are Equal</h2>
<div class="stat-bubble">74% vs 38%</div>
<div class="card-body">
<p>
            TikTok and Snapchat users are 74% and 68% likely to report negative
            outcomes respectively. LinkedIn users? Only 38%. The content type and
            social dynamics of each platform matter enormously.
          </p>
</div>
<div class="card-divider"></div>
<div class="card-source">Source: Kaggle Student Health Dataset</div>
</article>
<article class="feed-card reveal">
<div class="card-tag-row tag-good">
<div class="icon-box">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 21s-6.7-4.35-9.33-8.12C.6 10.3 1.5 6.7 4.62 5.3 7.1 4.2 9.66 5.27 12 7.48c2.34-2.2 4.9-3.27 7.38-2.17 3.12 1.4 4.02 5 .95 7.58C18.7 16.65 12 21 12 21z"></path>
</svg>
</div>
<div class="tag-pill">Good News</div>
</div>
<h2 class="card-title peach">Pinterest: The Positive Exception</h2>
<div class="card-body">
<p>
            Platforms like Pinterest can potentially be useful while avoiding the
            general harmful effects of social media. It's seen as less of a direct
            viewing-friends-posts platform and more of an inspirational and tutorial
            platform.
          </p>
</div>
<div class="card-divider"></div>
<div class="card-source">Source: Multiple studies</div>
</article>
<article class="feed-card reveal">
<div class="card-tag-row tag-fomo">
<div class="icon-box">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M21 11.5a8.5 8.5 0 0 1-8.5 8.5 8.8 8.8 0 0 1-3.9-.9L3 21l1.9-5.2A8.5 8.5 0 1 1 21 11.5Z"></path>
</svg>
</div>
<div class="tag-pill">FOMO</div>
</div>
<h2 class="card-title dark">Snapchat's FOMO Effect</h2>
<div class="card-body">
<p>
            Snapchat contributes more to feelings like FOMO and isolation than other
            platforms. Seeing messages and private story posts where you were not
            included can intensify social anxiety and make everyday life feel smaller.
          </p>
</div>
<div class="card-divider"></div>
<div class="card-source">Source: Kaggle Student Health Dataset</div>
</article>
<article class="feed-card reveal">
<div class="card-tag-row tag-age">
<div class="icon-box">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M4 5h8v14H4z"></path>
<path d="M12 5h8v14h-8"></path>
<path d="M12 5a3 3 0 0 0-3-1H4"></path>
<path d="M12 5a3 3 0 0 1 3-1h5"></path>
</svg>
</div>
<div class="tag-pill">Age Factor</div>
</div>
<h2 class="card-title peach">Age Makes a Difference</h2>
<div class="card-body">
<p>
            Graduate students show slightly better mental health scores than high
            school students despite similar usage hours. This suggests coping
            strategies or self-awareness improve with age and education level.
          </p>
</div>
</article>
<article class="feed-card reveal">
<div class="card-tag-row tag-academic">
<div class="icon-box">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"></path>
</svg>
</div>
<div class="tag-pill">Academic Impact</div>
</div>
<h2 class="card-title dark">Your Grades Feel It Too</h2>
<div class="card-body">
<p>
            Students with heavier social media use tend to report lower academic
            confidence and more difficulty focusing. The issue is not just time lost —
            it is also attention lost, sleep lost, and stress carried into school.
          </p>
</div>
<div class="card-divider"></div>
<div class="card-source">Source: Student self-report trend data</div>
</article>
<article class="feed-card reveal">
<div class="card-tag-row tag-balance">
<div class="icon-box">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 3v18"></path>
<path d="M6 7h12"></path>
<path d="m7.5 7-3 5h6l-3-5Z"></path>
<path d="m16.5 7-3 5h6l-3-5Z"></path>
</svg>
</div>
<div class="tag-pill">Takeaway</div>
</div>
<h2 class="card-title dark">It’s Not About Quitting — It’s About Balance</h2>
<div class="card-body">
<p>
            Social media is not automatically good or bad. The strongest predictor of
            better outcomes is more intentional use: fewer late-night sessions, less
            comparison-heavy scrolling, and more real-world rest, movement, and connection.
          </p>
</div>
</article>
</section>
<section class="feed-end sw-container">
<div class="feed-end-icon">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 21s-6.7-4.35-9.33-8.12C.6 10.3 1.5 6.7 4.62 5.3 7.1 4.2 9.66 5.27 12 7.48c2.34-2.2 4.9-3.27 7.38-2.17 3.12 1.4 4.02 5 .95 7.58C18.7 16.65 12 21 12 21z"></path>
</svg>
</div>
<h2>You've reached the end — and that's okay.</h2>
<p>Unlike other feeds, we want you to stop scrolling and go live your life.</p>
</section>
</main>
<footer class="sw-footer">
<div class="sw-container sw-footer-inner">
<div class="sw-footer-brand">
<div class="sw-footer-logo-row">
<div class="sw-logo-badge small">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-footer-title">ScrollWell</div>
</div>
<p>
          Empowering healthy digital habits through interactive education and research-backed insights.
        </p>
</div>
<div class="sw-footer-links">
<a href="game.html">Game</a>
<a href="scroll.html">Feed</a>
<a href="data.html">Research</a>
<a href="advice.html">Advice</a>
</div>
<div class="sw-footer-face">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="8"></circle>
<path d="M9 14.2c.8.9 1.8 1.3 3 1.3s2.2-.4 3-1.3"></path>
<path d="M9.2 10.3h.01M14.8 10.3h.01"></path>
</svg>
</div>
</div>
</footer>
<script>
    const revealItems = document.querySelectorAll(".reveal");

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
        }
      });
    }, {
      threshold: 0.12
    });

    revealItems.forEach((item, index) => {
      item.style.transitionDelay = `${index * 60}ms`;
      observer.observe(item);
    });
  </script>
</body>
</html>


/* ==================== data.html ==================== */

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ScrollWell | Research</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&amp;display=swap" rel="stylesheet"/><link href="styles.css" rel="stylesheet"/>
  

</head>
<body class="page-data">
<header class="sw-header">
<div class="sw-header-inner">
<a class="sw-logo-wrap" href="index.html">
<div class="sw-logo-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-logo-text">Scroll<span>Well</span></div>
</a>
<nav class="sw-nav">
<a class="sw-nav-link" href="index.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M3 11.5 12 4l9 7.5"></path>
<path d="M5.5 10.5V20h13V10.5"></path>
</svg>
<span>Home</span>
</a>
<a class="sw-nav-link" href="game.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="10" rx="5" width="17" x="3.5" y="8"></rect>
<path d="M8 13h4M10 11v4M16.5 12.2h.01M18.5 14.2h.01"></path>
</svg>
<span>Simulator</span>
</a>
<a class="sw-nav-link" href="scroll.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="17" rx="2.5" width="11" x="6.5" y="3.5"></rect>
<path d="M9 17.3h6"></path>
</svg>
<span>For You</span>
</a>
<a class="sw-nav-link active" href="data.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 19V9"></path>
<path d="M12 19V5"></path>
<path d="M19 19v-8"></path>
</svg>
<span>Research</span>
</a>
<a class="sw-nav-link" href="advice.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9.5 3a3.5 3.5 0 0 0-2.9 5.45A3.5 3.5 0 0 0 5 15a3.5 3.5 0 0 0 5 3.16"></path>
<path d="M14.5 3a3.5 3.5 0 0 1 2.9 5.45A3.5 3.5 0 0 1 19 15a3.5 3.5 0 0 1-5 3.16"></path>
<path d="M12 3v18"></path>
<path d="M9 8h3"></path>
<path d="M12 16h3"></path>
</svg>
<span>Advice</span>
</a>

<a aria-label="Open survey page" class="sw-nav-link" href="survey.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 11l2 2 4-4"></path>
<path d="M8 4h8"></path>
<path d="M9 3h6a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1V5a2 2 0 0 1 2-2z"></path>
</svg>
        Survey
      </a></nav>
</div>
<div class="sw-divider"></div>
</header>
<main class="research-main">
<div class="sw-container">
<section class="hero">
<div class="hero-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 19V9"></path>
<path d="M12 19V5"></path>
<path d="M19 19v-8"></path>
</svg>
</div>
<h1>Research &amp; Data</h1>
<div class="hero-card">
          This page turns social media data into relationships, not just raw counts. Instead of simply listing
          what appears most often, ScrollWell compares variables — like platform and sleep, platform and mental
          health impact, or academic performance and wellbeing — so users can actually see patterns and consequences.
        </div>
</section>
<section class="goal-grid">
<article class="goal-card">
<div class="label">Project Goal</div>
<div class="value">Multiple perspectives</div>
<div class="sub">Bring together different sources so users get a fuller picture in one place.</div>
</article>
<article class="goal-card">
<div class="label">Project Goal</div>
<div class="value">Interactive visuals</div>
<div class="sub">Use charts that reveal relationships between variables, not just isolated totals.</div>
</article>
<article class="goal-card">
<div class="label">Project Goal</div>
<div class="value">Ongoing survey growth</div>
<div class="sub">Support future optional survey responses so the site can keep building new research.</div>
</article>
<article class="goal-card">
<div class="label">Project Goal</div>
<div class="value">Evidence-backed advice</div>
<div class="sub">Connect patterns from data to clear recommendations users can act on.</div>
</article>
</section>
<section class="insight-grid">
<article class="insight-card">
<h3>Platform differences matter</h3>
<p>
            ScrollWell should make it obvious that not every app affects people in exactly the same way.
            Comparison-heavy platforms can produce different outcomes than tutorial or inspiration-based ones.
          </p>
</article>
<article class="insight-card">
<h3>Sleep is one of the clearest pathways</h3>
<p>
            A big part of the site’s story is that social media often impacts mental health indirectly through
            poor sleep, overstimulation, and lost time.
          </p>
</article>
<article class="insight-card">
<h3>Research should feel explorable</h3>
<p>
            The page is designed so users can search full tables, then jump into more visual, memorable relationship views.
          </p>
</article>
</section>
<section class="viz-panel" id="viz-panel">
<div class="viz-head">
<div>
<h2>Interactive Visualizations</h2>
<p>
              These visuals focus on relationships between variables. Switch datasets and views to compare
              patterns like platform vs sleep, platform vs mental health impact, academic performance vs impact,
              usage vs sleep, birth year vs mental health, state-based intensity, relationship status vs conflicts,
              conflicts vs addiction, and country vs addiction level.
            </p>
</div>
</div>
<div class="viz-controls">
<select class="sw-select" id="vizDataset">
<option value="dataset1">Dataset 1 · Social Media &amp; Mental Health</option>
<option value="dataset2">Dataset 2 · Survey / Additional Research</option>
<option value="dataset3">Dataset 3 · Relationships, Conflict &amp; Addiction</option>
</select>
<select class="sw-select" id="vizView"></select>
</div>
<div class="viz-grid">
<article class="viz-card">
<h3 id="vizTitle">Chart</h3>
<p id="vizDescription">Description</p>
<div id="vizCanvas"></div>
</article>
<article class="viz-card">
<h3>Quick Read</h3>
<p>Automatic highlights generated from the current relationship view.</p>
<div class="stat-badges" id="vizStats"></div>
</article>
</div>
</section>
<section class="dataset-stack">
<article class="dataset-card">
<div class="dataset-head">
<div class="dataset-title-wrap">
<div class="dataset-icon pink">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 19V9"></path>
<path d="M12 19V5"></path>
<path d="M19 19v-8"></path>
</svg>
</div>
<div>
<h2 class="dataset-title">Dataset 1</h2>
<div class="dataset-pill">Social Media &amp; Mental Health</div>
<div class="dataset-desc">
                  This dataset is structured to support comparisons like platform vs sleep, usage vs impact,
                  and academic performance vs mental health.
                </div>
</div>
</div>
</div>
<div class="dataset-metrics" id="dataset1-metrics"></div>
<div class="table-controls">
<label class="search-wrap">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="11" cy="11" r="7"></circle>
<path d="m20 20-3.5-3.5"></path>
</svg>
<input id="search-dataset1" placeholder="Search this table..." type="text"/>
</label>
<select class="sw-select" id="sort-dataset1"></select>
<select class="sw-select" id="page-dataset1">
<option value="10">10 rows</option>
<option selected="" value="25">25 rows</option>
<option value="50">50 rows</option>
<option value="100">100 rows</option>
</select>
<button class="table-btn primary" id="toggle-dataset1">Show full table</button>
</div>
<div class="table-status">
<div id="status-dataset1"></div>
<div>Click a header to sort by that column.</div>
</div>
<div class="table-wrap">
<div class="table-scroll" id="scroll-dataset1">
<table>
<thead id="thead-dataset1"></thead>
<tbody id="tbody-dataset1"></tbody>
</table>
</div>
</div>
</article>
<article class="dataset-card">
<div class="dataset-head">
<div class="dataset-title-wrap">
<div class="dataset-icon blue">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M8 6h12"></path>
<path d="M8 12h12"></path>
<path d="M8 18h12"></path>
<path d="M3 6h.01M3 12h.01M3 18h.01"></path>
</svg>
</div>
<div>
<h2 class="dataset-title">Dataset 2</h2>
<div class="dataset-pill">Survey / Additional Research</div>
<div class="dataset-desc">
                  This second dataset is designed for broader comparisons such as birth year vs mental-health effect,
                  state vs reported impact, or any future survey relationships you add.
                </div>
</div>
</div>
</div>
<div class="dataset-metrics" id="dataset2-metrics"></div>
<div class="table-controls">
<label class="search-wrap">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="11" cy="11" r="7"></circle>
<path d="m20 20-3.5-3.5"></path>
</svg>
<input id="search-dataset2" placeholder="Search this table..." type="text"/>
</label>
<select class="sw-select" id="sort-dataset2"></select>
<select class="sw-select" id="page-dataset2">
<option value="10">10 rows</option>
<option selected="" value="25">25 rows</option>
<option value="50">50 rows</option>
<option value="100">100 rows</option>
</select>
<button class="table-btn primary" id="toggle-dataset2">Show full table</button>
</div>
<div class="table-status">
<div id="status-dataset2"></div>
<div>This section can later support your optional website survey too.</div>
</div>
<div class="table-wrap">
<div class="table-scroll" id="scroll-dataset2">
<table>
<thead id="thead-dataset2"></thead>
<tbody id="tbody-dataset2"></tbody>
</table>
</div>
</div>
</article>
</section>
<article class="dataset-card">
<div class="dataset-head">
<div class="dataset-title-wrap">
<div class="dataset-icon pink">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8 15c1.3-1.1 2.7-1.7 4-1.7s2.7.6 4 1.7"></path>
</svg>
</div>
<div>
<h2 class="dataset-title">Dataset 3</h2>
<div class="dataset-pill">Relationships, Conflict &amp; Addiction</div>
<div class="dataset-desc">
                  This dataset is structured for comparisons like relationship status vs conflicts,
                  conflicts vs addiction score, country vs addiction level, platform vs conflict pressure,
                  and relationship context vs academic impact.
                </div>
</div>
</div>
</div>
<div class="dataset-metrics" id="dataset3-metrics"></div>
<div class="table-controls">
<label class="search-wrap">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="11" cy="11" r="7"></circle>
<path d="m20 20-3.5-3.5"></path>
</svg>
<input id="search-dataset3" placeholder="Search this table..." type="text"/>
</label>
<select class="sw-select" id="sort-dataset3"></select>
<select class="sw-select" id="page-dataset3">
<option value="10">10 rows</option>
<option selected="" value="25">25 rows</option>
<option value="50">50 rows</option>
<option value="100">100 rows</option>
</select>
<button class="table-btn primary" id="toggle-dataset3">Show full table</button>
</div>
<div class="table-status">
<div id="status-dataset3"></div>
<div>Explore country, relationship, conflict, platform, and addiction patterns in one place.</div>
</div>
<div class="table-wrap">
<div class="table-scroll" id="scroll-dataset3">
<table>
<thead id="thead-dataset3"></thead>
<tbody id="tbody-dataset3"></tbody>
</table>
</div>
</div>
</article>
<section class="footer-note">
<h2>Why this page matters</h2>
<p>
          ScrollWell should not only say that social media affects people. It should show how the effects differ
          depending on platform, time, sleep, school impact, age, and location — then connect those patterns to advice.
        </p>
</section>
</div>
</main>
<div class="sw-divider"></div>
<footer class="sw-footer">
<div class="sw-container sw-footer-inner">
<div class="sw-footer-brand">
<div class="sw-footer-logo-row">
<div class="sw-logo-badge small">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-footer-title">ScrollWell</div>
</div>
<p>
          Empowering healthier digital habits through interactive education and research-backed insights.
        </p>
</div>
<div class="sw-footer-links">
<a href="game.html">Game</a>
<a href="scroll.html">Feed</a>
<a href="data.html">Research</a>
<a href="advice.html">Advice</a>
</div>
<div class="sw-footer-face">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="8"></circle>
<path d="M9 14.2c.8.9 1.8 1.3 3 1.3s2.2-.4 3-1.3"></path>
<path d="M9.2 10.3h.01M14.8 10.3h.01"></path>
</svg>
</div>
</div>
</footer>
<script>
    /*
      ==========================================================
      REPLACE THESE TWO ARRAYS WITH YOUR REAL TABLES
      Keep each dataset as an array of objects.
      ==========================================================
    */

    function parseTSVData(tsv){
      const [headerLine, ...lines] = tsv.trim().split(/\r?\n/);
      const headers = headerLine.split("\t");

      return lines
        .filter(line => line.trim())
        .map(line => {
          const values = line.split("\t");
          const row = {};

          headers.forEach((header, index) => {
            const raw = (values[index] ?? "").trim();
            row[header] = raw !== "" && !isNaN(raw) ? Number(raw) : raw;
          });

          return row;
        });
    }

    const DATASET_3 = parseTSVData(`Student_ID	Age	Gender	Academic_Level	Country	Avg_Daily_Usage_Hours	Most_Used_Platform	Affects_Academic_Performance	Sleep_Hours_Per_Night	Mental_Health_Score	Relationship_Status	Conflicts_Over_Social_Media	Addicted_Score
1	19	Female	Undergraduate	Bangladesh	5.2	Instagram	Yes	6.5	6	In Relationship	3	8
2	22	Male	Graduate	India	2.1	Twitter	No	7.5	8	Single	0	3
3	20	Female	Undergraduate	USA	6.0	TikTok	Yes	5.0	5	Complicated	4	9
4	18	Male	High School	UK	3.0	YouTube	No	7.0	7	Single	1	4
5	21	Male	Graduate	Canada	4.5	Facebook	Yes	6.0	6	In Relationship	2	7
6	19	Female	Undergraduate	Australia	7.2	Instagram	Yes	4.5	4	Complicated	5	9
7	23	Male	Graduate	Germany	1.5	LinkedIn	No	8.0	9	Single	0	2
8	20	Female	Undergraduate	Brazil	5.8	Snapchat	Yes	6.0	6	In Relationship	2	8
9	18	Male	High School	Japan	4.0	TikTok	No	6.5	7	Single	1	5
10	21	Female	Graduate	South Korea	3.3	Instagram	No	7.0	7	In Relationship	1	4
11	19	Male	Undergraduate	France	4.8	Snapchat	Yes	6.2	5	Complicated	3	7
12	20	Female	Undergraduate	Spain	5.5	TikTok	Yes	5.8	6	In Relationship	2	8
13	22	Male	Graduate	Italy	2.8	LinkedIn	No	7.2	8	Single	1	4
14	18	Female	High School	Mexico	6.5	Instagram	Yes	5.5	5	Single	4	9
15	21	Male	Undergraduate	Russia	3.7	YouTube	No	6.8	7	In Relationship	2	5
16	20	Female	Undergraduate	China	4.2	TikTok	Yes	6.0	6	Complicated	3	7
17	24	Male	Graduate	Sweden	2.0	LinkedIn	No	7.8	8	Single	0	3
18	19	Female	High School	Norway	5.0	Instagram	Yes	5.7	5	In Relationship	3	8
19	21	Male	Undergraduate	Denmark	3.5	Facebook	No	6.7	7	Single	1	5
20	20	Female	Undergraduate	Netherlands	4.7	Snapchat	Yes	5.9	6	Complicated	3	7
21	18	Male	High School	Belgium	5.3	TikTok	Yes	5.5	5	Single	4	8
22	23	Female	Graduate	Switzerland	2.5	LinkedIn	No	7.3	8	In Relationship	1	4
23	19	Male	Undergraduate	Austria	4.9	Instagram	Yes	5.8	6	Complicated	3	7
24	20	Female	Undergraduate	Portugal	5.7	TikTok	Yes	5.4	5	Single	4	8
25	22	Male	Graduate	Greece	3.2	Facebook	No	6.9	7	In Relationship	2	5
26	19	Female	High School	Ireland	6.1	Instagram	Yes	5.2	5	Complicated	4	9
27	21	Male	Undergraduate	New Zealand	3.8	YouTube	No	6.6	7	Single	1	5
28	20	Female	Undergraduate	Singapore	4.4	TikTok	Yes	5.9	6	In Relationship	3	7
29	24	Male	Graduate	Malaysia	2.2	LinkedIn	No	7.4	8	Single	0	3
30	19	Female	High School	Thailand	5.9	Instagram	Yes	5.3	5	Complicated	4	8
31	21	Male	Undergraduate	Vietnam	3.6	Facebook	No	6.7	7	Single	1	5
32	20	Female	Undergraduate	Philippines	4.8	Snapchat	Yes	5.7	6	In Relationship	3	7
33	18	Male	High School	Indonesia	5.4	TikTok	Yes	5.4	5	Complicated	4	8
34	23	Female	Graduate	Taiwan	2.6	LinkedIn	No	7.2	8	Single	1	4
35	19	Male	Undergraduate	Hong Kong	4.7	Instagram	Yes	5.8	6	In Relationship	3	7
36	20	Female	Undergraduate	Turkey	5.6	TikTok	Yes	5.5	5	Complicated	4	8
37	22	Male	Graduate	Israel	3.1	Facebook	No	6.8	7	Single	1	5
38	19	Female	High School	UAE	6.2	Instagram	Yes	5.1	5	In Relationship	4	9
39	21	Male	Undergraduate	Egypt	3.9	YouTube	No	6.5	7	Complicated	2	6
40	20	Female	Undergraduate	Morocco	4.5	TikTok	Yes	5.8	6	Single	3	7
41	24	Male	Graduate	South Africa	2.3	LinkedIn	No	7.3	8	In Relationship	1	4
42	19	Female	High School	Nigeria	5.8	Instagram	Yes	5.4	5	Complicated	4	8
43	21	Male	Undergraduate	Kenya	3.7	Facebook	No	6.6	7	Single	2	5
44	20	Female	Undergraduate	Ghana	4.6	Snapchat	Yes	5.7	6	In Relationship	3	7
45	18	Male	High School	Argentina	5.5	TikTok	Yes	5.3	5	Single	4	8
46	23	Female	Graduate	Chile	2.7	LinkedIn	No	7.1	8	Complicated	1	4
47	19	Male	Undergraduate	Colombia	4.8	Instagram	Yes	5.9	6	In Relationship	3	7
48	20	Female	Undergraduate	Peru	5.5	TikTok	Yes	5.6	5	Single	4	8
49	22	Male	Graduate	Venezuela	3.3	Facebook	No	6.7	7	In Relationship	2	5
50	19	Female	High School	Ecuador	6.3	Instagram	Yes	5.2	5	Complicated	4	9
51	21	Male	Undergraduate	Uruguay	3.8	YouTube	No	6.4	7	Single	2	6
52	20	Female	Undergraduate	Paraguay	4.7	TikTok	Yes	5.8	6	In Relationship	3	7
53	24	Male	Graduate	Bolivia	2.4	LinkedIn	No	7.2	8	Complicated	1	4
54	19	Female	High School	Costa Rica	5.7	Instagram	Yes	5.5	5	Single	4	8
55	21	Male	Undergraduate	Panama	3.6	Facebook	No	6.5	7	In Relationship	2	5
56	20	Female	Undergraduate	Jamaica	4.9	Snapchat	Yes	5.6	6	Complicated	3	7
57	18	Male	High School	Trinidad	5.6	TikTok	Yes	5.2	5	Single	4	8
58	23	Female	Graduate	Bahamas	2.8	LinkedIn	No	7.0	8	In Relationship	1	4
59	19	Male	Undergraduate	Iceland	4.6	Instagram	Yes	5.9	6	Complicated	3	7
60	20	Female	Undergraduate	Finland	5.4	TikTok	Yes	5.7	5	Single	4	8
61	22	Male	Graduate	Poland	3.1	Facebook	No	7.1	7	Single	1	5
62	19	Female	Undergraduate	Romania	5.6	Instagram	Yes	5.6	5	In Relationship	3	8
63	20	Male	Undergraduate	Hungary	4.2	TikTok	Yes	6.0	6	Complicated	3	7
64	18	Female	High School	Czech Republic	6.1	Snapchat	Yes	5.2	4	Single	4	9
65	23	Male	Graduate	Slovakia	2.3	LinkedIn	No	7.4	8	In Relationship	1	3
66	21	Female	Undergraduate	Croatia	4.8	Instagram	Yes	5.8	6	Single	3	7
67	20	Male	Undergraduate	Serbia	3.9	YouTube	No	6.5	7	Complicated	2	6
68	19	Female	High School	Slovenia	5.7	TikTok	Yes	5.4	5	In Relationship	4	8
69	22	Male	Graduate	Bulgaria	2.8	LinkedIn	No	7.2	8	Single	1	4
70	20	Female	Undergraduate	Estonia	4.5	Instagram	Yes	5.9	6	Complicated	3	7
71	18	Male	High School	Latvia	5.4	Snapchat	Yes	5.5	5	Single	4	8
72	21	Female	Graduate	Lithuania	3.2	Facebook	No	6.8	7	In Relationship	2	5
73	19	Male	Undergraduate	Ukraine	4.9	TikTok	Yes	5.7	6	Complicated	3	7
74	20	Female	Undergraduate	Moldova	5.8	Instagram	Yes	5.3	5	Single	4	8
75	23	Male	Graduate	Belarus	2.5	LinkedIn	No	7.3	8	In Relationship	1	4
76	21	Female	Undergraduate	Kazakhstan	4.6	Snapchat	Yes	5.8	6	Single	3	7
77	19	Male	High School	Uzbekistan	5.5	TikTok	Yes	5.4	5	Complicated	4	8
78	22	Female	Graduate	Kyrgyzstan	2.9	Facebook	No	7.0	7	In Relationship	2	5
79	20	Male	Undergraduate	Tajikistan	4.7	YouTube	Yes	5.9	6	Single	3	7
80	18	Female	High School	Armenia	5.9	Instagram	Yes	5.2	5	Complicated	4	9
81	21	Male	Graduate	Georgia	3.0	LinkedIn	No	7.1	8	In Relationship	1	4
82	19	Female	Undergraduate	Azerbaijan	4.8	TikTok	Yes	5.7	6	Single	3	7
83	20	Male	Undergraduate	Cyprus	3.8	Facebook	No	6.6	7	Complicated	2	6
84	22	Female	Graduate	Malta	2.7	LinkedIn	No	7.2	8	In Relationship	1	4
85	18	Male	High School	Luxembourg	5.6	Snapchat	Yes	5.3	5	Single	4	8
86	21	Female	Undergraduate	Monaco	4.5	Instagram	Yes	5.8	6	Complicated	3	7
87	19	Male	High School	Andorra	5.3	TikTok	Yes	5.5	5	In Relationship	4	8
88	23	Female	Graduate	San Marino	2.6	LinkedIn	No	7.3	8	Single	1	4
89	20	Male	Undergraduate	Vatican City	4.4	YouTube	Yes	6.0	6	Complicated	3	7
90	18	Female	High School	Liechtenstein	5.8	Instagram	Yes	5.2	5	Single	4	9
91	22	Male	Graduate	Montenegro	2.9	Facebook	No	7.0	7	In Relationship	2	5
92	19	Female	Undergraduate	Albania	4.7	TikTok	Yes	5.8	6	Complicated	3	7
93	21	Male	Undergraduate	North Macedonia	3.7	Snapchat	No	6.5	7	Single	2	6
94	20	Female	High School	Kosovo	5.5	Instagram	Yes	5.4	5	In Relationship	4	8
95	23	Male	Graduate	Bosnia	2.4	LinkedIn	No	7.4	8	Complicated	1	4
96	19	Female	Undergraduate	Qatar	4.9	TikTok	Yes	5.7	6	Single	3	7
97	18	Male	High School	Kuwait	5.7	Snapchat	Yes	5.3	5	In Relationship	4	8
98	22	Female	Graduate	Bahrain	2.8	LinkedIn	No	7.1	8	Complicated	1	4
99	20	Male	Undergraduate	Oman	4.6	Instagram	Yes	5.9	6	Single	3	7
100	21	Female	Undergraduate	Jordan	5.4	TikTok	Yes	5.5	5	In Relationship	4	8
101	19	Male	High School	Lebanon	5.8	YouTube	Yes	5.2	5	Complicated	4	9
102	23	Female	Graduate	Iraq	2.5	LinkedIn	No	7.3	8	Single	1	4
103	20	Male	Undergraduate	Yemen	4.7	Facebook	Yes	5.8	6	In Relationship	3	7
104	18	Female	High School	Syria	5.6	Instagram	Yes	5.4	5	Single	4	8
105	22	Male	Graduate	Afghanistan	2.9	LinkedIn	No	7.0	7	Complicated	2	5
106	19	Female	Undergraduate	Pakistan	4.8	TikTok	Yes	5.7	6	In Relationship	3	7
107	21	Male	Undergraduate	Nepal	3.8	YouTube	No	6.6	7	Single	2	6
108	20	Female	High School	Bhutan	5.5	Snapchat	Yes	5.5	5	Complicated	4	8
109	23	Male	Graduate	Sri Lanka	2.6	LinkedIn	No	7.2	8	In Relationship	1	4
110	19	Female	Undergraduate	Maldives	4.9	Instagram	Yes	5.8	6	Single	3	7
111	20	Male	Undergraduate	Bangladesh	6.1	Instagram	Yes	6.2	5	Single	4	8
112	21	Female	Undergraduate	India	5.8	TikTok	Yes	5.9	6	In Relationship	3	7
113	19	Male	Undergraduate	Nepal	4.9	Facebook	No	7.1	7	Single	2	5
114	22	Female	Graduate	Pakistan	5.5	Instagram	Yes	6.0	5	Single	4	8
115	20	Male	Undergraduate	Sri Lanka	5.2	TikTok	Yes	6.3	6	In Relationship	3	7
116	19	Female	Undergraduate	Maldives	4.8	Instagram	No	7.2	8	Single	2	5
117	21	Male	Graduate	Bangladesh	6.0	Facebook	Yes	5.8	5	In Relationship	4	8
118	20	Female	Undergraduate	India	5.7	Instagram	Yes	6.1	6	Single	3	7
119	22	Male	Graduate	Nepal	4.7	TikTok	No	7.3	7	Single	2	5
120	19	Female	Undergraduate	Pakistan	5.4	Instagram	Yes	6.2	5	In Relationship	4	8
121	20	Male	Undergraduate	Sri Lanka	5.9	Facebook	Yes	5.9	6	Single	3	7
122	21	Female	Graduate	Maldives	4.6	Instagram	No	7.4	8	In Relationship	2	5
123	19	Male	Undergraduate	Bangladesh	5.3	TikTok	Yes	6.3	5	Single	4	8
124	22	Female	Graduate	India	5.8	Instagram	Yes	5.8	6	In Relationship	3	7
125	20	Male	Undergraduate	Nepal	4.5	Facebook	No	7.5	7	Single	2	5
126	21	Female	Graduate	Pakistan	5.2	Instagram	Yes	6.4	5	In Relationship	4	8
127	19	Male	Undergraduate	Sri Lanka	5.7	TikTok	Yes	5.7	6	Single	3	7
128	20	Female	Undergraduate	Maldives	4.4	Instagram	No	7.6	8	In Relationship	2	5
129	22	Male	Graduate	Bangladesh	5.1	Facebook	Yes	6.5	5	Single	4	8
130	21	Female	Graduate	India	5.6	Instagram	Yes	5.6	6	In Relationship	3	7
131	19	Male	Undergraduate	Nepal	4.3	TikTok	No	7.7	7	Single	2	5
132	20	Female	Undergraduate	Pakistan	5.0	Instagram	Yes	6.6	5	In Relationship	4	8
133	22	Male	Graduate	Sri Lanka	5.5	Facebook	Yes	5.5	6	Single	3	7
134	21	Female	Graduate	Maldives	4.2	Instagram	No	7.8	8	In Relationship	2	5
135	19	Male	Undergraduate	Bangladesh	4.9	TikTok	Yes	6.7	5	Single	4	8
136	20	Female	Undergraduate	India	5.4	Instagram	Yes	5.4	6	In Relationship	3	7
137	22	Male	Graduate	Nepal	4.1	Facebook	No	7.9	7	Single	2	5
138	21	Female	Graduate	Pakistan	4.8	Instagram	Yes	6.8	5	In Relationship	4	8
139	19	Male	Undergraduate	Sri Lanka	5.3	TikTok	Yes	5.3	6	Single	3	7
140	20	Female	Undergraduate	Maldives	4.0	Instagram	No	8.0	8	In Relationship	2	5
141	22	Male	Graduate	Bangladesh	4.7	Facebook	Yes	6.9	5	Single	4	8
142	21	Female	Graduate	India	5.2	Instagram	Yes	5.2	6	In Relationship	3	7
143	19	Male	Undergraduate	Nepal	3.9	TikTok	No	8.1	7	Single	2	5
144	20	Female	Undergraduate	Pakistan	4.6	Instagram	Yes	7.0	5	In Relationship	4	8
145	22	Male	Graduate	Sri Lanka	5.1	Facebook	Yes	5.1	6	Single	3	7
146	21	Female	Graduate	Maldives	3.8	Instagram	No	8.2	8	In Relationship	2	5
147	19	Male	Undergraduate	Bangladesh	4.5	TikTok	Yes	7.1	5	Single	4	8
148	20	Female	Undergraduate	India	5.0	Instagram	Yes	5.0	6	In Relationship	3	7
149	22	Male	Graduate	Nepal	3.7	Facebook	No	8.3	7	Single	2	5
150	21	Female	Graduate	Pakistan	4.4	Instagram	Yes	7.2	5	In Relationship	4	8
151	19	Male	Undergraduate	Sri Lanka	4.9	TikTok	Yes	4.9	6	Single	3	7
152	20	Female	Undergraduate	Maldives	3.6	Instagram	No	8.4	8	In Relationship	2	5
153	22	Male	Graduate	Bangladesh	4.3	Facebook	Yes	7.3	5	Single	4	8
154	21	Female	Graduate	India	4.8	Instagram	Yes	4.8	6	In Relationship	3	7
155	19	Male	Undergraduate	Nepal	3.5	TikTok	No	8.5	7	Single	2	5
156	20	Female	Undergraduate	Pakistan	4.2	Instagram	Yes	7.4	5	In Relationship	4	8
157	22	Male	Graduate	Sri Lanka	4.7	Facebook	Yes	4.7	6	Single	3	7
158	21	Female	Graduate	Maldives	3.4	Instagram	No	8.6	8	In Relationship	2	5
159	19	Male	Undergraduate	Bangladesh	4.1	TikTok	Yes	7.5	5	Single	4	8
160	20	Female	Undergraduate	India	4.6	Instagram	Yes	4.6	6	In Relationship	3	7
161	19	Female	Undergraduate	Bangladesh	5.3	Instagram	Yes	6.1	5	Single	3	7
162	21	Male	Graduate	India	4.8	Facebook	No	7.2	7	In Relationship	2	6
163	20	Female	Undergraduate	Nepal	5.5	TikTok	Yes	5.9	6	Single	4	8
164	22	Male	Graduate	Pakistan	4.7	Instagram	Yes	6.3	5	In Relationship	3	7
165	19	Female	Undergraduate	Sri Lanka	5.1	Facebook	No	7.0	7	Single	2	5
166	21	Male	Graduate	Maldives	5.4	TikTok	Yes	6.0	6	In Relationship	4	8
167	20	Female	Undergraduate	Bangladesh	4.9	Instagram	Yes	6.4	5	Single	3	7
168	22	Male	Graduate	India	5.2	Facebook	No	7.1	7	In Relationship	2	6
169	19	Female	Undergraduate	Nepal	5.6	TikTok	Yes	5.8	6	Single	4	8
170	21	Male	Graduate	Pakistan	4.6	Instagram	Yes	6.5	5	In Relationship	3	7
171	20	Female	Undergraduate	Sri Lanka	5.0	Facebook	No	7.3	7	Single	2	5
172	22	Male	Graduate	Maldives	5.3	TikTok	Yes	5.7	6	In Relationship	4	8
173	19	Female	Undergraduate	Bangladesh	4.8	Instagram	Yes	6.6	5	Single	3	7
174	21	Male	Graduate	India	5.1	Facebook	No	7.4	7	In Relationship	2	6
175	20	Female	Undergraduate	Nepal	5.7	TikTok	Yes	5.6	6	Single	4	8
176	22	Male	Graduate	Pakistan	4.5	Instagram	Yes	6.7	5	In Relationship	3	7
177	19	Female	Undergraduate	Sri Lanka	4.9	Facebook	No	7.5	7	Single	2	5
178	21	Male	Graduate	Maldives	5.2	TikTok	Yes	5.5	6	In Relationship	4	8
179	20	Female	Undergraduate	Bangladesh	4.7	Instagram	Yes	6.8	5	Single	3	7
180	22	Male	Graduate	India	5.0	Facebook	No	7.6	7	In Relationship	2	6
181	19	Female	Undergraduate	Nepal	5.8	TikTok	Yes	5.4	6	Single	4	8
182	21	Male	Graduate	Pakistan	4.4	Instagram	Yes	6.9	5	In Relationship	3	7
183	20	Female	Undergraduate	Sri Lanka	4.8	Facebook	No	7.7	7	Single	2	5
184	22	Male	Graduate	Maldives	5.1	TikTok	Yes	5.3	6	In Relationship	4	8
185	19	Female	Undergraduate	Bangladesh	4.6	Instagram	Yes	7.0	5	Single	3	7
186	21	Male	Graduate	India	4.9	Facebook	No	7.8	7	In Relationship	2	6
187	20	Female	Undergraduate	Nepal	5.9	TikTok	Yes	5.2	6	Single	4	8
188	22	Male	Graduate	Pakistan	4.3	Instagram	Yes	7.1	5	In Relationship	3	7
189	19	Female	Undergraduate	Sri Lanka	4.7	Facebook	No	7.9	7	Single	2	5
190	21	Male	Graduate	Maldives	5.0	TikTok	Yes	5.1	6	In Relationship	4	8
191	20	Female	Undergraduate	Bangladesh	4.5	Instagram	Yes	7.2	5	Single	3	7
192	22	Male	Graduate	India	4.8	Facebook	No	8.0	7	In Relationship	2	6
193	19	Female	Undergraduate	Nepal	6.0	TikTok	Yes	5.0	6	Single	4	8
194	21	Male	Graduate	Pakistan	4.2	Instagram	Yes	7.3	5	In Relationship	3	7
195	20	Female	Undergraduate	Sri Lanka	4.6	Facebook	No	8.1	7	Single	2	5
196	22	Male	Graduate	Maldives	4.9	TikTok	Yes	4.9	6	In Relationship	4	8
197	19	Female	Undergraduate	Bangladesh	4.4	Instagram	Yes	7.4	5	Single	3	7
198	21	Male	Graduate	India	4.7	Facebook	No	8.2	7	In Relationship	2	6
199	20	Female	Undergraduate	Nepal	6.1	TikTok	Yes	4.8	6	Single	4	8
200	22	Male	Graduate	Pakistan	4.1	Instagram	Yes	7.5	5	In Relationship	3	7
201	19	Female	Undergraduate	Sri Lanka	4.5	Facebook	No	8.3	7	Single	2	5
202	21	Male	Graduate	Maldives	4.8	TikTok	Yes	4.7	6	In Relationship	4	8
203	20	Female	Undergraduate	Bangladesh	4.3	Instagram	Yes	7.6	5	Single	3	7
204	22	Male	Graduate	India	4.6	Facebook	No	8.4	7	In Relationship	2	6
205	19	Female	Undergraduate	Nepal	6.2	TikTok	Yes	4.6	6	Single	4	8
206	21	Male	Graduate	Pakistan	4.0	Instagram	Yes	7.7	5	In Relationship	3	7
207	20	Female	Undergraduate	Sri Lanka	4.4	Facebook	No	8.5	7	Single	2	5
208	22	Male	Graduate	Maldives	4.7	TikTok	Yes	4.5	6	In Relationship	4	8
209	19	Female	Undergraduate	Bangladesh	4.2	Instagram	Yes	7.8	5	Single	3	7
210	21	Male	Graduate	India	4.5	Facebook	No	8.6	7	In Relationship	2	6
211	20	Female	Undergraduate	Nepal	6.3	TikTok	Yes	4.4	6	Single	4	8
212	22	Male	Graduate	Pakistan	3.9	Instagram	Yes	7.9	5	In Relationship	3	7
213	19	Female	Undergraduate	Sri Lanka	4.3	Facebook	No	8.7	7	Single	2	5
214	21	Male	Graduate	Maldives	4.6	TikTok	Yes	4.3	6	In Relationship	4	8
215	20	Female	Undergraduate	Bangladesh	4.1	Instagram	Yes	8.0	5	Single	3	7
216	22	Male	Graduate	India	4.4	Facebook	No	8.8	7	In Relationship	2	6
217	19	Female	Undergraduate	Nepal	6.4	TikTok	Yes	4.2	6	Single	4	8
218	21	Male	Graduate	Pakistan	3.8	Instagram	Yes	8.1	5	In Relationship	3	7
219	20	Female	Undergraduate	Sri Lanka	4.2	Facebook	No	8.9	7	Single	2	5
220	22	Male	Graduate	Maldives	4.5	TikTok	Yes	4.1	6	In Relationship	4	8
221	19	Female	Undergraduate	USA	6.5	Instagram	Yes	6.0	5	Single	4	9
222	21	Male	Graduate	UK	5.8	TikTok	Yes	6.5	6	In Relationship	3	7
223	20	Female	Undergraduate	Australia	4.5	Instagram	No	7.5	8	Single	2	5
224	22	Male	Graduate	Germany	4.2	Facebook	No	7.8	7	In Relationship	2	4
225	19	Female	Undergraduate	Japan	3.8	LINE	No	7.9	8	Single	1	3
226	21	Male	Graduate	Italy	5.5	Instagram	Yes	6.8	6	Single	3	7
227	20	Female	Undergraduate	South Korea	5.2	KakaoTalk	Yes	6.5	6	In Relationship	3	6
228	22	Male	Graduate	Russia	4.8	VKontakte	No	7.2	7	Single	2	5
229	19	Female	Undergraduate	USA	7.0	TikTok	Yes	5.8	4	In Relationship	4	9
230	21	Male	Graduate	UK	5.5	Instagram	Yes	6.7	6	Single	3	7
231	20	Female	Undergraduate	Australia	4.7	Facebook	No	7.4	7	In Relationship	2	5
232	22	Male	Graduate	Germany	4.0	Instagram	No	7.9	8	Single	1	4
233	19	Female	Undergraduate	Japan	3.5	LINE	No	8.0	8	Single	1	3
234	21	Male	Graduate	Italy	5.7	TikTok	Yes	6.5	5	In Relationship	3	8
235	20	Female	Undergraduate	South Korea	5.0	KakaoTalk	Yes	6.8	6	Single	3	6
236	22	Male	Graduate	Russia	4.5	VKontakte	No	7.4	7	In Relationship	2	5
237	19	Female	Undergraduate	USA	6.8	Instagram	Yes	5.9	4	Single	4	9
238	21	Male	Graduate	UK	5.6	Facebook	Yes	6.6	6	In Relationship	3	7
239	20	Female	Undergraduate	Australia	4.6	Instagram	No	7.3	7	Single	2	5
240	22	Male	Graduate	Germany	4.1	Facebook	No	7.7	8	In Relationship	2	4
241	19	Female	Undergraduate	Japan	3.7	LINE	No	7.8	8	Single	1	3
242	21	Male	Graduate	Italy	5.4	Instagram	Yes	6.7	5	Single	3	7
243	20	Female	Undergraduate	South Korea	5.1	KakaoTalk	Yes	6.6	6	In Relationship	3	6
244	22	Male	Graduate	Russia	4.7	VKontakte	No	7.3	7	Single	2	5
245	19	Female	Undergraduate	USA	6.9	TikTok	Yes	5.7	4	In Relationship	4	9
246	21	Male	Graduate	UK	5.7	Instagram	Yes	6.4	6	Single	3	7
247	20	Female	Undergraduate	Australia	4.8	Facebook	No	7.2	7	In Relationship	2	5
248	22	Male	Graduate	Germany	3.9	Instagram	No	7.8	8	Single	1	4
249	19	Female	Undergraduate	Japan	3.6	LINE	No	8.1	8	Single	1	3
250	21	Male	Graduate	Italy	5.6	TikTok	Yes	6.6	5	In Relationship	3	8
251	20	Female	Undergraduate	South Korea	4.9	KakaoTalk	Yes	6.9	6	Single	3	6
252	22	Male	Graduate	Russia	4.6	VKontakte	No	7.5	7	In Relationship	2	5
253	19	Female	Undergraduate	USA	6.7	Instagram	Yes	5.8	4	Single	4	9
254	21	Male	Graduate	UK	5.4	Facebook	Yes	6.5	6	In Relationship	3	7
255	20	Female	Undergraduate	Australia	4.4	Instagram	No	7.4	7	Single	2	5
256	22	Male	Graduate	Germany	4.0	Facebook	No	7.6	8	In Relationship	2	4
257	19	Female	Undergraduate	Japan	3.4	LINE	No	8.2	8	Single	1	3
258	21	Male	Graduate	Italy	5.3	Instagram	Yes	6.8	5	Single	3	7
259	20	Female	Undergraduate	South Korea	5.0	KakaoTalk	Yes	6.7	6	In Relationship	3	6
260	22	Male	Graduate	Russia	4.4	VKontakte	No	7.6	7	Single	2	5
261	19	Female	Undergraduate	USA	6.6	TikTok	Yes	5.6	4	In Relationship	4	9
262	21	Male	Graduate	UK	5.3	Instagram	Yes	6.3	6	Single	3	7
263	20	Female	Undergraduate	Australia	4.3	Facebook	No	7.5	7	In Relationship	2	5
264	22	Male	Graduate	Germany	3.8	Instagram	No	7.7	8	Single	1	4
265	19	Female	Undergraduate	Japan	3.3	LINE	No	8.3	8	Single	1	3
266	21	Male	Graduate	Italy	5.2	TikTok	Yes	6.9	5	In Relationship	3	8
267	20	Female	Undergraduate	South Korea	4.8	KakaoTalk	Yes	7.0	6	Single	3	6
268	22	Male	Graduate	Russia	4.3	VKontakte	No	7.7	7	In Relationship	2	5
269	19	Female	Undergraduate	USA	6.4	Instagram	Yes	5.7	4	Single	4	9
270	21	Male	Graduate	UK	5.2	Facebook	Yes	6.4	6	In Relationship	3	7
271	20	Female	Undergraduate	Australia	4.5	Instagram	No	7.3	7	Single	2	5
272	22	Male	Graduate	Germany	3.7	Facebook	No	7.8	8	In Relationship	1	4
273	19	Female	Undergraduate	Japan	3.2	LINE	No	8.4	8	Single	1	3
274	21	Male	Graduate	Italy	5.4	Instagram	Yes	6.7	5	Single	3	7
275	20	Female	Undergraduate	South Korea	4.7	KakaoTalk	Yes	7.1	6	In Relationship	3	6
276	22	Male	Graduate	Russia	4.2	VKontakte	No	7.8	7	Single	2	5
277	19	Female	Undergraduate	USA	6.6	TikTok	Yes	5.5	4	In Relationship	4	9
278	21	Male	Graduate	UK	5.1	Instagram	Yes	6.5	6	Single	3	7
279	20	Female	Undergraduate	Australia	4.4	Facebook	No	7.4	7	In Relationship	2	5
280	22	Male	Graduate	Germany	3.6	Instagram	No	7.9	8	Single	1	4
281	19	Female	Undergraduate	Japan	3.1	LINE	No	8.5	8	Single	1	3
282	21	Male	Graduate	Italy	5.3	TikTok	Yes	6.8	5	In Relationship	3	8
283	20	Female	Undergraduate	South Korea	4.6	KakaoTalk	Yes	7.2	6	Single	3	6
284	22	Male	Graduate	Russia	4.1	VKontakte	No	7.9	7	In Relationship	2	5
285	19	Female	Undergraduate	USA	6.7	Instagram	Yes	5.4	4	Single	4	9
286	21	Male	Graduate	UK	5.0	Facebook	Yes	6.6	6	In Relationship	3	7
287	20	Female	Undergraduate	Australia	4.3	Instagram	No	7.5	7	Single	2	5
288	22	Male	Graduate	Germany	3.5	Facebook	No	8.0	8	In Relationship	1	4
289	19	Female	Undergraduate	Japan	3.0	LINE	No	8.6	8	Single	1	3
290	21	Male	Graduate	Italy	5.2	Instagram	Yes	6.9	5	Single	3	7
291	20	Female	Undergraduate	South Korea	4.5	KakaoTalk	Yes	7.3	6	In Relationship	3	6
292	22	Male	Graduate	Russia	4.0	VKontakte	No	8.0	7	Single	2	5
293	19	Female	Undergraduate	USA	6.8	TikTok	Yes	5.3	4	In Relationship	4	9
294	21	Male	Graduate	UK	4.9	Instagram	Yes	6.7	6	Single	3	7
295	20	Female	Undergraduate	Australia	4.2	Facebook	No	7.6	7	In Relationship	2	5
296	22	Male	Graduate	Germany	3.4	Instagram	No	8.1	8	Single	1	4
297	19	Female	Undergraduate	Japan	2.9	LINE	No	8.7	8	Single	1	3
298	21	Male	Graduate	Italy	5.1	TikTok	Yes	7.0	5	In Relationship	3	8
299	20	Female	Undergraduate	South Korea	4.4	KakaoTalk	Yes	7.4	6	Single	3	6
300	22	Male	Graduate	Russia	3.9	VKontakte	No	8.1	7	In Relationship	2	5
301	19	Female	Undergraduate	USA	6.9	Instagram	Yes	5.2	4	Single	4	9
302	21	Male	Graduate	UK	4.8	Facebook	Yes	6.8	6	In Relationship	3	7
303	20	Female	Undergraduate	Australia	4.1	Instagram	No	7.7	7	Single	2	5
304	22	Male	Graduate	Germany	3.3	Facebook	No	8.2	8	In Relationship	1	4
305	19	Female	Undergraduate	Japan	2.8	LINE	No	8.8	8	Single	1	3
306	21	Male	Graduate	Italy	5.0	Instagram	Yes	7.1	5	Single	3	7
307	20	Female	Undergraduate	South Korea	4.3	KakaoTalk	Yes	7.5	6	In Relationship	3	6
308	22	Male	Graduate	Russia	3.8	VKontakte	No	8.2	7	Single	2	5
309	19	Female	Undergraduate	USA	7.0	TikTok	Yes	5.1	4	In Relationship	4	9
310	21	Male	Graduate	UK	4.7	Instagram	Yes	6.9	6	Single	3	7
311	20	Female	Undergraduate	Australia	4.0	Facebook	No	7.8	7	In Relationship	2	5
312	22	Male	Graduate	Germany	3.2	Instagram	No	8.3	8	Single	1	4
313	19	Female	Undergraduate	Japan	2.7	LINE	No	8.9	8	Single	1	3
314	21	Male	Graduate	Italy	4.9	TikTok	Yes	7.2	5	In Relationship	3	8
315	20	Female	Undergraduate	South Korea	4.2	KakaoTalk	Yes	7.6	6	Single	3	6
316	22	Male	Graduate	Russia	3.7	VKontakte	No	8.3	7	In Relationship	2	5
317	19	Female	Undergraduate	USA	7.1	Instagram	Yes	5.0	4	Single	4	9
318	21	Male	Graduate	UK	4.6	Facebook	Yes	7.0	6	In Relationship	3	7
319	20	Female	Undergraduate	Australia	3.9	Instagram	No	7.9	7	Single	2	5
320	22	Male	Graduate	Germany	3.1	Facebook	No	8.4	8	In Relationship	1	4
321	19	Female	Undergraduate	Spain	5.2	Instagram	Yes	6.8	6	Single	3	7
322	21	Male	Graduate	Denmark	4.1	Facebook	No	7.8	8	In Relationship	2	4
323	20	Female	Undergraduate	Ireland	5.0	Instagram	Yes	7.0	7	Single	3	6
324	22	Male	Graduate	India	5.8	WhatsApp	Yes	6.5	5	In Relationship	4	8
325	19	Female	Undergraduate	Switzerland	4.0	Instagram	No	7.9	8	Single	2	4
326	21	Male	Graduate	Turkey	5.5	Instagram	Yes	6.7	6	Single	3	7
327	20	Female	Undergraduate	USA	6.8	TikTok	Yes	5.5	5	In Relationship	4	9
328	22	Male	Graduate	Mexico	5.6	WhatsApp	Yes	6.6	6	Single	3	7
329	19	Female	Undergraduate	France	4.5	Instagram	No	7.5	7	In Relationship	2	5
330	21	Male	Graduate	Canada	5.3	Instagram	Yes	6.9	6	Single	3	7
331	20	Female	Undergraduate	Spain	5.1	TikTok	Yes	6.7	6	Single	3	7
332	22	Male	Graduate	Denmark	3.9	Facebook	No	7.9	8	In Relationship	2	4
333	19	Female	Undergraduate	Ireland	4.8	Instagram	Yes	7.1	7	Single	3	6
334	21	Male	Graduate	India	5.9	WhatsApp	Yes	6.4	5	In Relationship	4	8
335	20	Female	Undergraduate	Switzerland	3.8	Instagram	No	8.0	8	Single	2	4
336	22	Male	Graduate	Turkey	5.4	TikTok	Yes	6.8	6	Single	3	7
337	19	Female	Undergraduate	USA	6.9	Instagram	Yes	5.4	5	In Relationship	4	9
338	21	Male	Graduate	Mexico	5.7	WhatsApp	Yes	6.5	6	Single	3	7
339	20	Female	Undergraduate	France	4.4	Instagram	No	7.6	7	In Relationship	2	5
340	22	Male	Graduate	Canada	5.2	TikTok	Yes	7.0	6	Single	3	7
341	19	Female	Undergraduate	Spain	5.0	Instagram	Yes	6.9	6	Single	3	7
342	21	Male	Graduate	Denmark	3.8	Facebook	No	8.0	8	In Relationship	2	4
343	20	Female	Undergraduate	Ireland	4.7	TikTok	Yes	7.2	7	Single	3	6
344	22	Male	Graduate	India	6.0	WhatsApp	Yes	6.3	5	In Relationship	4	8
345	19	Female	Undergraduate	Switzerland	3.7	Instagram	No	8.1	8	Single	2	4
346	21	Male	Graduate	Turkey	5.3	Instagram	Yes	6.9	6	Single	3	7
347	20	Female	Undergraduate	USA	7.0	TikTok	Yes	5.3	5	In Relationship	4	9
348	22	Male	Graduate	Mexico	5.8	WhatsApp	Yes	6.4	6	Single	3	7
349	19	Female	Undergraduate	France	4.3	Instagram	No	7.7	7	In Relationship	2	5
350	21	Male	Graduate	Canada	5.1	Instagram	Yes	7.1	6	Single	3	7
351	20	Female	Undergraduate	Spain	4.9	TikTok	Yes	7.0	6	Single	3	7
352	22	Male	Graduate	Denmark	3.7	Facebook	No	8.1	8	In Relationship	2	4
353	19	Female	Undergraduate	Ireland	4.6	Instagram	Yes	7.3	7	Single	3	6
354	21	Male	Graduate	India	6.1	WhatsApp	Yes	6.2	5	In Relationship	4	8
355	20	Female	Undergraduate	Switzerland	3.6	Instagram	No	8.2	8	Single	2	4
356	22	Male	Graduate	Turkey	5.2	TikTok	Yes	7.0	6	Single	3	7
357	19	Female	Undergraduate	USA	7.1	Instagram	Yes	5.2	5	In Relationship	4	9
358	21	Male	Graduate	Mexico	5.9	WhatsApp	Yes	6.3	6	Single	3	7
359	20	Female	Undergraduate	France	4.2	Instagram	No	7.8	7	In Relationship	2	5
360	22	Male	Graduate	Canada	5.0	TikTok	Yes	7.2	6	Single	3	7
361	19	Female	Undergraduate	Spain	4.8	Instagram	Yes	7.1	6	Single	3	7
362	21	Male	Graduate	Denmark	3.6	Facebook	No	8.2	8	In Relationship	2	4
363	20	Female	Undergraduate	Ireland	4.5	TikTok	Yes	7.4	7	Single	3	6
364	22	Male	Graduate	India	6.2	WhatsApp	Yes	6.1	5	In Relationship	4	8
365	19	Female	Undergraduate	Switzerland	3.5	Instagram	No	8.3	8	Single	2	4
366	21	Male	Graduate	Turkey	5.1	Instagram	Yes	7.1	6	Single	3	7
367	20	Female	Undergraduate	USA	7.2	TikTok	Yes	5.1	5	In Relationship	4	9
368	22	Male	Graduate	Mexico	6.0	WhatsApp	Yes	6.2	6	Single	3	7
369	19	Female	Undergraduate	France	4.1	Instagram	No	7.9	7	In Relationship	2	5
370	21	Male	Graduate	Canada	4.9	Instagram	Yes	7.3	6	Single	3	7
371	20	Female	Undergraduate	Spain	4.7	TikTok	Yes	7.2	6	Single	3	7
372	22	Male	Graduate	Denmark	3.5	Facebook	No	8.3	8	In Relationship	2	4
373	19	Female	Undergraduate	Ireland	4.4	Instagram	Yes	7.5	7	Single	3	6
374	21	Male	Graduate	India	6.3	WhatsApp	Yes	6.0	5	In Relationship	4	8
375	20	Female	Undergraduate	Switzerland	3.4	Instagram	No	8.4	8	Single	2	4
376	22	Male	Graduate	Turkey	5.0	TikTok	Yes	7.2	6	Single	3	7
377	19	Female	Undergraduate	USA	7.3	Instagram	Yes	5.0	5	In Relationship	4	9
378	21	Male	Graduate	Mexico	6.1	WhatsApp	Yes	6.1	6	Single	3	7
379	20	Female	Undergraduate	France	4.0	Instagram	No	8.0	7	In Relationship	2	5
380	22	Male	Graduate	Canada	4.8	TikTok	Yes	7.4	6	Single	3	7
381	19	Female	Undergraduate	Spain	4.6	Instagram	Yes	7.3	6	Single	3	7
382	21	Male	Graduate	Denmark	3.4	Facebook	No	8.4	8	In Relationship	2	4
383	20	Female	Undergraduate	Ireland	4.3	TikTok	Yes	7.6	7	Single	3	6
384	22	Male	Graduate	India	6.4	WhatsApp	Yes	5.9	5	In Relationship	4	8
385	19	Female	Undergraduate	Switzerland	3.3	Instagram	No	8.5	8	Single	2	4
386	21	Male	Graduate	Turkey	4.9	Instagram	Yes	7.3	6	Single	3	7
387	20	Female	Undergraduate	USA	7.4	TikTok	Yes	4.9	5	In Relationship	4	9
388	22	Male	Graduate	Mexico	6.2	WhatsApp	Yes	6.0	6	Single	3	7
389	19	Female	Undergraduate	France	3.9	Instagram	No	8.1	7	In Relationship	2	5
390	21	Male	Graduate	Canada	4.7	Instagram	Yes	7.5	6	Single	3	7
391	20	Female	Undergraduate	Spain	4.5	TikTok	Yes	7.4	6	Single	3	7
392	22	Male	Graduate	Denmark	3.3	Facebook	No	8.5	8	In Relationship	2	4
393	19	Female	Undergraduate	Ireland	4.2	Instagram	Yes	7.7	7	Single	3	6
394	21	Male	Graduate	India	6.5	WhatsApp	Yes	5.8	5	In Relationship	4	8
395	20	Female	Undergraduate	Switzerland	3.2	Instagram	No	8.6	8	Single	2	4
396	22	Male	Graduate	Turkey	4.8	TikTok	Yes	7.4	6	Single	3	7
397	19	Female	Undergraduate	USA	7.5	Instagram	Yes	4.8	5	In Relationship	4	9
398	21	Male	Graduate	Mexico	6.3	WhatsApp	Yes	5.9	6	Single	3	7
399	20	Female	Undergraduate	France	3.8	Instagram	No	8.2	7	In Relationship	2	5
400	22	Male	Graduate	Canada	4.6	TikTok	Yes	7.6	6	Single	3	7
401	19	Female	Undergraduate	Spain	4.4	Instagram	Yes	7.5	6	Single	3	7
402	21	Male	Graduate	Denmark	3.2	Facebook	No	8.6	8	In Relationship	2	4
403	20	Female	Undergraduate	Ireland	4.1	TikTok	Yes	7.8	7	Single	3	6
404	22	Male	Graduate	India	6.6	WhatsApp	Yes	5.7	5	In Relationship	4	8
405	19	Female	Undergraduate	Switzerland	3.1	Instagram	No	8.7	8	Single	2	4
406	21	Male	Graduate	Turkey	4.7	Instagram	Yes	7.5	6	Single	3	7
407	20	Female	Undergraduate	USA	7.6	TikTok	Yes	4.7	5	In Relationship	4	9
408	22	Male	Graduate	Mexico	6.4	WhatsApp	Yes	5.8	6	Single	3	7
409	19	Female	Undergraduate	France	3.7	Instagram	No	8.3	7	In Relationship	2	5
410	21	Male	Graduate	Canada	4.5	Instagram	Yes	7.7	6	Single	3	7
411	20	Female	Undergraduate	Spain	4.3	TikTok	Yes	7.6	6	Single	3	7
412	22	Male	Graduate	Denmark	3.1	Facebook	No	8.7	8	In Relationship	2	4
413	19	Female	Undergraduate	Ireland	4.0	Instagram	Yes	7.9	7	Single	3	6
414	21	Male	Graduate	India	6.7	WhatsApp	Yes	5.6	5	In Relationship	4	8
415	20	Female	Undergraduate	Switzerland	3.0	Instagram	No	8.8	8	Single	2	4
416	22	Male	Graduate	Turkey	4.6	TikTok	Yes	7.6	6	Single	3	7
417	19	Female	Undergraduate	USA	7.7	Instagram	Yes	4.6	5	In Relationship	4	9
418	21	Male	Graduate	Mexico	6.5	WhatsApp	Yes	5.7	6	Single	3	7
419	20	Female	Undergraduate	France	3.6	Instagram	No	8.4	7	In Relationship	2	5
420	22	Male	Graduate	Canada	4.4	TikTok	Yes	7.8	6	Single	3	7
421	19	Female	Undergraduate	Spain	4.2	Instagram	Yes	7.7	6	Single	3	7
422	21	Male	Graduate	Denmark	3.0	Facebook	No	8.8	8	In Relationship	2	4
423	20	Female	Undergraduate	Ireland	3.9	TikTok	Yes	8.0	7	Single	3	6
424	22	Male	Graduate	India	6.8	WhatsApp	Yes	5.5	5	In Relationship	4	8
425	19	Female	Undergraduate	Switzerland	2.9	Instagram	No	8.9	8	Single	2	4
426	21	Male	Graduate	Turkey	4.5	Instagram	Yes	7.7	6	Single	3	7
427	20	Female	Undergraduate	USA	7.8	TikTok	Yes	4.5	5	In Relationship	4	9
428	22	Male	Graduate	Mexico	6.6	WhatsApp	Yes	5.6	6	Single	3	7
429	19	Female	Undergraduate	France	3.5	Instagram	No	8.5	7	In Relationship	2	5
430	21	Male	Graduate	Canada	4.3	Instagram	Yes	7.9	6	Single	3	7
431	20	Female	Undergraduate	Spain	4.1	TikTok	Yes	7.8	6	Single	3	7
432	22	Male	Graduate	Denmark	2.9	Facebook	No	8.9	8	In Relationship	2	4
433	19	Female	Undergraduate	Ireland	3.8	Instagram	Yes	8.1	7	Single	3	6
434	21	Male	Graduate	India	6.9	WhatsApp	Yes	5.4	5	In Relationship	4	8
435	20	Female	Undergraduate	Switzerland	2.8	Instagram	No	9.0	8	Single	2	4
436	22	Male	Graduate	Turkey	4.4	TikTok	Yes	7.8	6	Single	3	7
437	19	Female	Undergraduate	USA	7.9	Instagram	Yes	4.4	5	In Relationship	4	9
438	21	Male	Graduate	Mexico	6.7	WhatsApp	Yes	5.5	6	Single	3	7
439	20	Female	Undergraduate	France	3.4	Instagram	No	8.6	7	In Relationship	2	5
440	22	Male	Graduate	Canada	4.2	TikTok	Yes	8.0	6	Single	3	7
441	19	Female	Undergraduate	Spain	4.0	Instagram	Yes	7.9	6	Single	3	7
442	21	Male	Graduate	Denmark	2.8	Facebook	No	9.0	8	In Relationship	2	4
443	20	Female	Undergraduate	Ireland	3.7	TikTok	Yes	8.2	7	Single	3	6
444	22	Male	Graduate	India	7.0	WhatsApp	Yes	5.3	5	In Relationship	4	8
445	19	Female	Undergraduate	Switzerland	2.7	Instagram	No	9.1	8	Single	2	4
446	21	Male	Graduate	Turkey	4.3	Instagram	Yes	7.9	6	Single	3	7
447	20	Female	Undergraduate	USA	8.0	TikTok	Yes	4.3	5	In Relationship	4	9
448	22	Male	Graduate	Mexico	6.8	WhatsApp	Yes	5.4	6	Single	3	7
449	19	Female	Undergraduate	France	3.3	Instagram	No	8.7	7	In Relationship	2	5
450	21	Male	Graduate	Canada	4.1	Instagram	Yes	8.1	6	Single	3	7
451	20	Female	Undergraduate	Spain	3.9	TikTok	Yes	8.0	6	Single	3	7
452	22	Male	Graduate	Denmark	2.7	Facebook	No	9.1	8	In Relationship	2	4
453	19	Female	Undergraduate	Ireland	3.6	Instagram	Yes	8.3	7	Single	3	6
454	21	Male	Graduate	India	7.1	WhatsApp	Yes	5.2	5	In Relationship	4	8
455	20	Female	Undergraduate	Switzerland	2.6	Instagram	No	9.2	8	Single	2	4
456	22	Male	Graduate	Turkey	4.2	TikTok	Yes	8.0	6	Single	3	7
457	19	Female	Undergraduate	USA	8.1	Instagram	Yes	4.2	5	In Relationship	4	9
458	21	Male	Graduate	Mexico	6.9	WhatsApp	Yes	5.3	6	Single	3	7
459	20	Female	Undergraduate	France	3.2	Instagram	No	8.8	7	In Relationship	2	5
460	22	Male	Graduate	Canada	4.0	TikTok	Yes	8.2	6	Single	3	7
461	19	Female	Undergraduate	Spain	3.8	Instagram	Yes	8.1	6	Single	3	7
462	21	Male	Graduate	Denmark	2.6	Facebook	No	9.2	8	In Relationship	2	4
463	20	Female	Undergraduate	Ireland	3.5	TikTok	Yes	8.4	7	Single	3	6
464	22	Male	Graduate	India	7.2	WhatsApp	Yes	5.1	5	In Relationship	4	8
465	19	Female	Undergraduate	Switzerland	2.5	Instagram	No	9.3	8	Single	2	4
466	21	Male	Graduate	Turkey	4.1	Instagram	Yes	8.1	6	Single	3	7
467	20	Female	Undergraduate	USA	8.2	TikTok	Yes	4.1	5	In Relationship	4	9
468	22	Male	Graduate	Mexico	7.0	WhatsApp	Yes	5.2	6	Single	3	7
469	19	Female	Undergraduate	France	3.1	Instagram	No	8.9	7	In Relationship	2	5
470	21	Male	Graduate	Canada	3.9	Instagram	Yes	8.3	6	Single	3	7
471	20	Female	Undergraduate	Spain	3.7	TikTok	Yes	8.2	6	Single	3	7
472	22	Male	Graduate	Denmark	2.5	Facebook	No	9.3	8	In Relationship	2	4
473	19	Female	Undergraduate	Ireland	3.4	Instagram	Yes	8.5	7	Single	3	6
474	21	Male	Graduate	India	7.3	WhatsApp	Yes	5.0	5	In Relationship	4	8
475	20	Female	Undergraduate	Switzerland	2.4	Instagram	No	9.4	8	Single	2	4
476	22	Male	Graduate	Turkey	4.0	TikTok	Yes	8.2	6	Single	3	7
477	19	Female	Undergraduate	USA	8.3	Instagram	Yes	4.0	5	In Relationship	4	9
478	21	Male	Graduate	Mexico	7.1	WhatsApp	Yes	5.1	6	Single	3	7
479	20	Female	Undergraduate	France	3.0	Instagram	No	9.0	7	In Relationship	2	5
480	22	Male	Graduate	Canada	3.8	TikTok	Yes	8.4	6	Single	3	7
481	19	Female	Undergraduate	Spain	3.6	Instagram	Yes	8.3	6	Single	3	7
482	21	Male	Graduate	Denmark	2.4	Facebook	No	9.4	8	In Relationship	2	4
483	20	Female	Undergraduate	Ireland	3.3	TikTok	Yes	8.6	7	Single	3	6
484	22	Male	Graduate	India	7.4	WhatsApp	Yes	4.9	5	In Relationship	4	8
485	19	Female	Undergraduate	Switzerland	2.3	Instagram	No	9.5	8	Single	2	4
486	21	Male	Graduate	Turkey	3.9	Instagram	Yes	8.3	6	Single	3	7
487	20	Female	Undergraduate	USA	8.4	TikTok	Yes	3.9	5	In Relationship	4	9
488	22	Male	Graduate	Mexico	7.2	WhatsApp	Yes	5.0	6	Single	3	7
489	19	Female	Undergraduate	France	2.9	Instagram	No	9.1	7	In Relationship	2	5
490	21	Male	Graduate	Canada	3.7	Instagram	Yes	8.5	6	Single	3	7
491	20	Female	Undergraduate	Spain	3.5	TikTok	Yes	8.4	6	Single	3	7
492	22	Male	Graduate	Denmark	2.3	Facebook	No	9.5	8	In Relationship	2	4
493	19	Female	Undergraduate	Ireland	3.2	Instagram	Yes	8.7	7	Single	3	6
494	21	Male	Graduate	India	7.5	WhatsApp	Yes	4.8	5	In Relationship	4	8
495	20	Female	Undergraduate	Switzerland	2.2	Instagram	No	9.6	8	Single	2	4
496	22	Male	Graduate	Turkey	3.8	TikTok	Yes	8.4	6	Single	3	7
497	19	Female	Undergraduate	USA	8.5	Instagram	Yes	3.8	5	In Relationship	4	9
498	21	Male	Graduate	Mexico	7.3	WhatsApp	Yes	4.9	6	Single	3	7
499	20	Female	Undergraduate	France	2.8	Instagram	No	9.2	7	In Relationship	2	5
500	22	Male	Graduate	Canada	3.6	TikTok	Yes	8.6	6	Single	3	7
501	19	Female	Undergraduate	Brazil	6.2	WhatsApp	Yes	6.3	6	Single	3	7
502	21	Male	Graduate	China	4.5	WeChat	No	7.8	7	In Relationship	2	5
503	20	Female	Undergraduate	Netherlands	3.8	Instagram	No	8.2	8	Single	2	4
504	22	Male	Graduate	New Zealand	4.7	Instagram	Yes	7.5	7	In Relationship	3	6
505	19	Female	Undergraduate	Singapore	5.1	TikTok	Yes	7.0	6	Single	3	7
506	21	Male	Graduate	Malaysia	5.5	WhatsApp	Yes	6.8	6	Single	3	7
507	20	Female	Undergraduate	UAE	6.5	Instagram	Yes	6.5	5	In Relationship	4	8
508	22	Male	Graduate	Poland	4.2	Facebook	No	7.9	7	Single	2	5
509	19	Female	Undergraduate	India	6.8	WhatsApp	Yes	6.0	5	In Relationship	4	8
510	21	Male	Graduate	Canada	4.8	Instagram	Yes	7.4	7	Single	3	6
511	20	Female	Undergraduate	Brazil	6.1	Instagram	Yes	6.4	6	Single	3	7
512	22	Male	Graduate	China	4.4	WeChat	No	7.9	7	In Relationship	2	5
513	19	Female	Undergraduate	Netherlands	3.7	TikTok	No	8.3	8	Single	2	4
514	21	Male	Graduate	New Zealand	4.6	Instagram	Yes	7.6	7	In Relationship	3	6
515	20	Female	Undergraduate	Singapore	5.2	TikTok	Yes	6.9	6	Single	3	7
516	22	Male	Graduate	Malaysia	5.6	WhatsApp	Yes	6.7	6	Single	3	7
517	19	Female	Undergraduate	UAE	6.6	Instagram	Yes	6.4	5	In Relationship	4	8
518	21	Male	Graduate	Poland	4.1	Facebook	No	8.0	7	Single	2	5
519	20	Female	Undergraduate	India	6.9	WhatsApp	Yes	5.9	5	In Relationship	4	8
520	22	Male	Graduate	Canada	4.7	TikTok	Yes	7.5	7	Single	3	6
521	19	Female	Undergraduate	Brazil	6.0	WhatsApp	Yes	6.5	6	Single	3	7
522	21	Male	Graduate	China	4.3	WeChat	No	8.0	7	In Relationship	2	5
523	20	Female	Undergraduate	Netherlands	3.6	Instagram	No	8.4	8	Single	2	4
524	22	Male	Graduate	New Zealand	4.5	Facebook	Yes	7.7	7	In Relationship	3	6
525	19	Female	Undergraduate	Singapore	5.3	TikTok	Yes	6.8	6	Single	3	7
526	21	Male	Graduate	Malaysia	5.7	WhatsApp	Yes	6.6	6	Single	3	7
527	20	Female	Undergraduate	UAE	6.7	Instagram	Yes	6.3	5	In Relationship	4	8
528	22	Male	Graduate	Poland	4.0	Facebook	No	8.1	7	Single	2	5
529	19	Female	Undergraduate	India	7.0	WhatsApp	Yes	5.8	5	In Relationship	4	8
530	21	Male	Graduate	Canada	4.6	Instagram	Yes	7.6	7	Single	3	6
531	20	Female	Undergraduate	Brazil	5.9	TikTok	Yes	6.6	6	Single	3	7
532	22	Male	Graduate	China	4.2	WeChat	No	8.1	7	In Relationship	2	5
533	19	Female	Undergraduate	Netherlands	3.5	Instagram	No	8.5	8	Single	2	4
534	21	Male	Graduate	New Zealand	4.4	Facebook	Yes	7.8	7	In Relationship	3	6
535	20	Female	Undergraduate	Singapore	5.4	TikTok	Yes	6.7	6	Single	3	7
536	22	Male	Graduate	Malaysia	5.8	WhatsApp	Yes	6.5	6	Single	3	7
537	19	Female	Undergraduate	UAE	6.8	Instagram	Yes	6.2	5	In Relationship	4	8
538	21	Male	Graduate	Poland	3.9	Facebook	No	8.2	7	Single	2	5
539	20	Female	Undergraduate	India	7.1	WhatsApp	Yes	5.7	5	In Relationship	4	8
540	22	Male	Graduate	Canada	4.5	TikTok	Yes	7.7	7	Single	3	6
541	19	Female	Undergraduate	Brazil	5.8	WhatsApp	Yes	6.7	6	Single	3	7
542	21	Male	Graduate	China	4.1	WeChat	No	8.2	7	In Relationship	2	5
543	20	Female	Undergraduate	Netherlands	3.4	Instagram	No	8.6	8	Single	2	4
544	22	Male	Graduate	New Zealand	4.3	Instagram	Yes	7.9	7	In Relationship	3	6
545	19	Female	Undergraduate	Singapore	5.5	TikTok	Yes	6.6	6	Single	3	7
546	21	Male	Graduate	Malaysia	5.9	WhatsApp	Yes	6.4	6	Single	3	7
547	20	Female	Undergraduate	UAE	6.9	Instagram	Yes	6.1	5	In Relationship	4	8
548	22	Male	Graduate	Poland	3.8	Facebook	No	8.3	7	Single	2	5
549	19	Female	Undergraduate	India	7.2	WhatsApp	Yes	5.6	5	In Relationship	4	8
550	21	Male	Graduate	Canada	4.4	Instagram	Yes	7.8	7	Single	3	6
551	20	Female	Undergraduate	Brazil	5.7	TikTok	Yes	6.8	6	Single	3	7
552	22	Male	Graduate	China	4.0	WeChat	No	8.3	7	In Relationship	2	5
553	19	Female	Undergraduate	Netherlands	3.3	Instagram	No	8.7	8	Single	2	4
554	21	Male	Graduate	New Zealand	4.2	Facebook	Yes	8.0	7	In Relationship	3	6
555	20	Female	Undergraduate	Singapore	5.6	TikTok	Yes	6.5	6	Single	3	7
556	22	Male	Graduate	Malaysia	6.0	WhatsApp	Yes	6.3	6	Single	3	7
557	19	Female	Undergraduate	UAE	7.0	Instagram	Yes	6.0	5	In Relationship	4	8
558	21	Male	Graduate	Poland	3.7	Facebook	No	8.4	7	Single	2	5
559	20	Female	Undergraduate	India	7.3	WhatsApp	Yes	5.5	5	In Relationship	4	8
560	22	Male	Graduate	Canada	4.3	TikTok	Yes	7.9	7	Single	3	6
561	19	Female	Undergraduate	Brazil	5.6	WhatsApp	Yes	6.9	6	Single	3	7
562	21	Male	Graduate	China	3.9	WeChat	No	8.4	7	In Relationship	2	5
563	20	Female	Undergraduate	Netherlands	3.2	Instagram	No	8.8	8	Single	2	4
564	22	Male	Graduate	New Zealand	4.1	Instagram	Yes	8.1	7	In Relationship	3	6
565	19	Female	Undergraduate	Singapore	5.7	TikTok	Yes	6.4	6	Single	3	7
566	21	Male	Graduate	Malaysia	6.1	WhatsApp	Yes	6.2	6	Single	3	7
567	20	Female	Undergraduate	UAE	7.1	Instagram	Yes	5.9	5	In Relationship	4	8
568	22	Male	Graduate	Poland	3.6	Facebook	No	8.5	7	Single	2	5
569	19	Female	Undergraduate	India	7.4	WhatsApp	Yes	5.4	5	In Relationship	4	8
570	21	Male	Graduate	Canada	4.2	Instagram	Yes	8.0	7	Single	3	6
571	20	Female	Undergraduate	Spain	6.1	Instagram	Yes	7.2	5	Single	4	7
572	23	Male	Graduate	Denmark	3.8	Twitter	No	7.8	8	In Relationship	2	4
573	19	Female	Undergraduate	Ireland	5.5	TikTok	Yes	6.8	6	Single	4	8
574	22	Male	Graduate	India	7.2	Facebook	Yes	5.9	4	Single	5	9
575	21	Female	Undergraduate	Switzerland	4.2	Instagram	No	7.5	7	In Relationship	2	5
576	24	Male	Graduate	Turkey	6.8	TikTok	Yes	6.2	5	Single	4	8
577	20	Female	Undergraduate	USA	5.9	Instagram	Yes	6.7	6	In Relationship	3	7
578	22	Male	Graduate	Mexico	6.5	Facebook	Yes	6.1	5	Single	4	8
579	19	Female	Undergraduate	France	4.7	Twitter	No	7.4	7	Single	2	5
580	23	Male	Graduate	Canada	5.2	Instagram	Yes	7.0	6	In Relationship	3	6
581	21	Female	Undergraduate	UK	6.3	TikTok	Yes	6.4	5	Single	4	8
582	24	Male	Graduate	Italy	4.9	Facebook	No	7.3	7	In Relationship	2	5
583	20	Female	Undergraduate	Russia	6.7	Instagram	Yes	6.0	5	Single	4	8
584	22	Male	Graduate	China	5.8	WeChat	Yes	6.5	6	In Relationship	3	7
585	19	Female	Undergraduate	Japan	4.5	Twitter	No	7.6	8	Single	2	4
586	23	Male	Graduate	Poland	6.4	Facebook	Yes	6.3	5	Single	4	8
587	21	Female	Undergraduate	Finland	4.1	Instagram	No	7.7	7	In Relationship	2	5
588	24	Male	Graduate	Spain	6.6	TikTok	Yes	6.2	5	Single	4	8
589	20	Female	Undergraduate	Denmark	4.4	Instagram	No	7.4	7	In Relationship	2	5
590	22	Male	Graduate	Ireland	5.7	Twitter	Yes	6.8	6	Single	3	7
591	19	Female	Undergraduate	India	7.0	Instagram	Yes	5.8	4	Single	5	9
592	23	Male	Graduate	Switzerland	4.3	Facebook	No	7.5	7	In Relationship	2	5
593	21	Female	Undergraduate	Turkey	6.9	TikTok	Yes	6.1	5	Single	4	8
594	24	Male	Graduate	USA	5.6	Instagram	Yes	6.9	6	In Relationship	3	7
595	20	Female	Undergraduate	Mexico	6.2	Facebook	Yes	6.3	5	Single	4	8
596	21	Male	Undergraduate	France	5.8	Instagram	Yes	6.7	6	Single	3	7
597	23	Female	Graduate	Canada	4.9	TikTok	No	7.3	7	In Relationship	2	5
598	20	Male	Undergraduate	UK	6.4	Facebook	Yes	6.2	5	Single	4	8
599	22	Female	Graduate	Italy	5.1	Twitter	No	7.1	7	In Relationship	2	5
600	19	Male	Undergraduate	Russia	6.7	Instagram	Yes	6.0	4	Single	4	8
601	24	Female	Graduate	China	5.5	WeChat	Yes	6.8	6	In Relationship	3	7
602	21	Male	Undergraduate	Japan	4.3	Twitter	No	7.6	8	Single	2	4
603	23	Female	Graduate	Poland	6.2	Instagram	Yes	6.4	5	Single	4	8
604	20	Male	Undergraduate	Finland	4.5	Facebook	No	7.4	7	In Relationship	2	5
605	22	Female	Graduate	Spain	6.3	TikTok	Yes	6.3	5	Single	4	8
606	19	Male	Undergraduate	Denmark	4.7	Instagram	No	7.2	7	In Relationship	2	5
607	24	Female	Graduate	Ireland	5.9	Twitter	Yes	6.6	6	Single	3	7
608	21	Male	Undergraduate	India	7.1	Facebook	Yes	5.7	4	Single	5	9
609	23	Female	Graduate	Switzerland	4.4	Instagram	No	7.4	7	In Relationship	2	5
610	20	Male	Undergraduate	Turkey	6.6	TikTok	Yes	6.2	5	Single	4	8
611	22	Female	Graduate	USA	5.4	Instagram	Yes	6.9	6	In Relationship	3	7
612	19	Male	Undergraduate	Mexico	6.5	Facebook	Yes	6.1	5	Single	4	8
613	24	Female	Graduate	France	4.8	Twitter	No	7.3	7	In Relationship	2	5
614	21	Male	Undergraduate	Canada	5.7	Instagram	Yes	6.7	6	Single	3	7
615	23	Female	Graduate	UK	6.1	TikTok	Yes	6.4	5	Single	4	8
616	20	Male	Undergraduate	Italy	4.6	Facebook	No	7.2	7	In Relationship	2	5
617	22	Female	Graduate	Russia	6.8	Instagram	Yes	5.9	4	Single	5	9
618	19	Male	Undergraduate	China	5.6	WeChat	Yes	6.8	6	In Relationship	3	7
619	24	Female	Graduate	Japan	4.2	Twitter	No	7.5	8	Single	2	4
620	21	Male	Undergraduate	Poland	6.3	TikTok	Yes	6.3	5	Single	4	8
621	23	Female	Graduate	Finland	4.4	Instagram	No	7.4	7	In Relationship	2	5
622	20	Male	Undergraduate	Spain	6.5	Facebook	Yes	6.2	5	Single	4	8
623	22	Female	Graduate	Denmark	4.6	Twitter	No	7.3	7	In Relationship	2	5
624	19	Male	Undergraduate	Ireland	5.8	Instagram	Yes	6.6	6	Single	3	7
625	24	Female	Graduate	India	7.0	TikTok	Yes	5.8	4	Single	5	9
626	21	Male	Undergraduate	Switzerland	4.5	Facebook	No	7.3	7	In Relationship	2	5
627	23	Female	Graduate	Turkey	6.7	Instagram	Yes	6.1	5	Single	4	8
628	20	Male	Undergraduate	USA	5.5	Twitter	Yes	6.8	6	In Relationship	3	7
629	22	Female	Graduate	Mexico	6.4	Facebook	Yes	6.2	5	Single	4	8
630	19	Male	Undergraduate	France	4.7	Instagram	No	7.2	7	In Relationship	2	5
631	24	Female	Graduate	Canada	5.6	TikTok	Yes	6.7	6	Single	3	7
632	21	Male	Undergraduate	UK	6.2	Facebook	Yes	6.3	5	Single	4	8
633	23	Female	Graduate	Italy	4.8	Twitter	No	7.1	7	In Relationship	2	5
634	20	Male	Undergraduate	Russia	6.9	Instagram	Yes	5.9	4	Single	5	9
635	22	Female	Graduate	China	5.7	WeChat	Yes	6.7	6	In Relationship	3	7
636	19	Male	Undergraduate	Japan	4.4	Twitter	No	7.4	8	Single	2	4
637	24	Female	Graduate	Poland	6.1	TikTok	Yes	6.4	5	Single	4	8
638	21	Male	Undergraduate	Finland	4.3	Instagram	No	7.5	7	In Relationship	2	5
639	23	Female	Graduate	Spain	6.4	Facebook	Yes	6.2	5	Single	4	8
640	20	Male	Undergraduate	Denmark	4.5	Twitter	No	7.3	7	In Relationship	2	5
641	22	Female	Graduate	Ireland	5.9	Instagram	Yes	6.5	6	Single	3	7
642	19	Male	Undergraduate	India	7.2	TikTok	Yes	5.7	4	Single	5	9
643	24	Female	Graduate	Switzerland	4.6	Facebook	No	7.2	7	In Relationship	2	5
644	21	Male	Undergraduate	Turkey	6.8	Instagram	Yes	6.0	5	Single	4	8
645	23	Female	Graduate	USA	5.3	Twitter	Yes	6.8	6	In Relationship	3	7
646	22	Male	Graduate	Mexico	6.3	Facebook	Yes	6.2	5	Single	4	8
647	20	Female	Undergraduate	France	4.8	Instagram	No	7.1	7	In Relationship	2	5
648	23	Male	Graduate	Canada	5.7	TikTok	Yes	6.6	6	Single	3	7
649	21	Female	Undergraduate	UK	6.2	Twitter	Yes	6.3	5	Single	4	8
650	24	Male	Graduate	Italy	4.7	Facebook	No	7.2	7	In Relationship	2	5
651	19	Female	Undergraduate	Russia	6.8	Instagram	Yes	5.9	4	Single	5	9
652	22	Male	Graduate	China	5.6	WeChat	Yes	6.7	6	In Relationship	3	7
653	20	Female	Undergraduate	Japan	4.3	Twitter	No	7.5	8	Single	2	4
654	23	Male	Graduate	Poland	6.2	TikTok	Yes	6.3	5	Single	4	8
655	21	Female	Undergraduate	Finland	4.4	Instagram	No	7.4	7	In Relationship	2	5
656	24	Male	Graduate	Spain	6.5	Facebook	Yes	6.1	5	Single	4	8
657	19	Female	Undergraduate	Denmark	4.6	Twitter	No	7.3	7	In Relationship	2	5
658	22	Male	Graduate	Ireland	5.8	Instagram	Yes	6.6	6	Single	3	7
659	20	Female	Undergraduate	India	7.1	TikTok	Yes	5.8	4	Single	5	9
660	23	Male	Graduate	Switzerland	4.5	Facebook	No	7.3	7	In Relationship	2	5
661	21	Female	Undergraduate	Turkey	6.7	Instagram	Yes	6.0	5	Single	4	8
662	24	Male	Graduate	USA	5.4	Twitter	Yes	6.8	6	In Relationship	3	7
663	19	Female	Undergraduate	Mexico	6.4	TikTok	Yes	6.2	5	Single	4	8
664	22	Male	Graduate	France	4.7	Facebook	No	7.2	7	In Relationship	2	5
665	20	Female	Undergraduate	Canada	5.6	Instagram	Yes	6.7	6	Single	3	7
666	23	Male	Graduate	UK	6.3	Twitter	Yes	6.2	5	Single	4	8
667	21	Female	Undergraduate	Italy	4.8	TikTok	No	7.1	7	In Relationship	2	5
668	24	Male	Graduate	Russia	6.9	Instagram	Yes	5.9	4	Single	5	9
669	19	Female	Undergraduate	China	5.7	WeChat	Yes	6.7	6	In Relationship	3	7
670	22	Male	Graduate	Japan	4.4	Twitter	No	7.4	8	Single	2	4
671	20	Female	Undergraduate	Poland	6.1	Facebook	Yes	6.4	5	Single	4	8
672	23	Male	Graduate	Finland	4.3	Instagram	No	7.5	7	In Relationship	2	5
673	21	Female	Undergraduate	Spain	6.4	TikTok	Yes	6.2	5	Single	4	8
674	24	Male	Graduate	Denmark	4.5	Twitter	No	7.3	7	In Relationship	2	5
675	19	Female	Undergraduate	Ireland	5.9	Instagram	Yes	6.5	6	Single	3	7
676	22	Male	Graduate	India	7.2	Facebook	Yes	5.7	4	Single	5	9
677	20	Female	Undergraduate	Switzerland	4.6	TikTok	No	7.2	7	In Relationship	2	5
678	23	Male	Graduate	Turkey	6.8	Instagram	Yes	6.0	5	Single	4	8
679	21	Female	Undergraduate	USA	5.3	Twitter	Yes	6.8	6	In Relationship	3	7
680	24	Male	Graduate	Mexico	6.2	Facebook	Yes	6.3	5	Single	4	8
681	19	Female	Undergraduate	France	4.7	Instagram	No	7.2	7	In Relationship	2	5
682	22	Male	Graduate	Canada	5.8	TikTok	Yes	6.6	6	Single	3	7
683	20	Female	Undergraduate	UK	6.1	Twitter	Yes	6.4	5	Single	4	8
684	23	Male	Graduate	Italy	4.8	Facebook	No	7.1	7	In Relationship	2	5
685	21	Female	Undergraduate	Russia	6.7	Instagram	Yes	6.0	4	Single	5	9
686	24	Male	Graduate	China	5.5	WeChat	Yes	6.8	6	In Relationship	3	7
687	19	Female	Undergraduate	Japan	4.2	Twitter	No	7.5	8	Single	2	4
688	22	Male	Graduate	Poland	6.3	TikTok	Yes	6.2	5	Single	4	8
689	20	Female	Undergraduate	Finland	4.4	Instagram	No	7.4	7	In Relationship	2	5
690	23	Male	Graduate	Spain	6.5	Facebook	Yes	6.1	5	Single	4	8
691	21	Female	Undergraduate	Denmark	4.6	Twitter	No	7.3	7	In Relationship	2	5
692	24	Male	Graduate	Ireland	5.9	Instagram	Yes	6.5	6	Single	3	7
693	19	Female	Undergraduate	India	7.0	TikTok	Yes	5.8	4	Single	5	9
694	22	Male	Graduate	Switzerland	4.5	Facebook	No	7.3	7	In Relationship	2	5
695	20	Female	Undergraduate	Turkey	6.6	Instagram	Yes	6.1	5	Single	4	8
696	23	Male	Graduate	USA	5.5	Twitter	Yes	6.7	6	In Relationship	3	7
697	21	Female	Undergraduate	Mexico	6.3	TikTok	Yes	6.2	5	Single	4	8
698	24	Male	Graduate	France	4.8	Facebook	No	7.1	7	In Relationship	2	5
699	19	Female	Undergraduate	Canada	5.7	Instagram	Yes	6.6	6	Single	3	7
700	22	Male	Graduate	UK	6.2	Twitter	Yes	6.3	5	Single	4	8
701	20	Female	Undergraduate	Italy	4.7	TikTok	No	7.2	7	In Relationship	2	5
702	23	Male	Graduate	Russia	6.8	Instagram	Yes	5.9	4	Single	5	9
703	21	Female	Undergraduate	China	5.6	WeChat	Yes	6.7	6	In Relationship	3	7
704	24	Male	Graduate	Japan	4.3	Twitter	No	7.5	8	Single	2	4
705	19	Female	Undergraduate	Poland	6.2	Facebook	Yes	6.3	5	Single	4	8`);

    const DATASET_1 = [
      {
        "Student_ID": 232,
        "Age": 21,
        "Gender": "Male",
        "Academic_Level": "Undergraduate",
        "Country": "Other",
        "Avg_Daily_Usage_Hours": 4,
        "Most_Used_Platform": "Facebook",
        "Affects_Academic_Performance": "No",
        "Sleep_Hours_Per_Night": 6.7,
        "Mental_Health_Impact": "Low",
        "Relationship_Status": "Single"
      },
      {
        "Student_ID": 564,
        "Age": 23,
        "Gender": "Female",
        "Academic_Level": "Undergraduate",
        "Country": "Other",
        "Avg_Daily_Usage_Hours": 1.6,
        "Most_Used_Platform": "LinkedIn",
        "Affects_Academic_Performance": "No",
        "Sleep_Hours_Per_Night": 8.6,
        "Mental_Health_Impact": "Low",
        "Relationship_Status": "Single"
      },
      {
        "Student_ID": 788,
        "Age": 22,
        "Gender": "Male",
        "Academic_Level": "Graduate",
        "Country": "Canada",
        "Avg_Daily_Usage_Hours": 4.6,
        "Most_Used_Platform": "Instagram",
        "Affects_Academic_Performance": "No",
        "Sleep_Hours_Per_Night": 6.7,
        "Mental_Health_Impact": "Moderate",
        "Relationship_Status": "In a Relationship"
      },
      {
        "Student_ID": 686,
        "Age": 18,
        "Gender": "Male",
        "Academic_Level": "Undergraduate",
        "Country": "Other",
        "Avg_Daily_Usage_Hours": 7,
        "Most_Used_Platform": "Snapchat",
        "Affects_Academic_Performance": "Yes",
        "Sleep_Hours_Per_Night": 5.4,
        "Mental_Health_Impact": "High",
        "Relationship_Status": "Single"
      },
      {
        "Student_ID": 608,
        "Age": 24,
        "Gender": "Female",
        "Academic_Level": "High School",
        "Country": "Other",
        "Avg_Daily_Usage_Hours": 7.5,
        "Most_Used_Platform": "Facebook",
        "Affects_Academic_Performance": "Yes",
        "Sleep_Hours_Per_Night": 5.0,
        "Mental_Health_Impact": "High",
        "Relationship_Status": "Single"
      },
      {
        "Student_ID": 370,
        "Age": 19,
        "Gender": "Female",
        "Academic_Level": "High School",
        "Country": "Other",
        "Avg_Daily_Usage_Hours": 4.1,
        "Most_Used_Platform": "Twitter",
        "Affects_Academic_Performance": "Yes",
        "Sleep_Hours_Per_Night": 6.8,
        "Mental_Health_Impact": "Moderate",
        "Relationship_Status": "Single"
      },
      {
        "Student_ID": 862,
        "Age": 22,
        "Gender": "Female",
        "Academic_Level": "Graduate",
        "Country": "Other",
        "Avg_Daily_Usage_Hours": 8,
        "Most_Used_Platform": "Instagram",
        "Affects_Academic_Performance": "Yes",
        "Sleep_Hours_Per_Night": 5.2,
        "Mental_Health_Impact": "High",
        "Relationship_Status": "In a Relationship"
      },
      {
        "Student_ID": 520,
        "Age": 21,
        "Gender": "Female",
        "Academic_Level": "Graduate",
        "Country": "Other",
        "Avg_Daily_Usage_Hours": 6,
        "Most_Used_Platform": "Facebook",
        "Affects_Academic_Performance": "Yes",
        "Sleep_Hours_Per_Night": 5.7,
        "Mental_Health_Impact": "High",
        "Relationship_Status": "Single"
      },
      {
        "Student_ID": 703,
        "Age": 24,
        "Gender": "Male",
        "Academic_Level": "Undergraduate",
        "Country": "USA",
        "Avg_Daily_Usage_Hours": 4.7,
        "Most_Used_Platform": "YouTube",
        "Affects_Academic_Performance": "No",
        "Sleep_Hours_Per_Night": 7.0,
        "Mental_Health_Impact": "Low",
        "Relationship_Status": "Single"
      },
      {
        "Student_ID": 809,
        "Age": 20,
        "Gender": "Female",
        "Academic_Level": "Undergraduate",
        "Country": "USA",
        "Avg_Daily_Usage_Hours": 6.8,
        "Most_Used_Platform": "TikTok",
        "Affects_Academic_Performance": "Yes",
        "Sleep_Hours_Per_Night": 5.5,
        "Mental_Health_Impact": "High",
        "Relationship_Status": "Single"
      }
    ];

    const DATASET_2 = [
      {
        "Birth_Year": 2000,
        "State": "Virginia",
        "Surveys_Last_30_Days": 15,
        "Mental_Health_Impact": "Moderate",
        "Most_Used_Platform": "Instagram"
      },
      {
        "Birth_Year": 1997,
        "State": "California",
        "Surveys_Last_30_Days": 15,
        "Mental_Health_Impact": "Low",
        "Most_Used_Platform": "YouTube"
      },
      {
        "Birth_Year": 2000,
        "State": "Maryland",
        "Surveys_Last_30_Days": 1,
        "Mental_Health_Impact": "Low",
        "Most_Used_Platform": "Pinterest"
      },
      {
        "Birth_Year": 2001,
        "State": "South Carolina",
        "Surveys_Last_30_Days": 7,
        "Mental_Health_Impact": "Moderate",
        "Most_Used_Platform": "Snapchat"
      },
      {
        "Birth_Year": 2000,
        "State": "Florida",
        "Surveys_Last_30_Days": 5,
        "Mental_Health_Impact": "High",
        "Most_Used_Platform": "TikTok"
      },
      {
        "Birth_Year": 2000,
        "State": "California",
        "Surveys_Last_30_Days": 30,
        "Mental_Health_Impact": "High",
        "Most_Used_Platform": "Instagram"
      },
      {
        "Birth_Year": 1999,
        "State": "New Jersey",
        "Surveys_Last_30_Days": 20,
        "Mental_Health_Impact": "Moderate",
        "Most_Used_Platform": "Snapchat"
      },
      {
        "Birth_Year": 2000,
        "State": "Texas",
        "Surveys_Last_30_Days": 25,
        "Mental_Health_Impact": "High",
        "Most_Used_Platform": "TikTok"
      },
      {
        "Birth_Year": 1998,
        "State": "New York",
        "Surveys_Last_30_Days": 0,
        "Mental_Health_Impact": "Low",
        "Most_Used_Platform": "YouTube"
      },
      {
        "Birth_Year": 2002,
        "State": "California",
        "Surveys_Last_30_Days": 12,
        "Mental_Health_Impact": "High",
        "Most_Used_Platform": "Instagram"
      }
    ];

    const DATASETS = {
      dataset1: {
        key: "dataset1",
        title: "Dataset 1",
        data: DATASET_1,
        metricsEl: "dataset1-metrics",
        theadEl: "thead-dataset1",
        tbodyEl: "tbody-dataset1",
        searchEl: "search-dataset1",
        sortEl: "sort-dataset1",
        pageEl: "page-dataset1",
        statusEl: "status-dataset1",
        toggleEl: "toggle-dataset1",
        scrollEl: "scroll-dataset1",
        expanded: false,
        pageSize: 25,
        search: "",
        sortKey: "",
        sortDir: "asc"
      },
      dataset2: {
        key: "dataset2",
        title: "Dataset 2",
        data: DATASET_2,
        metricsEl: "dataset2-metrics",
        theadEl: "thead-dataset2",
        tbodyEl: "tbody-dataset2",
        searchEl: "search-dataset2",
        sortEl: "sort-dataset2",
        pageEl: "page-dataset2",
        statusEl: "status-dataset2",
        toggleEl: "toggle-dataset2",
        scrollEl: "scroll-dataset2",
        expanded: false,
        pageSize: 25,
        search: "",
        sortKey: "",
        sortDir: "asc"
      },
      dataset3: {
        key: "dataset3",
        title: "Dataset 3",
        data: DATASET_3,
        metricsEl: "dataset3-metrics",
        theadEl: "thead-dataset3",
        tbodyEl: "tbody-dataset3",
        searchEl: "search-dataset3",
        sortEl: "sort-dataset3",
        pageEl: "page-dataset3",
        statusEl: "status-dataset3",
        toggleEl: "toggle-dataset3",
        scrollEl: "scroll-dataset3",
        expanded: false,
        pageSize: 25,
        search: "",
        sortKey: "",
        sortDir: "asc"
      }
    };

    function safeText(value){
      if (value === null || value === undefined) return "";
      return String(value);
    }

    function getColumns(rows){
      const set = new Set();
      rows.forEach(row => Object.keys(row).forEach(key => set.add(key)));
      return Array.from(set);
    }

    function isNumericValue(value){
      if (value === null || value === "" || value === undefined) return false;
      return !isNaN(Number(value));
    }

    function formatNumber(n){
      return Number(n).toLocaleString();
    }

    function formatOneDecimal(n){
      return Number(n).toFixed(1);
    }

    function average(values){
      if (!values.length) return 0;
      return values.reduce((sum, n) => sum + n, 0) / values.length;
    }

    function sortRows(rows, key, dir){
      if (!key) return [...rows];
      return [...rows].sort((a, b) => {
        const av = a[key];
        const bv = b[key];

        if (isNumericValue(av) && isNumericValue(bv)) {
          return dir === "asc" ? Number(av) - Number(bv) : Number(bv) - Number(av);
        }

        const as = safeText(av).toLowerCase();
        const bs = safeText(bv).toLowerCase();
        if (as < bs) return dir === "asc" ? -1 : 1;
        if (as > bs) return dir === "asc" ? 1 : -1;
        return 0;
      });
    }

    function filterRows(rows, query){
      if (!query.trim()) return [...rows];
      const q = query.toLowerCase().trim();
      return rows.filter(row =>
        Object.values(row).some(value => safeText(value).toLowerCase().includes(q))
      );
    }

    function groupCounts(rows, key){
      const counts = {};
      rows.forEach(row => {
        const val = safeText(row[key]).trim() || "Unknown";
        counts[val] = (counts[val] || 0) + 1;
      });
      return counts;
    }

    function groupAverage(rows, groupKey, valueKey){
      const groups = {};
      rows.forEach(row => {
        const label = safeText(row[groupKey]).trim() || "Unknown";
        const value = Number(row[valueKey]);
        if (!isNaN(value)) {
          if (!groups[label]) groups[label] = [];
          groups[label].push(value);
        }
      });

      return Object.entries(groups).map(([label, values]) => ({
        label,
        value: average(values),
        count: values.length
      }));
    }

    function buildCrossCounts(rows, rowKey, colKey){
      const rowLabels = Array.from(new Set(rows.map(r => safeText(r[rowKey]) || "Unknown")));
      const colLabels = Array.from(new Set(rows.map(r => safeText(r[colKey]) || "Unknown")));
      const values = {};

      rowLabels.forEach(r => {
        values[r] = {};
        colLabels.forEach(c => values[r][c] = 0);
      });

      rows.forEach(row => {
        const r = safeText(row[rowKey]) || "Unknown";
        const c = safeText(row[colKey]) || "Unknown";
        values[r][c] = (values[r][c] || 0) + 1;
      });

      return { rowLabels, colLabels, values };
    }

    function normalizeStateName(state){
      const map = {
        "alabama":"AL","alaska":"AK","arizona":"AZ","arkansas":"AR","california":"CA","colorado":"CO",
        "connecticut":"CT","delaware":"DE","florida":"FL","georgia":"GA","hawaii":"HI","idaho":"ID",
        "illinois":"IL","indiana":"IN","iowa":"IA","kansas":"KS","kentucky":"KY","louisiana":"LA",
        "maine":"ME","maryland":"MD","massachusetts":"MA","michigan":"MI","minnesota":"MN","mississippi":"MS",
        "missouri":"MO","montana":"MT","nebraska":"NE","nevada":"NV","new hampshire":"NH","new jersey":"NJ",
        "new mexico":"NM","new york":"NY","north carolina":"NC","north dakota":"ND","ohio":"OH","oklahoma":"OK",
        "oregon":"OR","pennsylvania":"PA","rhode island":"RI","south carolina":"SC","south dakota":"SD",
        "tennessee":"TN","texas":"TX","utah":"UT","vermont":"VT","virginia":"VA","washington":"WA",
        "west virginia":"WV","wisconsin":"WI","wyoming":"WY","district of columbia":"DC"
      };
      if (!state) return "??";
      const trimmed = String(state).trim();
      if (trimmed.length === 2) return trimmed.toUpperCase();
      return map[trimmed.toLowerCase()] || trimmed.slice(0,2).toUpperCase();
    }

    function colorForCategory(name){
      const key = String(name).toLowerCase();

      if (key.includes("high")) return "#de998c";
      if (key.includes("moderate")) return "#d8bb72";
      if (key.includes("low")) return "#a7bcae";
      if (key.includes("yes")) return "#de998c";
      if (key.includes("no")) return "#a7c2d4";
      if (key.includes("instagram")) return "#de998c";
      if (key.includes("tiktok")) return "#b58394";
      if (key.includes("snapchat")) return "#d8bb72";
      if (key.includes("youtube")) return "#a7c2d4";
      if (key.includes("pinterest")) return "#cfa59d";
      if (key.includes("linkedin")) return "#a7bcae";
      if (key.includes("facebook")) return "#a9899f";

      const palette = ["#de998c", "#a7c2d4", "#d8bb72", "#a7bcae", "#cfa59d", "#b58394", "#a9899f"];
      let hash = 0;
      for (let i = 0; i < key.length; i++) hash += key.charCodeAt(i);
      return palette[hash % palette.length];
    }

    function createMetricCard(label, value, sub){
      return `
        <div class="metric-card">
          <div class="m-label">${label}</div>
          <div class="m-value">${value}</div>
          <div class="m-sub">${sub}</div>
        </div>
      `;
    }

    function createStatBadge(label, value, caption){
      return `
        <div class="stat-badge">
          <div class="mini">${label}</div>
          <div class="big">${value}</div>
          <div class="caption">${caption}</div>
        </div>
      `;
    }

    function renderTable(datasetKey){
      const config = DATASETS[datasetKey];
      const columns = getColumns(config.data);

      if (!config.sortKey && columns.length) {
        config.sortKey = columns[0];
      }

      const filtered = filterRows(config.data, config.search);
      const sorted = sortRows(filtered, config.sortKey, config.sortDir);
      const visible = config.expanded ? sorted : sorted.slice(0, config.pageSize);

      document.getElementById(config.metricsEl).innerHTML = [
        createMetricCard("Rows", formatNumber(config.data.length), "data entries"),
        createMetricCard("Columns", formatNumber(columns.length), "data fields"),
        createMetricCard("Searchable", "Yes", "all visible fields"),
        createMetricCard("Sortable", "Yes", "click any header")
      ].join("");

      const sortEl = document.getElementById(config.sortEl);
      if (!sortEl.dataset.built) {
        sortEl.innerHTML = columns.map(col => `<option value="${col}">Sort by: ${col}</option>`).join("");
        sortEl.value = config.sortKey;
        sortEl.dataset.built = "true";
      }

      const thead = document.getElementById(config.theadEl);
      const tbody = document.getElementById(config.tbodyEl);

      thead.innerHTML = `
        <tr>
          ${columns.map(col => {
            const active = config.sortKey === col;
            const arrow = active ? (config.sortDir === "asc" ? "▲" : "▼") : "↕";
            return `<th data-dataset="${datasetKey}" data-col="${col}">${col}<span class="sort-ind">${arrow}</span></th>`;
          }).join("")}
        </tr>
      `;

      tbody.innerHTML = visible.map(row => `
        <tr>
          ${columns.map(col => `<td>${safeText(row[col])}</td>`).join("")}
        </tr>
      `).join("");

      document.getElementById(config.statusEl).textContent =
        `${formatNumber(visible.length)} of ${formatNumber(sorted.length)} rows visible`;

      const toggleBtn = document.getElementById(config.toggleEl);
      toggleBtn.textContent = config.expanded ? "Hide full table" : "Show full table";

      document.getElementById(config.scrollEl).classList.toggle("expanded", config.expanded);

      thead.querySelectorAll("th").forEach(th => {
        th.addEventListener("click", () => {
          const clickedCol = th.getAttribute("data-col");
          if (config.sortKey === clickedCol) {
            config.sortDir = config.sortDir === "asc" ? "desc" : "asc";
          } else {
            config.sortKey = clickedCol;
            config.sortDir = "asc";
            sortEl.value = clickedCol;
          }
          renderTable(datasetKey);
        });
      });
    }

    function renderScatterPlot(targetId, points, xLabel, yLabel, sizeLabel, colorLabel){
      const target = document.getElementById(targetId);
      target.innerHTML = "";

      if (!points.length) {
        target.innerHTML = `<div class="relationship-note">Not enough numeric data to draw this relationship yet.</div>`;
        return;
      }

      const xMin = Math.min(...points.map(p => p.x));
      const xMax = Math.max(...points.map(p => p.x));
      const yMin = Math.min(...points.map(p => p.y));
      const yMax = Math.max(...points.map(p => p.y));
      const sMax = Math.max(...points.map(p => p.size || 1), 1);

      const wrap = document.createElement("div");
      wrap.className = "scatter-wrap";

      points.forEach(point => {
        const dot = document.createElement("div");
        dot.className = "scatter-point";

        const left = ((point.x - xMin) / ((xMax - xMin) || 1)) * 88 + 6;
        const bottom = ((point.y - yMin) / ((yMax - yMin) || 1)) * 82 + 8;
        const size = 18 + ((point.size || 1) / sMax) * 34;

        dot.style.left = left + "%";
        dot.style.bottom = bottom + "%";
        dot.style.width = size + "px";
        dot.style.height = size + "px";
        dot.style.background = point.color || "#de998c";
        dot.title = `${point.label}\n${xLabel}: ${point.x}\n${yLabel}: ${point.y}`;

        wrap.appendChild(dot);
      });

      target.appendChild(wrap);

      const axis = document.createElement("div");
      axis.innerHTML = `
        <div class="scatter-axis-label">X-axis: ${xLabel}</div>
        <div class="scatter-axis-label">Y-axis: ${yLabel}</div>
      `;
      target.appendChild(axis);

      const legend = document.createElement("div");
      legend.className = "scatter-legend";
      if (sizeLabel) legend.innerHTML += `<div class="legend-chip">Bubble size = ${sizeLabel}</div>`;
      if (colorLabel) legend.innerHTML += `<div class="legend-chip">Bubble color = ${colorLabel}</div>`;
      target.appendChild(legend);
    }

    function renderMatrix(targetId, rowLabel, colLabel, rows, cols, values){
      const target = document.getElementById(targetId);
      target.innerHTML = "";

      if (!rows.length || !cols.length) {
        target.innerHTML = `<div class="relationship-note">Not enough categorical data to render this matrix.</div>`;
        return;
      }

      const maxValue = Math.max(...rows.flatMap(r => cols.map(c => values[r]?.[c] || 0)), 1);

      const matrix = document.createElement("div");
      matrix.className = "matrix";
      matrix.style.gridTemplateColumns = `140px repeat(${cols.length}, minmax(0, 1fr))`;

      matrix.innerHTML += `<div class="matrix-head"></div>`;
      cols.forEach(col => {
        matrix.innerHTML += `<div class="matrix-head">${col}</div>`;
      });

      rows.forEach(row => {
        matrix.innerHTML += `<div class="matrix-side">${row}</div>`;
        cols.forEach(col => {
          const value = values[row]?.[col] || 0;
          const alpha = 0.15 + (value / maxValue) * 0.75;
          matrix.innerHTML += `
            <div class="matrix-cell" style="background: rgba(222,153,140,${alpha});">
              ${value}
            </div>
          `;
        });
      });

      target.appendChild(matrix);

      const legend = document.createElement("div");
      legend.className = "matrix-legend";
      legend.innerHTML = `
        <div class="legend-chip">Darker cells = stronger concentration</div>
        <div class="legend-chip">${rowLabel} vs ${colLabel}</div>
      `;
      target.appendChild(legend);
    }

    function renderStackedBars(targetId, rows){
      const target = document.getElementById(targetId);
      target.innerHTML = "";

      if (!rows.length) {
        target.innerHTML = `<div class="relationship-note">Not enough grouped data for this comparison.</div>`;
        return;
      }

      const wrap = document.createElement("div");
      wrap.className = "stack-bars";

      rows.forEach(row => {
        const total = row.segments.reduce((sum, seg) => sum + seg.value, 0) || 1;
        const segs = row.segments.map(seg => {
          const width = (seg.value / total) * 100;
          return `
            <div class="stack-seg" style="width:${width}%; background:${seg.color};">
              ${seg.value > 0 ? seg.value : ""}
            </div>
          `;
        }).join("");

        wrap.innerHTML += `
          <div class="stack-row">
            <div class="stack-label">${row.label}</div>
            <div class="stack-track">${segs}</div>
          </div>
        `;
      });

      target.appendChild(wrap);

      const cats = [];
      rows.forEach(row => row.segments.forEach(seg => {
        if (!cats.some(c => c.label === seg.label)) cats.push({ label: seg.label, color: seg.color });
      }));

      const legend = document.createElement("div");
      legend.className = "scatter-legend";
      legend.innerHTML = cats.map(cat => `
        <div class="legend-chip"><span class="legend-dot" style="background:${cat.color}"></span>${cat.label}</div>
      `).join("");
      target.appendChild(legend);
    }

    function renderDonut(targetId, items, centerText){
      const target = document.getElementById(targetId);
      target.innerHTML = "";

      if (!items.length) {
        target.innerHTML = `<div class="relationship-note">No grouped values available for this donut chart.</div>`;
        return;
      }

      const total = items.reduce((sum, item) => sum + item.value, 0) || 1;
      let current = 0;

      const gradientParts = items.map(item => {
        const start = (current / total) * 360;
        current += item.value;
        const end = (current / total) * 360;
        return `${item.color} ${start}deg ${end}deg`;
      });

      const wrap = document.createElement("div");
      wrap.className = "donut-wrap";

      wrap.innerHTML = `
        <div class="donut" style="background: conic-gradient(${gradientParts.join(", ")});">
          <div class="donut-center">${centerText}</div>
        </div>
        <div class="relationship-notes">
          ${items.map(item => `
            <div class="relationship-note">
              <strong>${item.label}</strong>: ${item.value}
            </div>
          `).join("")}
        </div>
      `;

      target.appendChild(wrap);
    }

    function renderStateMap(targetId, items){
      const target = document.getElementById(targetId);
      target.innerHTML = "";

      if (!items.length) {
        target.innerHTML = `<div class="relationship-note">No state information available for this map view.</div>`;
        return;
      }

      const max = Math.max(...items.map(item => item.value), 1);

      const wrap = document.createElement("div");
      wrap.className = "state-map";

      items.forEach(item => {
        const alpha = 0.18 + (item.value / max) * 0.78;
        wrap.innerHTML += `
          <div class="state-tile" style="background: rgba(167,194,212,${alpha});">
            <div class="state-code">${item.label}</div>
            <div class="state-value">${item.value}</div>
          </div>
        `;
      });

      target.appendChild(wrap);

      const legend = document.createElement("div");
      legend.className = "map-legend";
      legend.innerHTML = `
        <div class="legend-chip">Darker tile = higher intensity</div>
        <div class="legend-chip">Stylized state map view</div>
      `;
      target.appendChild(legend);
    }

    function renderWaveChart(targetId, items){
      const target = document.getElementById(targetId);
      target.innerHTML = "";

      if (!items.length) {
        target.innerHTML = `<div class="relationship-note">No values available for this wave view.</div>`;
        return;
      }

      const max = Math.max(...items.map(item => item.value), 1);

      const wrap = document.createElement("div");
      wrap.className = "wave-wrap";

      wrap.innerHTML = items.map((item, index) => {
        const h = 20 + (item.value / max) * 180;
        const color = colorForCategory(item.label);
        const radius = index % 2 === 0 ? "999px 999px 18px 18px" : "999px 999px 30px 30px";
        return `
          <div class="wave-bar-wrap">
            <div class="wave-bar" style="height:${h}px; background:${color}; border-radius:${radius};"></div>
            <div class="wave-label">${item.label}</div>
          </div>
        `;
      }).join("");

      target.appendChild(wrap);

      const legend = document.createElement("div");
      legend.className = "wave-legend";
      legend.innerHTML = `<div class="legend-chip">Wave height = stronger average or count</div>`;
      target.appendChild(legend);
    }

    function renderMiniBars(targetId, items, formatter = v => v){
      const target = document.getElementById(targetId);
      target.innerHTML = "";

      if (!items.length) {
        target.innerHTML = `<div class="relationship-note">No values available for this comparison.</div>`;
        return;
      }

      const max = Math.max(...items.map(item => item.value), 1);
      const wrap = document.createElement("div");
      wrap.className = "mini-bars";

      wrap.innerHTML = items.map(item => `
        <div class="mini-row">
          <div class="mini-label">${item.label}</div>
          <div class="mini-track"><div class="mini-fill" style="width:${(item.value / max) * 100}%"></div></div>
          <div class="mini-value">${formatter(item.value)}</div>
        </div>
      `).join("");

      target.appendChild(wrap);
    }

    function getDataset1Views(rows){
      const platformKey = "Most_Used_Platform";
      const sleepKey = "Sleep_Hours_Per_Night";
      const impactKey = "Mental_Health_Impact";
      const academicKey = "Affects_Academic_Performance";
      const usageKey = "Avg_Daily_Usage_Hours";

      return [
        {
          key: "platform_sleep_wave",
          title: "Platform vs Average Sleep",
          description: "Wave-style comparison of average sleep across most-used platforms.",
          type: "wave",
          getData: () => groupAverage(rows, platformKey, sleepKey)
            .sort((a,b) => b.value - a.value)
            .map(x => ({ label: x.label, value: x.value })),
          statText: "Shows which platforms line up with higher or lower reported sleep."
        },
        {
          key: "platform_sleep_bubble",
          title: "Platform vs Average Sleep Bubble Plot",
          description: "Bubble chart comparing platform, average sleep, and sample size.",
          type: "bubble",
          getData: () => {
            const grouped = groupAverage(rows, platformKey, sleepKey);
            return grouped.map((g, i) => ({
              label: g.label,
              x: i + 1,
              y: g.value,
              size: g.count,
              color: colorForCategory(g.label)
            }));
          },
          xLabel: "Platform grouping",
          yLabel: "Average sleep hours",
          sizeLabel: "Number of rows",
          colorLabel: "Most-used platform"
        },
        {
          key: "platform_impact_matrix",
          title: "Impact Level vs Used Platform",
          description: "Heatmap showing where impact levels cluster by most-used platform.",
          type: "matrix",
          getData: () => {
            const m = buildCrossCounts(rows, platformKey, impactKey);
            return { rowLabel: "Platform", colLabel: "Impact", rows: m.rowLabels, cols: m.colLabels, values: m.values };
          },
          statText: "Darker cells show stronger concentrations of certain impact levels for each platform."
        },
        {
          key: "platform_academic_stacked",
          title: "Used Platform vs Academic Performance",
          description: "Stacked relationship bars comparing whether each platform is associated with academic impact.",
          type: "stacked",
          getData: () => {
            const m = buildCrossCounts(rows, platformKey, academicKey);
            return m.rowLabels.map(label => ({
              label,
              segments: m.colLabels.map(col => ({
                label: col,
                value: m.values[label][col],
                color: colorForCategory(col)
              }))
            }));
          },
          statText: "Useful for showing which platforms appear more often among students reporting academic effects."
        },
        {
          key: "academic_impact_donut",
          title: "Academic Performance vs Mental Health Impact",
          description: "Donut view focused on how many rows fall into high, moderate, and low impact among academic-effect responses.",
          type: "donut",
          getData: () => {
            const yesRows = rows.filter(r => safeText(r[academicKey]).toLowerCase() === "yes");
            const counts = groupCounts(yesRows, impactKey);
            return Object.entries(counts).map(([label, value]) => ({
              label,
              value,
              color: colorForCategory(label)
            }));
          },
          centerText: "Impact among\nacademic-effect\nresponses"
        },
        {
          key: "usage_sleep_bubble",
          title: "Usage Hours vs Sleep",
          description: "Individual bubble plot showing how daily usage and sleep relate across rows.",
          type: "bubble",
          getData: () => rows
            .filter(r => isNumericValue(r[usageKey]) && isNumericValue(r[sleepKey]))
            .map(r => ({
              label: `${safeText(r[platformKey])} / ${safeText(r[impactKey])}`,
              x: Number(r[usageKey]),
              y: Number(r[sleepKey]),
              size: 1,
              color: colorForCategory(r[impactKey])
            })),
          xLabel: "Daily usage hours",
          yLabel: "Sleep hours",
          sizeLabel: "Each student",
          colorLabel: "Mental health impact"
        },
        {
          key: "usage_impact_wave",
          title: "Impact Level vs Average Usage",
          description: "Wave view comparing average daily usage across mental-health impact levels.",
          type: "wave",
          getData: () => groupAverage(rows, impactKey, usageKey)
            .sort((a,b) => b.value - a.value)
            .map(x => ({ label: x.label, value: x.value })),
          statText: "Shows whether higher impact levels align with heavier use."
        }
      ];
    }

    function getDataset2Views(rows){
      const birthKey = "Birth_Year";
      const impactKey = "Mental_Health_Impact";
      const stateKey = "State";
      const surveyKey = "Surveys_Last_30_Days";
      const platformKey = "Most_Used_Platform";

      return [
        {
          key: "birth_impact_matrix",
          title: "Birth Year vs Mental Health Effect",
          description: "Heatmap comparing reported mental-health impact across birth years.",
          type: "matrix",
          getData: () => {
            const m = buildCrossCounts(rows, birthKey, impactKey);
            return { rowLabel: "Birth year", colLabel: "Impact", rows: m.rowLabels, cols: m.colLabels, values: m.values };
          },
          statText: "This is the kind of contrast view that is more useful than a birth-year count by itself."
        },
        {
          key: "state_impact_map",
          title: "State-Based Intensity View",
          description: "Stylized state map showing concentration of rows by location.",
          type: "stateMap",
          getData: () => {
            const counts = groupCounts(rows, stateKey);
            return Object.entries(counts).map(([label, value]) => ({
              label: normalizeStateName(label),
              value
            })).sort((a,b) => b.value - a.value);
          },
          statText: "A visual geographic-style intensity comparison."
        },
        {
          key: "birth_survey_bubble",
          title: "Birth Year vs Survey Activity",
          description: "Bubble plot comparing birth year and number of surveys completed.",
          type: "bubble",
          getData: () => rows
            .filter(r => isNumericValue(r[birthKey]) && isNumericValue(r[surveyKey]))
            .map(r => ({
              label: `${safeText(r[stateKey])} / ${safeText(r[impactKey])}`,
              x: Number(r[birthKey]),
              y: Number(r[surveyKey]),
              size: 1,
              color: colorForCategory(r[impactKey])
            })),
          xLabel: "Birth year",
          yLabel: "Surveys in last 30 days",
          sizeLabel: "Each response",
          colorLabel: "Mental health impact"
        },
        {
          key: "platform_impact_donut_2",
          title: "Used Platform vs Impact Mix",
          description: "Donut view of mental-health impact counts within the second dataset.",
          type: "donut",
          getData: () => {
            const counts = groupCounts(rows, impactKey);
            return Object.entries(counts).map(([label, value]) => ({
              label,
              value,
              color: colorForCategory(label)
            }));
          },
          centerText: "Impact\nbreakdown"
        },
        {
          key: "platform_survey_stacked",
          title: "Used Platform vs Response Count",
          description: "Stacked relationship bars showing platform counts split by impact level.",
          type: "stacked",
          getData: () => {
            const m = buildCrossCounts(rows, platformKey, impactKey);
            return m.rowLabels.map(label => ({
              label,
              segments: m.colLabels.map(col => ({
                label: col,
                value: m.values[label][col],
                color: colorForCategory(col)
              }))
            }));
          },
          statText: "Shows how different platforms break across low, moderate, and high impact responses."
        },
        {
          key: "birth_impact_wave",
          title: "Birth Year vs Average Reported Survey Activity",
          description: "Wave comparison showing how survey activity varies across birth years.",
          type: "wave",
          getData: () => groupAverage(rows, birthKey, surveyKey)
            .sort((a,b) => a.label - b.label)
            .map(x => ({ label: x.label, value: x.value })),
          statText: "Another relationship view based on birth year, but tied to a second variable."
        }
      ];
    }

    
    function getDataset3Views(rows){
      const relationshipKey = "Relationship_Status";
      const conflictsKey = "Conflicts_Over_Social_Media";
      const addictionKey = "Addicted_Score";
      const countryKey = "Country";
      const usageKey = "Avg_Daily_Usage_Hours";
      const platformKey = "Most_Used_Platform";
      const academicKey = "Affects_Academic_Performance";

      function conflictBucket(value){
        const n = Number(value);
        if (isNaN(n)) return "Unknown";
        if (n >= 4) return "4+ conflicts";
        if (n === 1) return "1 conflict";
        return `${n} conflicts`;
      }

      function topCountriesByAverageAddiction(limit = 12, minCount = 5){
        const groups = {};

        rows.forEach(row => {
          const label = safeText(row[countryKey]).trim() || "Unknown";
          const value = Number(row[addictionKey]);
          if (!isNaN(value)) {
            if (!groups[label]) groups[label] = [];
            groups[label].push(value);
          }
        });

        return Object.entries(groups)
          .map(([label, values]) => ({
            label,
            value: average(values),
            count: values.length
          }))
          .filter(item => item.count >= minCount)
          .sort((a, b) => b.value - a.value)
          .slice(0, limit)
          .map(item => ({
            label: item.label,
            value: item.value
          }));
      }

      function topPlatformsByAverageConflict(limit = 10, minCount = 5){
        const groups = {};

        rows.forEach(row => {
          const label = safeText(row[platformKey]).trim() || "Unknown";
          const value = Number(row[conflictsKey]);
          if (!isNaN(value)) {
            if (!groups[label]) groups[label] = [];
            groups[label].push(value);
          }
        });

        return Object.entries(groups)
          .map(([label, values]) => ({
            label,
            value: average(values),
            count: values.length
          }))
          .filter(item => item.count >= minCount)
          .sort((a, b) => b.value - a.value)
          .slice(0, limit);
      }

      return [
        {
          key: "relationship_conflict_matrix",
          title: "Relationship Status vs Conflict Pressure",
          description: "Heatmap showing how social-media conflict levels cluster across relationship statuses.",
          type: "matrix",
          getData: () => {
            const prepared = rows.map(row => ({
              ...row,
              _Conflict_Bucket: conflictBucket(row[conflictsKey])
            }));

            const m = buildCrossCounts(prepared, relationshipKey, "_Conflict_Bucket");
            const orderedCols = ["0 conflicts", "1 conflict", "2 conflicts", "3 conflicts", "4+ conflicts"]
              .filter(col => m.colLabels.includes(col));

            return {
              rowLabel: "Relationship status",
              colLabel: "Conflict level",
              rows: m.rowLabels,
              cols: orderedCols.length ? orderedCols : m.colLabels,
              values: m.values
            };
          },
          statText: "A fast read on which relationship contexts line up with more conflict."
        },
        {
          key: "conflicts_addiction_bubble",
          title: "Conflicts vs Addiction Score",
          description: "Bubble plot comparing conflict count and addiction score, with bubble size tied to daily usage.",
          type: "bubble",
          getData: () => rows
            .filter(row => isNumericValue(row[conflictsKey]) && isNumericValue(row[addictionKey]))
            .map(row => ({
              label: `${safeText(row[relationshipKey])} / ${safeText(row[countryKey])}`,
              x: Number(row[conflictsKey]),
              y: Number(row[addictionKey]),
              size: Math.max(1, Number(row[usageKey]) || 1),
              color: colorForCategory(row[relationshipKey])
            })),
          xLabel: "Conflicts over social media",
          yLabel: "Addicted score",
          sizeLabel: "Daily usage hours",
          colorLabel: "Relationship status"
        },
        {
          key: "country_addiction_wave",
          title: "Country vs Average Addiction Level",
          description: "Wave ranking of the most represented countries by average addiction score.",
          type: "wave",
          getData: () => topCountriesByAverageAddiction(),
          statText: "This filters to countries with at least five rows so the comparison stays meaningful."
        },
        {
          key: "relationship_academic_stacked",
          title: "Relationship Status vs Academic Impact",
          description: "Stacked bars comparing whether each relationship-status group reports academic effects.",
          type: "stacked",
          getData: () => {
            const m = buildCrossCounts(rows, relationshipKey, academicKey);
            const orderedCols = ["Yes", "No"].filter(col => m.colLabels.includes(col));
            const finalCols = orderedCols.length ? orderedCols : m.colLabels;

            return m.rowLabels.map(label => ({
              label,
              segments: finalCols.map(col => ({
                label: col,
                value: m.values[label][col],
                color: colorForCategory(col)
              }))
            }));
          },
          statText: "Adds another relationship view by tying status to school-related effects."
        },
        {
          key: "high_addiction_relationship_donut",
          title: "High Addiction Users by Relationship Status",
          description: "Donut view showing relationship-status mix among rows with addiction scores of 8 or higher.",
          type: "donut",
          getData: () => {
            const highRows = rows.filter(row => Number(row[addictionKey]) >= 8);
            const counts = groupCounts(highRows, relationshipKey);

            return Object.entries(counts).map(([label, value]) => ({
              label,
              value,
              color: colorForCategory(label)
            }));
          },
          centerText: "High addiction\nstatus mix"
        },
        {
          key: "platform_conflict_bars",
          title: "Platform vs Average Conflict Level",
          description: "Mini-bar ranking of major platforms by average conflict level.",
          type: "bars",
          getData: () => topPlatformsByAverageConflict(),
          statText: "A compact platform contrast that fits the rest of the visual system."
        }
      ];
    }

    function getViewsForDataset(datasetKey){
      if (datasetKey === "dataset1") return getDataset1Views(DATASETS[datasetKey].data);
      if (datasetKey === "dataset2") return getDataset2Views(DATASETS[datasetKey].data);
      if (datasetKey === "dataset3") return getDataset3Views(DATASETS[datasetKey].data);
      return [];
    }

    function renderVisualization(){
      const datasetKey = document.getElementById("vizDataset").value;
      const rows = DATASETS[datasetKey].data;
      const viewSelect = document.getElementById("vizView");
      const views = getViewsForDataset(datasetKey);

      if (!viewSelect.dataset.dataset || viewSelect.dataset.dataset !== datasetKey) {
        viewSelect.innerHTML = views.map(v => `<option value="${v.key}">${v.title}</option>`).join("");
        viewSelect.dataset.dataset = datasetKey;
      }

      const selectedKey = viewSelect.value || (views[0] && views[0].key);
      const activeView = views.find(v => v.key === selectedKey) || views[0];

      if (!activeView) return;

      viewSelect.value = activeView.key;
      document.getElementById("vizTitle").textContent = activeView.title;
      document.getElementById("vizDescription").textContent = activeView.description;

      const vizCanvas = document.getElementById("vizCanvas");
      const chartData = activeView.getData();

      if (activeView.type === "bubble") {
        renderScatterPlot("vizCanvas", chartData, activeView.xLabel, activeView.yLabel, activeView.sizeLabel, activeView.colorLabel);
      } else if (activeView.type === "matrix") {
        renderMatrix("vizCanvas", chartData.rowLabel, chartData.colLabel, chartData.rows, chartData.cols, chartData.values);
      } else if (activeView.type === "stacked") {
        renderStackedBars("vizCanvas", chartData);
      } else if (activeView.type === "donut") {
        renderDonut("vizCanvas", chartData, activeView.centerText || "");
      } else if (activeView.type === "stateMap") {
        renderStateMap("vizCanvas", chartData);
      } else if (activeView.type === "wave") {
        renderWaveChart("vizCanvas", chartData);
      } else {
        renderMiniBars("vizCanvas", chartData, v => formatOneDecimal(v));
      }

      const columns = getColumns(rows);
      const rowCount = rows.length;
      const columnCount = columns.length;

      let mainInsight = "—";
      let subInsight = "—";

      if (activeView.type === "wave" && chartData.length) {
        const top = [...chartData].sort((a,b) => b.value - a.value)[0];
        mainInsight = top.label;
        subInsight = `${formatOneDecimal(top.value)} average`;
      } else if (activeView.type === "donut" && chartData.length) {
        const top = [...chartData].sort((a,b) => b.value - a.value)[0];
        mainInsight = top.label;
        subInsight = `${top.value} rows`;
      } else if (activeView.type === "stateMap" && chartData.length) {
        const top = [...chartData].sort((a,b) => b.value - a.value)[0];
        mainInsight = top.label;
        subInsight = `${top.value} responses`;
      } else if (activeView.type === "bubble" && chartData.length) {
        mainInsight = `${chartData.length} points`;
        subInsight = `${activeView.xLabel} vs ${activeView.yLabel}`;
      } else if (activeView.type === "matrix" && chartData.rows.length && chartData.cols.length) {
        mainInsight = `${chartData.rows.length}×${chartData.cols.length}`;
        subInsight = `${chartData.rowLabel} / ${chartData.colLabel}`;
      } else if (activeView.type === "stacked" && chartData.length) {
        mainInsight = `${chartData.length} groups`;
        subInsight = activeView.statText || "Relationship comparison";
      }

      document.getElementById("vizStats").innerHTML = [
        createStatBadge("Rows", formatNumber(rowCount), "Current dataset size"),
        createStatBadge("Columns", formatNumber(columnCount), "Fields currently loaded"),
        createStatBadge("Main read", mainInsight, subInsight),
        createStatBadge("View type", activeView.type, "Relationship-focused visual")
      ].join("");
    }

    function initDataset(datasetKey){
      const config = DATASETS[datasetKey];

      document.getElementById(config.searchEl).addEventListener("input", e => {
        config.search = e.target.value;
        renderTable(datasetKey);
      });

      document.getElementById(config.sortEl).addEventListener("change", e => {
        config.sortKey = e.target.value;
        config.sortDir = "asc";
        renderTable(datasetKey);
      });

      document.getElementById(config.pageEl).addEventListener("change", e => {
        config.pageSize = Number(e.target.value);
        renderTable(datasetKey);
      });

      document.getElementById(config.toggleEl).addEventListener("click", () => {
        config.expanded = !config.expanded;
        renderTable(datasetKey);
      });

      renderTable(datasetKey);
    }

    initDataset("dataset1");
    initDataset("dataset2");
    initDataset("dataset3");
    renderVisualization();

    document.getElementById("vizDataset").addEventListener("change", () => {
      const datasetKey = document.getElementById("vizDataset").value;
      const views = getViewsForDataset(datasetKey);
      const viewSelect = document.getElementById("vizView");
      viewSelect.innerHTML = views.map(v => `<option value="${v.key}">${v.title}</option>`).join("");
      viewSelect.dataset.dataset = datasetKey;
      renderVisualization();
    });

    document.getElementById("vizView").addEventListener("change", renderVisualization);
  </script>
</body>
</html>


/* ==================== advice.html ==================== */

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ScrollWell | Advice</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&amp;display=swap" rel="stylesheet"/><link href="styles.css" rel="stylesheet"/>
  

</head>
<body class="page-advice">
<header class="sw-header">
<div class="sw-header-inner">
<a class="sw-logo-wrap" href="index.html">
<div class="sw-logo-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-logo-text">Scroll<span>Well</span></div>
</a>
<nav class="sw-nav">
<a class="sw-nav-link" href="index.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M3 11.5 12 4l9 7.5"></path>
<path d="M5.5 10.5V20h13V10.5"></path>
</svg>
<span>Home</span>
</a>
<a class="sw-nav-link" href="game.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="10" rx="5" width="17" x="3.5" y="8"></rect>
<path d="M8 13h4M10 11v4M16.5 12.2h.01M18.5 14.2h.01"></path>
</svg>
<span>Simulator</span>
</a>
<a class="sw-nav-link" href="scroll.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="17" rx="2.5" width="11" x="6.5" y="3.5"></rect>
<path d="M9 17.3h6"></path>
</svg>
<span>For You</span>
</a>
<a class="sw-nav-link" href="data.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 19V9"></path>
<path d="M12 19V5"></path>
<path d="M19 19v-8"></path>
</svg>
<span>Research</span>
</a>
<a class="sw-nav-link active" href="advice.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9.5 3a3.5 3.5 0 0 0-2.9 5.45A3.5 3.5 0 0 0 5 15a3.5 3.5 0 0 0 5 3.16"></path>
<path d="M14.5 3a3.5 3.5 0 0 1 2.9 5.45A3.5 3.5 0 0 1 19 15a3.5 3.5 0 0 1-5 3.16"></path>
<path d="M12 3v18"></path>
<path d="M9 8h3"></path>
<path d="M12 16h3"></path>
</svg>
<span>Advice</span>
</a>

<a aria-label="Open survey page" class="sw-nav-link" href="survey.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 11l2 2 4-4"></path>
<path d="M8 4h8"></path>
<path d="M9 3h6a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1V5a2 2 0 0 1 2-2z"></path>
</svg>
        Survey
      </a></nav>
</div>
<div class="sw-divider"></div>
</header>
<main class="advice-main">
<div class="sw-container">
<section class="hero">
<div class="hero-icon">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 18h6"></path>
<path d="M10 22h4"></path>
<path d="M12 2a7 7 0 0 0-4 12.7c.6.4 1 1 1.1 1.7l.1.6h5.6l.1-.6c.1-.7.5-1.3 1.1-1.7A7 7 0 0 0 12 2Z"></path>
</svg>
</div>
<h1>Evidence-Based Advice</h1>
<div class="hero-card">
          Practical, actionable tips grounded in research. Not lectures —
          just things that actually help, based on data from thousands of students.
        </div>
</section>
<section class="accordion-stack">
<article class="accordion open">
<button class="accordion-head" type="button">
<div class="acc-icon green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="9"></circle>
<path d="M12 7v5l3 2"></path>
</svg>
</div>
<div class="acc-copy">
<div class="acc-title">Managing Screen Time</div>
<div class="acc-sub">4 evidence-based tips</div>
</div>
<div class="acc-arrow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</button>
<div class="accordion-body">
<div class="accordion-inner">
<div class="tip-card">
<div class="tip-check green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m5 13 4 4L19 7"></path>
</svg>
</div>
<div class="tip-content">
<div class="tip-title">Follow the 2-Hour Rule</div>
<div class="tip-text">
                    Research consistently shows that keeping social media usage under 2 hours per
                    day is associated with significantly better mental health outcomes. Use built-in
                    screen time limits on your phone to enforce this.
                  </div>
<div class="tip-pill">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M14 3h7v7"></path>
<path d="M10 14 21 3"></path>
<path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"></path>
</svg>
<span>Kaggle Student Health Dataset</span>
</div>
</div>
</div>
<div class="tip-card">
<div class="tip-check green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m5 13 4 4L19 7"></path>
</svg>
</div>
<div class="tip-content">
<div class="tip-title">Set a Digital Sunset</div>
<div class="tip-text">
                    Stop using screens at least 1 hour before bed. The blue light and mental
                    stimulation from scrolling directly compete with your sleep quality — and sleep
                    matters more than almost anything else in this dataset.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m5 13 4 4L19 7"></path>
</svg>
</div>
<div class="tip-content">
<div class="tip-title">Use LinkedIn for Motivation</div>
<div class="tip-text">
                    LinkedIn users report more positive mental health outcomes than users of other
                    platforms. If you need a professional social network, it’s a relatively healthy choice.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check peach">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m5 13 4 4L19 7"></path>
</svg>
</div>
<div class="tip-content">
<div class="tip-title">Be Mindful of Snapchat FOMO</div>
<div class="tip-text">
                    Snapchat uniquely contributes to feelings of FOMO and isolation through private
                    stories and group chats. Consider how it makes you feel and adjust usage accordingly.
                  </div>
</div>
</div>
</div>
</div>
</article>
<article class="accordion">
<button class="accordion-head" type="button">
<div class="acc-icon peach">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="15.6" rx="4.2" width="15.6" x="4.2" y="4.2"></rect>
<circle cx="12" cy="12" r="3.8"></circle>
<path d="M17.2 6.8h.01"></path>
</svg>
</div>
<div class="acc-copy">
<div class="acc-title">Choosing Better Platforms</div>
<div class="acc-sub">4 evidence-based tips</div>
</div>
<div class="acc-arrow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</button>
<div class="accordion-body">
<div class="accordion-inner">
<div class="tip-card">
<div class="tip-check green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Prefer More Intentional Platforms</div>
<div class="tip-text">
                    Platforms built around learning, inspiration, or professional growth tend to create
                    fewer negative outcomes than comparison-heavy apps.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Use Pinterest for Ideas, Not Validation</div>
<div class="tip-text">
                    Pinterest appears to function differently from many other platforms — more inspiration,
                    less direct social comparison.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check peach">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Reduce Short-Form Overload</div>
<div class="tip-text">
                    TikTok and Snapchat were associated with higher negative-outcome rates. If an app
                    leaves you feeling wired, low, or inadequate, that’s useful information.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check peach">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Curate Aggressively</div>
<div class="tip-text">
                    Unfollow accounts that trigger comparison, anxiety, or doomscrolling. Your feed should
                    support you — not drain you.
                  </div>
</div>
</div>
</div>
</div>
</article>
<article class="accordion">
<button class="accordion-head" type="button">
<div class="acc-icon blue">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 3a7 7 0 1 0 9 9A9 9 0 1 1 12 3z"></path>
</svg>
</div>
<div class="acc-copy">
<div class="acc-title">Protecting Your Sleep</div>
<div class="acc-sub">3 evidence-based tips</div>
</div>
<div class="acc-arrow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</button>
<div class="accordion-body">
<div class="accordion-inner">
<div class="tip-card">
<div class="tip-check blue">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Aim for 7+ Hours</div>
<div class="tip-text">
                    Students who sleep 7+ hours report dramatically better mental health outcomes.
                    The data shows a nearly 2-hour sleep gap between positive and negative outcome groups
                    (7.6h vs 5.4h).
                  </div>
<div class="tip-pill">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M14 3h7v7"></path>
<path d="M10 14 21 3"></path>
<path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"></path>
</svg>
<span>Kaggle Student Health Dataset</span>
</div>
</div>
</div>
<div class="tip-card">
<div class="tip-check blue">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Night Mode Isn’t Enough</div>
<div class="tip-text">
                    While night mode reduces blue light, it doesn’t address the mental stimulation of
                    scrolling. The content itself — especially comparison-heavy content — can keep your mind racing.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check blue">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Charge Your Phone Away From Bed</div>
<div class="tip-text">
                    Physical distance matters. When your phone is out of reach, it’s easier to avoid
                    “just five more minutes” turning into an hour.
                  </div>
</div>
</div>
</div>
</div>
</article>
<article class="accordion">
<button class="accordion-head" type="button">
<div class="acc-icon green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="acc-copy">
<div class="acc-title">Real-World Connection</div>
<div class="acc-sub">3 evidence-based tips</div>
</div>
<div class="acc-arrow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</button>
<div class="accordion-body">
<div class="accordion-inner">
<div class="tip-card">
<div class="tip-check green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Prioritize Face-to-Face Time</div>
<div class="tip-text">
                    In-person socializing directly counters the isolation and FOMO that social media creates.
                    Even short in-person interactions are more beneficial than hours of online engagement.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Replace Scroll Time with Social Time</div>
<div class="tip-text">
                    When you feel the urge to scroll, text a friend to meet up instead. The social
                    connection you get from real interaction is what your brain is actually seeking.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check green">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Join Clubs or Groups</div>
<div class="tip-text">
                    Structured social activities — clubs, sports teams, study groups — provide consistent
                    in-person connection that social media can’t replicate.
                  </div>
</div>
</div>
</div>
</div>
</article>
<article class="accordion">
<button class="accordion-head" type="button">
<div class="acc-icon pink">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9.5 3a3.5 3.5 0 0 0-2.9 5.45A3.5 3.5 0 0 0 5 15a3.5 3.5 0 0 0 5 3.16"></path>
<path d="M14.5 3a3.5 3.5 0 0 1 2.9 5.45A3.5 3.5 0 0 1 19 15a3.5 3.5 0 0 1-5 3.16"></path>
<path d="M12 3v18"></path>
<path d="M9 8h3"></path>
<path d="M12 16h3"></path>
</svg>
</div>
<div class="acc-copy">
<div class="acc-title">Mental Health Awareness</div>
<div class="acc-sub">3 evidence-based tips</div>
</div>
<div class="acc-arrow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</button>
<div class="accordion-body">
<div class="accordion-inner">
<div class="tip-card">
<div class="tip-check pink">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Notice Your Feelings After Scrolling</div>
<div class="tip-text">
                    Pay attention to how you feel after using each app. If Instagram consistently makes
                    you feel worse about yourself, that’s important information. Your emotions reveal a lot.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check pink">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Unfollow Accounts That Trigger Comparison</div>
<div class="tip-text">
                    Comparison is one of social media’s biggest traps. Curating your feed to remove common
                    triggers can help protect your confidence and mood.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check pink">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Talk About It</div>
<div class="tip-text">
                    If social media is affecting your mental health, talk to someone you trust —
                    a friend, family member, or counselor. You’re not alone: over half of students
                    report social media impacts their wellbeing.
                  </div>
</div>
</div>
</div>
</div>
</article>
<article class="accordion">
<button class="accordion-head" type="button">
<div class="acc-icon yellow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</div>
<div class="acc-copy">
<div class="acc-title">Content Literacy</div>
<div class="acc-sub">3 evidence-based tips</div>
</div>
<div class="acc-arrow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</button>
<div class="accordion-body">
<div class="accordion-inner">
<div class="tip-card">
<div class="tip-check yellow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Remember: It’s Curated</div>
<div class="tip-text">
                    Every post, photo, and video you see is someone’s best moment, not their whole life.
                    People don’t post their bad days, boring routines, or unflattering angles.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check yellow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Recognize Ads and Sponsored Content</div>
<div class="tip-text">
                    Much of what appears “organic” on social media is actually sponsored or promoted.
                    Learning to recognize this helps you consume content more critically.
                  </div>
</div>
</div>
<div class="tip-card">
<div class="tip-check yellow">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="m5 13 4 4L19 7"></path></svg>
</div>
<div class="tip-content">
<div class="tip-title">Question the Algorithm</div>
<div class="tip-text">
                    Social media algorithms are designed to maximize your time on the platform, not your wellbeing.
                    If you notice you can’t stop scrolling, that’s by design — not a personal failing.
                  </div>
</div>
</div>
</div>
</div>
</article>
</section>
<section class="remember-wrap">
<div class="remember-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 21s-6.7-4.35-9.33-8.12C.6 10.3 1.5 6.7 4.62 5.3 7.1 4.2 9.66 5.27 12 7.48c2.34-2.2 4.9-3.27 7.38-2.17 3.12 1.4 4.02 5 .95 7.58C18.7 16.65 12 21 12 21z"></path>
</svg>
</div>
<div class="remember-card">
<h2>Remember</h2>
<p>
            Small changes add up. You don’t have to quit social media entirely —
            just be intentional about how you use it. Even reducing usage by 1 hour
            per day can make a meaningful difference in your sleep, mood, and confidence.
          </p>
</div>
</section>
</div>
</main>
<div class="sw-divider"></div>
<footer class="sw-footer">
<div class="sw-container sw-footer-inner">
<div class="sw-footer-brand">
<div class="sw-footer-logo-row">
<div class="sw-logo-badge small">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-footer-title">ScrollWell</div>
</div>
<p>
          Empowering healthy digital habits through interactive education and research-backed insights.
        </p>
</div>
<div class="sw-footer-links">
<a href="game.html">Game</a>
<a href="scroll.html">Feed</a>
<a href="data.html">Research</a>
<a href="advice.html">Advice</a>
</div>
<div class="sw-footer-face">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="8"></circle>
<path d="M9 14.2c.8.9 1.8 1.3 3 1.3s2.2-.4 3-1.3"></path>
<path d="M9.2 10.3h.01M14.8 10.3h.01"></path>
</svg>
</div>
</div>
</footer>
<script>
    const accordions = document.querySelectorAll('.accordion');

    accordions.forEach((accordion, index) => {
      const head = accordion.querySelector('.accordion-head');
      const body = accordion.querySelector('.accordion-body');

      function setOpen(isOpen) {
        accordion.classList.toggle('open', isOpen);
        if (isOpen) {
          body.style.maxHeight = body.scrollHeight + 'px';
        } else {
          body.style.maxHeight = '0px';
        }
      }

      // keep first one open initially
      if (accordion.classList.contains('open')) {
        body.style.maxHeight = body.scrollHeight + 'px';
      }

      head.addEventListener('click', () => {
        const alreadyOpen = accordion.classList.contains('open');

        accordions.forEach(acc => {
          const accBody = acc.querySelector('.accordion-body');
          acc.classList.remove('open');
          accBody.style.maxHeight = '0px';
        });

        if (!alreadyOpen) {
          setOpen(true);
          setTimeout(() => {
            accordion.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
          }, 120);
        }
      });
    });

    window.addEventListener('resize', () => {
      document.querySelectorAll('.accordion.open .accordion-body').forEach(body => {
        body.style.maxHeight = body.scrollHeight + 'px';
      });
    });
  </script>
</body>
</html>


/* ==================== survey.html ==================== */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>ScrollWell | Survey</title>
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="styles.css"/>
</head>
<body class="page-survey">
<header class="sw-header">
<div class="sw-header-inner">
<a class="sw-logo-wrap" href="index.html">
<div class="sw-logo-badge">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-logo-text">Scroll<span>Well</span></div>
</a>
<nav class="sw-nav">
<a class="sw-nav-link" href="index.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M3 11.5 12 4l9 7.5"></path>
<path d="M5.5 10.5V20h13V10.5"></path>
</svg>
<span>Home</span>
</a>
<a class="sw-nav-link" href="game.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="10" rx="5" width="17" x="3.5" y="8"></rect>
<path d="M8 13h4M10 11v4M16.5 12.2h.01M18.5 14.2h.01"></path>
</svg>
<span>Simulator</span>
</a>
<a class="sw-nav-link" href="scroll.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<rect height="17" rx="2.5" width="11" x="6.5" y="3.5"></rect>
<path d="M9 17.3h6"></path>
</svg>
<span>For You</span>
</a>
<a class="sw-nav-link" href="data.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 19V9"></path>
<path d="M12 19V5"></path>
<path d="M19 19v-8"></path>
</svg>
<span>Research</span>
</a>
<a class="sw-nav-link" href="advice.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 3c-3.4 0-6 2.2-6 5.5 0 2.2 1.1 3.6 2.6 4.6V17l3.4-1.8 3.4 1.8v-3.9C16.9 12.1 18 10.7 18 8.5 18 5.2 15.4 3 12 3Z"></path>
<path d="M10 8h.01M14 8h.01M10.2 11.3c.5.4 1.1.7 1.8.7s1.3-.3 1.8-.7"></path>
</svg>
<span>Advice</span>
</a>

<a aria-label="Open survey page" class="sw-nav-link active" href="survey.html">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 11l2 2 4-4"></path>
<path d="M8 4h8"></path>
<path d="M9 3h6a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1V5a2 2 0 0 1 2-2z"></path>
</svg>
        Survey
      </a></nav>
</div>
<div class="sw-divider"></div>
</header>

<main class="survey-main">
  <section class="survey-hero sw-container">
    <div class="survey-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path d="M9 11l2 2 4-4"></path>
        <path d="M8 4h8"></path>
        <path d="M9 3h6a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1V5a2 2 0 0 1 2-2z"></path>
      </svg>
    </div>
    <p class="survey-pill">Feedback loop for the next research chapter</p>
    <h1>Social Media Reflection Survey</h1>
    <p class="survey-lede">
      This survey is designed to turn real student experiences into future ScrollWell research questions.
      It collects patterns about screen time, school, sleep, emotions, creativity, friendships, and self-control
      so the data page can later compare variables instead of just listing answers.
    </p>
  </section>

  <section class="survey-shell sw-container">
    <form class="survey-form" id="scrollwellSurvey">
      <div class="survey-progress-card">
        <div>
          <span class="mini-label">Survey progress</span>
          <strong id="surveyProgressText">0% complete</strong>
        </div>
        <div class="survey-progress-bar"><span id="surveyProgressFill"></span></div>
      </div>

      <fieldset class="survey-section">
        <legend>1. About you</legend>
        <p class="section-note">These questions help compare social media habits across different school stages.</p>

        <div class="survey-grid">
          <label class="survey-field">
            <span>What level of school are you currently in?</span>
            <select name="schoolLevel" required>
              <option value="">Select one</option>
              <option>Primary / Elementary school</option>
              <option>Middle school / Junior high</option>
              <option>High school</option>
              <option>College / University undergraduate</option>
              <option>Graduate school</option>
              <option>Not currently in school</option>
              <option>Other</option>
            </select>
          </label>

          <label class="survey-field">
            <span>What age range are you in?</span>
            <select name="ageRange" required>
              <option value="">Select one</option>
              <option>Under 12</option>
              <option>12–14</option>
              <option>15–18</option>
              <option>19–22</option>
              <option>23–29</option>
              <option>30+</option>
              <option>Prefer not to say</option>
            </select>
          </label>

          <label class="survey-field">
            <span>What is your current grade/GPA converted to 1–100?</span>
            <input type="number" name="gradePercent" min="1" max="100" placeholder="Example: 87"/>
          </label>

          <label class="survey-field">
            <span>How demanding does school feel right now?</span>
            <select name="schoolDemand">
              <option value="">Select one</option>
              <option>Very light</option>
              <option>Manageable</option>
              <option>Busy but okay</option>
              <option>Very demanding</option>
              <option>Overwhelming</option>
            </select>
          </label>
        </div>
      </fieldset>

      <fieldset class="survey-section">
        <legend>2. Your social media habits</legend>
        <p class="section-note">These answers can support charts like platform vs sleep, hours vs GPA, and scrolling purpose vs mood.</p>

        <div class="survey-grid">
          <label class="survey-field">
            <span>How many hours per day do you usually spend on social media?</span>
            <select name="dailyHours" required>
              <option value="">Select one</option>
              <option>Less than 1 hour</option>
              <option>1–2 hours</option>
              <option>2–4 hours</option>
              <option>4–6 hours</option>
              <option>6–8 hours</option>
              <option>More than 8 hours</option>
            </select>
          </label>

          <label class="survey-field">
            <span>Which platform do you use the most?</span>
            <select name="mainPlatform" required>
              <option value="">Select one</option>
              <option>TikTok</option>
              <option>Instagram</option>
              <option>Snapchat</option>
              <option>YouTube</option>
              <option>X / Twitter</option>
              <option>Reddit</option>
              <option>Pinterest</option>
              <option>Discord</option>
              <option>Other</option>
            </select>
          </label>

          <label class="survey-field">
            <span>When do you scroll the most?</span>
            <select name="scrollTime">
              <option value="">Select one</option>
              <option>Morning before school/work</option>
              <option>During school/work breaks</option>
              <option>After school/work</option>
              <option>Late night before bed</option>
              <option>Randomly throughout the day</option>
            </select>
          </label>

          <label class="survey-field">
            <span>What is your main reason for using social media?</span>
            <select name="mainReason">
              <option value="">Select one</option>
              <option>Entertainment</option>
              <option>Staying connected with friends</option>
              <option>News/current events</option>
              <option>Creativity/inspiration</option>
              <option>School/work networking</option>
              <option>Escaping boredom or stress</option>
              <option>Habit without a clear reason</option>
            </select>
          </label>
        </div>

        <div class="checkbox-card">
          <span class="checkbox-title">Which platforms do you use at least weekly?</span>
          <div class="checkbox-grid">
            <label><input type="checkbox" name="platforms" value="TikTok"/> TikTok</label>
            <label><input type="checkbox" name="platforms" value="Instagram"/> Instagram</label>
            <label><input type="checkbox" name="platforms" value="Snapchat"/> Snapchat</label>
            <label><input type="checkbox" name="platforms" value="YouTube"/> YouTube</label>
            <label><input type="checkbox" name="platforms" value="X/Twitter"/> X / Twitter</label>
            <label><input type="checkbox" name="platforms" value="Reddit"/> Reddit</label>
            <label><input type="checkbox" name="platforms" value="Pinterest"/> Pinterest</label>
            <label><input type="checkbox" name="platforms" value="Discord"/> Discord</label>
          </div>
        </div>
      </fieldset>

      <fieldset class="survey-section">
        <legend>3. Rate the impact</legend>
        <p class="section-note">For each scale: 1 = very negative effect, 10 = very positive effect.</p>

        <div class="slider-stack">
          <label class="slider-field"><span>Fatigue / tiredness</span><input type="range" name="fatigueImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Happiness</span><input type="range" name="happinessImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Creativity</span><input type="range" name="creativityImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Friendships</span><input type="range" name="friendshipImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Focus while doing schoolwork</span><input type="range" name="focusImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Sleep quality</span><input type="range" name="sleepImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Body image / self-confidence</span><input type="range" name="confidenceImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Anxiety or stress levels</span><input type="range" name="anxietyImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Motivation to complete responsibilities</span><input type="range" name="motivationImpact" min="1" max="10" value="5"><output>5</output></label>
          <label class="slider-field"><span>Feeling connected to other people</span><input type="range" name="connectionImpact" min="1" max="10" value="5"><output>5</output></label>
        </div>
      </fieldset>

      <fieldset class="survey-section">
        <legend>4. Patterns and consequences</legend>
        <p class="section-note">These questions help identify whether the effect comes from amount of time, type of platform, or how people use it.</p>

        <div class="survey-grid">
          <label class="survey-field">
            <span>How often do you lose track of time while scrolling?</span>
            <select name="timeLoss">
              <option value="">Select one</option>
              <option>Never</option>
              <option>Rarely</option>
              <option>Sometimes</option>
              <option>Often</option>
              <option>Almost every day</option>
            </select>
          </label>

          <label class="survey-field">
            <span>How often does social media delay homework/studying?</span>
            <select name="procrastination">
              <option value="">Select one</option>
              <option>Never</option>
              <option>Rarely</option>
              <option>Sometimes</option>
              <option>Often</option>
              <option>Almost every day</option>
            </select>
          </label>

          <label class="survey-field">
            <span>How often do you use social media within 30 minutes of sleeping?</span>
            <select name="bedtimeUse">
              <option value="">Select one</option>
              <option>Never</option>
              <option>1–2 nights per week</option>
              <option>3–4 nights per week</option>
              <option>5–6 nights per week</option>
              <option>Every night</option>
            </select>
          </label>

          <label class="survey-field">
            <span>How often do posts make you compare your life/body/success to others?</span>
            <select name="comparison">
              <option value="">Select one</option>
              <option>Never</option>
              <option>Rarely</option>
              <option>Sometimes</option>
              <option>Often</option>
              <option>Almost every day</option>
            </select>
          </label>

          <label class="survey-field">
            <span>How often does social media cause conflict with friends/family?</span>
            <select name="conflict">
              <option value="">Select one</option>
              <option>Never</option>
              <option>Rarely</option>
              <option>Sometimes</option>
              <option>Often</option>
              <option>Very often</option>
            </select>
          </label>

          <label class="survey-field">
            <span>How in control do you feel over your usage?</span>
            <select name="control">
              <option value="">Select one</option>
              <option>Very in control</option>
              <option>Mostly in control</option>
              <option>Neutral / depends on the day</option>
              <option>Not very in control</option>
              <option>Not in control at all</option>
            </select>
          </label>
        </div>
      </fieldset>

      <fieldset class="survey-section">
        <legend>5. Reflection questions</legend>
        <p class="section-note">These open answers can inspire the next section of qualitative research.</p>

        <label class="survey-field wide">
          <span>Describe one way social media helps your life.</span>
          <textarea name="positiveStory" rows="4" placeholder="Example: It helps me stay close with friends, find ideas, relax, learn..."></textarea>
        </label>

        <label class="survey-field wide">
          <span>Describe one way social media makes your life harder.</span>
          <textarea name="negativeStory" rows="4" placeholder="Example: It distracts me, makes me compare myself, affects sleep..."></textarea>
        </label>

        <label class="survey-field wide">
          <span>What should the next ScrollWell research section investigate?</span>
          <textarea name="nextResearch" rows="4" placeholder="Example: whether late-night scrolling predicts lower sleep quality more than total hours..."></textarea>
        </label>
      </fieldset>

      <section class="survey-submit-card">
        <div>
          <h2>Ready to turn reflection into research?</h2>
          <p>This demo form does not send data yet, but it is structured so it can later connect to PHP, MySQL, or JSON output for your data visualizations.</p>
        </div>
        <button type="submit" class="survey-submit">Submit Survey</button>
      </section>

      <div class="survey-result" id="surveyResult" hidden>
        <h3>Survey captured locally.</h3>
        <p>Your response structure is ready to become the next ScrollWell dataset.</p>
      </div>
    </form>
  </section>
</main>

<footer class="sw-footer">
<div class="sw-container sw-footer-inner">
<div class="sw-footer-brand">
<div class="sw-footer-logo-row">
<div class="sw-logo-badge small">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M7.5 6.6c-2.3 0-4 1.8-4 4.2 0 4.3 4.8 7.3 8.5 10.2 3.6-2.9 8.5-5.9 8.5-10.2 0-2.4-1.7-4.2-4-4.2-1.8 0-3.1.9-4.5 2.5-1.4-1.6-2.7-2.5-4.5-2.5z"></path>
<path d="M8.2 12.4h2.2l1.1-2.5 1.8 4.9 1.2-2.4h1.4"></path>
</svg>
</div>
<div class="sw-footer-title">ScrollWell</div>
</div>
<p>
          Empowering healthy digital habits through
          interactive education and research-backed insights.
        </p>
</div>
<div class="sw-footer-links">
<a href="game.html">Game</a>
<a href="scroll.html">Feed</a>
<a href="data.html">Research</a>
<a href="advice.html">Advice</a>
<a href="survey.html">Survey</a></div>
<div class="sw-footer-face">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="8"></circle>
<path d="M9 14.2c.8.9 1.8 1.3 3 1.3s2.2-.4 3-1.3"></path>
<path d="M9.2 10.3h.01M14.8 10.3h.01"></path>
</svg>
</div>
</div>
</footer>

<script>
  const surveyForm = document.getElementById('scrollwellSurvey');
  const progressFill = document.getElementById('surveyProgressFill');
  const progressText = document.getElementById('surveyProgressText');
  const result = document.getElementById('surveyResult');

  function updateSurveyProgress() {
    const fields = Array.from(surveyForm.querySelectorAll('input, select, textarea')).filter(field => field.type !== 'checkbox');
    const answered = fields.filter(field => field.value && field.value.trim() !== '').length;
    const percent = Math.round((answered / fields.length) * 100);
    progressFill.style.width = percent + '%';
    progressText.textContent = percent + '% complete';
  }

  surveyForm.querySelectorAll('input[type="range"]').forEach(slider => {
    const output = slider.nextElementSibling;
    slider.addEventListener('input', () => {
      output.textContent = slider.value;
      updateSurveyProgress();
    });
  });

  surveyForm.addEventListener('input', updateSurveyProgress);
  surveyForm.addEventListener('submit', event => {
    event.preventDefault();
    result.hidden = false;
    result.scrollIntoView({ behavior: 'smooth', block: 'center' });
  });

  updateSurveyProgress();
</script>
</body>
</html>