.study-app {
  --hp-bg-blue:#eef8ff; --hp-blue:#88bfff; --hp-pink:#ff9fbe;
  --hp-yellow:#ffe58a; --hp-green:#9fdfc8; --hp-purple:#ceb6f2;
  --hp-text:#23324d; --hp-line:#d9e8f7;
  --hp-radius-xl:28px; --hp-radius-lg:20px; --hp-radius-md:14px;
  --hp-shadow-lg:0 12px 34px rgba(72,105,145,.14);
  --hp-shadow-md:0 6px 16px rgba(72,105,145,.12);
  --hp-shadow-btn:0 4px 0 rgba(49,73,102,.16);
  color:var(--hp-text);
  font-family:"M PLUS Rounded 1c","Rounded Mplus 1c","Noto Sans JP",sans-serif;
}
.study-app .hp-app{border-radius:var(--hp-radius-xl);border:3px solid #dcecff;box-shadow:var(--hp-shadow-lg)}
.study-app .hp-theme-sky{
  background:
    radial-gradient(circle at 10% 8%,rgba(255,229,138,.45) 0 7px,transparent 8px),
    radial-gradient(circle at 90% 9%,rgba(255,159,190,.42) 0 7px,transparent 8px),
    linear-gradient(180deg,#f8fbff 0%,var(--hp-bg-blue) 100%);
}
.study-app .hp-card{background:rgba(255,255,255,.96);border:2px solid var(--hp-line);border-radius:var(--hp-radius-lg);box-shadow:var(--hp-shadow-md)}
.study-app .hp-btn{border-radius:var(--hp-radius-md);font-family:inherit;font-weight:800;box-shadow:var(--hp-shadow-btn);transition:transform .08s ease,box-shadow .08s ease,filter .12s ease}
.study-app .hp-btn:active{transform:translateY(3px) scale(.985);box-shadow:0 1px 0 rgba(49,73,102,.14)}
.study-app .hp-btn-soft{background:linear-gradient(135deg,#dff3ff,#ffe4ee);color:var(--hp-text)}
.study-app .hp-btn-number{background:linear-gradient(180deg,#fff,#f2f8ff);color:var(--hp-text);border:2px solid #d7e7f7}
.study-app .hp-btn-operator{background:linear-gradient(180deg,#ffd8e5,var(--hp-pink));color:#7a2141;border:2px solid #ffb3cc}
.study-app .hp-btn-equals{background:linear-gradient(180deg,#c9f0df,var(--hp-green));color:#185c42;border:2px solid #7fceb0}
.study-app .hp-btn-clear{background:linear-gradient(180deg,#fff7d2,var(--hp-yellow));color:#7b5d00;border:2px solid #f3d363}