:root{
  --paper:#f4f0e6;
  --paper-deep:#e9e1d2;
  --ink:#17252d;
  --ink-soft:#53636a;
  --coral:#ef6a4b;
  --coral-dark:#c94d34;
  --mint:#2fa87c;
  --sun:#e8b44f;
  --white:#fffdf8;
  --line:rgba(23,37,45,.14);
  --shadow:0 22px 60px rgba(41,43,36,.13);
  --display:"Songti SC","STSong","Noto Serif CJK SC",serif;
  --body:"HarmonyOS Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--paper);touch-action:pan-x pan-y}
body{
  min-height:100vh;
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 14% 15%,rgba(232,180,79,.16),transparent 30%),
    radial-gradient(circle at 88% 86%,rgba(47,168,124,.12),transparent 32%),
    var(--paper);
  font-family:var(--body);
}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}

.site-shell{
  position:relative;
  width:min(1120px,calc(100% - 36px));
  min-height:100vh;
  margin:0 auto;
  padding:28px 0 40px;
}
.site-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.site-header{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.04em;
}
.brand-mark{
  position:relative;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--sun);
  box-shadow:4px 4px 0 var(--ink);
  font-family:var(--display);
  font-size:23px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  color:var(--coral-dark);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
}
.eyebrow::before{content:"";width:30px;height:2px;background:currentColor}
.display-title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(42px,7vw,82px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.06em;
}
.display-title em{color:var(--coral);font-style:normal}
.lead{
  max-width:600px;
  margin:22px 0 0;
  color:var(--ink-soft);
  font-size:clamp(16px,2vw,19px);
  line-height:1.85;
}
.ghost-link{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  background:rgba(255,253,248,.58);
  text-decoration:none;
  font-size:13px;
  font-weight:850;
}
.header-action{
  min-height:42px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:2px solid var(--ink);
  border-radius:14px;
  color:var(--ink);
  background:var(--white);
  box-shadow:3px 3px 0 var(--ink);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.header-action:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.header-action-icon{font-size:17px;line-height:1}

.home-main{
  position:relative;
  z-index:1;
  padding-top:clamp(70px,11vw,130px);
}
.home-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:end}
.staff-art{
  position:relative;
  height:210px;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  background:repeating-linear-gradient(to bottom,transparent 0 40px,rgba(23,37,45,.56) 40px 42px);
  transform:rotate(-4deg);
}
.staff-art span{
  position:absolute;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--coral);
  color:var(--white);
  box-shadow:7px 7px 0 var(--ink);
  font-family:var(--display);
  font-size:30px;
  font-weight:900;
}
.staff-art span:nth-child(1){left:22px;top:34px}
.staff-art span:nth-child(2){left:126px;top:86px;background:var(--mint)}
.staff-art span:nth-child(3){right:2px;top:18px;background:var(--sun);color:var(--ink)}

.tool-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr;
  gap:18px;
  margin-top:70px;
}
.tool-card{
  position:relative;
  min-height:300px;
  padding:32px;
  overflow:hidden;
  border:2px solid var(--ink);
  border-radius:28px;
  color:var(--ink);
  background:var(--white);
  box-shadow:9px 9px 0 var(--ink);
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.tool-card:hover{transform:translate(-3px,-3px);box-shadow:14px 14px 0 var(--ink)}
.tool-card:active{transform:translate(3px,3px);box-shadow:5px 5px 0 var(--ink)}
.tool-card.training{background:#dff2e9}
.tool-card.metronome{background:#f8d9cf}
.tool-card.tuner{background:#f4df9e}
.tool-number{font-family:var(--display);font-size:14px;font-weight:900}
.tool-card h2{max-width:380px;margin:60px 0 12px;font-family:var(--display);font-size:clamp(31px,4vw,48px);line-height:1.08}
.tool-card p{max-width:430px;margin:0;color:var(--ink-soft);line-height:1.7}
.tool-arrow{
  position:absolute;
  top:25px;
  right:25px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--white);
}
.tool-arrow svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.note-orbit{position:absolute;right:-25px;bottom:-38px;font-family:var(--display);font-size:150px;font-weight:900;opacity:.08;transform:rotate(-10deg)}
.home-note{margin:38px 0 0;text-align:center;color:var(--ink-soft);font-size:13px}

.metronome-page .site-shell{width:min(1040px,calc(100% - 32px))}
.header-actions{display:flex;align-items:center;gap:9px}
.settings-toggle{background:var(--sun)}
.metronome-main{position:relative;padding-top:30px}
.metronome-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:18px}
.metronome-heading .display-title{font-size:clamp(38px,6vw,70px)}
.shortcut-note{color:var(--ink-soft);font-size:12px}
.metronome-grid{display:block;width:min(680px,100%);margin:0 auto}
.metro-card{border:2px solid var(--ink);border-radius:28px;background:var(--white);box-shadow:8px 8px 0 var(--ink)}
.tempo-stage{position:relative;isolation:isolate;min-height:570px;padding:28px 34px;overflow:hidden;background:#f8d9cf}
.tempo-stage::after{content:"";position:absolute;width:260px;height:260px;right:-110px;bottom:-120px;border:34px solid rgba(23,37,45,.06);border-radius:50%;pointer-events:none}
.tempo-readout{position:relative;z-index:1;padding-top:26px;text-align:center;pointer-events:none}
.tempo-number{display:block;font-family:var(--display);font-size:clamp(92px,16vw,160px);font-weight:900;line-height:.9;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.tempo-unit{display:block;margin-top:10px;color:var(--ink-soft);font-size:13px;font-weight:900;letter-spacing:.2em}
.tempo-slider{
  position:relative;
  z-index:4;
  width:100%;
  height:44px;
  margin:18px 0 10px;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  touch-action:none
}
.tempo-slider::-webkit-slider-runnable-track{height:9px;border:2px solid var(--ink);border-radius:999px;background:var(--white);box-shadow:2px 2px 0 var(--ink)}
.tempo-slider::-webkit-slider-thumb{width:30px;height:30px;margin-top:-12.5px;-webkit-appearance:none;border:2px solid var(--ink);border-radius:50%;background:var(--coral);box-shadow:2px 2px 0 var(--ink)}
.tempo-slider::-moz-range-track{height:5px;border:2px solid var(--ink);border-radius:999px;background:var(--white);box-shadow:2px 2px 0 var(--ink)}
.tempo-slider::-moz-range-thumb{width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;background:var(--coral);box-shadow:2px 2px 0 var(--ink)}
.tempo-slider:focus-visible{outline:3px solid rgba(239,106,75,.35);outline-offset:2px;border-radius:999px}
.tempo-actions{display:grid;grid-template-columns:62px 1fr 62px;gap:9px}
.square-button,.tap-button,.start-button{
  min-height:54px;
  border:2px solid var(--ink);
  border-radius:16px;
  background:var(--white);
  font-weight:900;
  box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;
}
.square-button:active,.tap-button:active,.start-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tap-button{letter-spacing:.08em}
.pendulum{position:relative;width:150px;height:116px;margin:20px auto 7px;pointer-events:none}
.pendulum-hook{position:absolute;z-index:2;left:68px;top:0;width:14px;height:14px;border:3px solid var(--ink);border-radius:50%;background:var(--paper)}
.pendulum-arm{position:absolute;z-index:1;left:73px;top:7px;width:4px;height:94px;border-radius:4px;background:var(--ink);transform-origin:50% 1px;transform:rotate(-28deg);transition:transform var(--swing,.3s) cubic-bezier(.45,0,.55,1)}
.pendulum-arm::after{content:"";position:absolute;left:50%;bottom:-11px;width:26px;height:32px;border:3px solid var(--ink);border-radius:50% 50% 47% 47%;background:var(--coral);transform:translateX(-50%)}
.beat-dots{position:relative;z-index:1;display:flex;flex-wrap:nowrap;justify-content:center;gap:var(--beat-gap,13px);margin-top:10px}
.beat-dot{flex:0 0 var(--beat-size,34px);width:var(--beat-size,34px);height:var(--beat-size,34px);padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--white);cursor:pointer;transition:width .16s ease,height .16s ease,transform .12s ease,background .12s ease}
.beat-dot.accent{background:var(--coral)}
.beat-dot.muted{background:transparent;border-style:dashed;opacity:.45}
.beat-dot.current{transform:scale(1.28);box-shadow:0 0 0 4px rgba(255,253,248,.62)}
.beat-help{position:relative;z-index:1;margin:12px 0 0;color:var(--ink-soft);text-align:center;font-size:11px}
.start-button{position:relative;z-index:1;width:100%;margin-top:24px;background:var(--ink);color:var(--white);box-shadow:4px 4px 0 var(--coral);font-size:17px}
.start-button.running{background:var(--coral);box-shadow:4px 4px 0 var(--ink)}

.settings-backdrop{position:fixed;z-index:25;inset:0;background:rgba(23,37,45,.22);opacity:0;pointer-events:none;transition:opacity .2s ease}
.settings-backdrop.show{opacity:1;pointer-events:auto}
.settings-card{position:fixed;z-index:30;top:86px;right:max(16px,calc((100vw - 1040px)/2));width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 104px);padding:24px;overflow:auto;background:#dff2e9;opacity:0;pointer-events:none;transform:translateY(-12px) scale(.98);transform-origin:top right;transition:opacity .18s ease,transform .18s ease}
.settings-card.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.settings-title{margin:0;font-family:var(--display);font-size:29px}
.settings-close{width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;background:var(--white);font-size:23px;line-height:1;cursor:pointer}
.setting-group{padding:17px 0;border-top:1px solid rgba(23,37,45,.16)}
.setting-group:first-of-type{border-top:0;padding-top:0}
.setting-label{display:flex;justify-content:space-between;gap:15px;margin-bottom:10px;font-size:13px;font-weight:900}
.setting-label output{color:var(--coral-dark)}
.setting-select,.custom-select{
  width:100%;
  height:46px;
  padding:0 13px;
  border:2px solid var(--ink);
  border-radius:13px;
  color:var(--ink);
  background:var(--white);
  font-weight:800;
}
.custom-signature{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:9px}
.custom-signature[hidden]{display:none}
.rhythm-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.rhythm-option{position:relative;height:62px;padding:5px 3px;border:2px solid transparent;border-radius:15px;background:rgba(255,253,248,.68);cursor:pointer}
.rhythm-option svg{display:block;width:100%;height:34px;overflow:visible}
.rhythm-option span{display:block;margin-top:2px;color:var(--ink-soft);font-size:9px;font-weight:800;white-space:nowrap}
.rhythm-option.active{border-color:var(--ink);background:var(--coral);box-shadow:3px 3px 0 var(--ink)}
.rhythm-option.active span{color:var(--ink)}
.volume-slider{width:100%;accent-color:var(--mint)}
.setting-hint{margin:8px 0 0;color:var(--ink-soft);font-size:11px;line-height:1.55}
.status-line{display:flex;align-items:center;gap:8px;margin-top:20px;color:var(--ink-soft);font-size:12px}
.status-light{width:9px;height:9px;border-radius:50%;background:#aab3af}
.status-light.on{background:var(--mint);box-shadow:0 0 0 5px rgba(47,168,124,.14)}

@media (max-width:760px){
  .site-shell{width:min(calc(100% - 24px),620px);padding-top:max(16px,env(safe-area-inset-top))}
  .brand-text{font-size:14px}
  .home-main{padding-top:28px}
  .home-hero{grid-template-columns:1fr;gap:18px}
  .home-hero .eyebrow{margin-bottom:9px;font-size:10px}
  .home-hero .display-title{font-size:clamp(34px,10.8vw,48px);line-height:1.03}
  .home-hero .lead{margin-top:13px;font-size:13px;line-height:1.6}
  .staff-art{width:72%;height:68px;margin-left:auto;background:repeating-linear-gradient(to bottom,transparent 0 12px,rgba(23,37,45,.5) 12px 13.5px)}
  .staff-art span{width:34px;height:34px;box-shadow:4px 4px 0 var(--ink);font-size:17px}
  .staff-art span:nth-child(1){left:12px;top:7px}
  .staff-art span:nth-child(2){left:44%;top:25px}
  .staff-art span:nth-child(3){right:2px;top:3px}
  .tool-grid{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .tool-card{min-height:134px;padding:18px 20px;border-radius:21px;box-shadow:5px 5px 0 var(--ink)}
  .tool-number{font-size:11px}
  .tool-card h2{margin:20px 0 6px;font-size:25px}
  .tool-card p{padding-right:38px;font-size:11px;line-height:1.5}
  .tool-arrow{top:15px;right:15px;width:38px;height:38px;font-size:18px}
  .note-orbit{font-size:96px}
  .home-note{margin-top:20px;font-size:11px}
  .metronome-page{height:100dvh;overflow:hidden}
  .metronome-page .site-shell{height:100dvh;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .metronome-page .site-header{min-height:44px}
  .metronome-page .brand-mark{width:38px;height:38px;box-shadow:3px 3px 0 var(--ink);font-size:20px}
  .metronome-page .brand-text{display:none}
  .header-actions{gap:6px}
  .metronome-page .header-action{min-height:38px;padding:0 10px;gap:5px;border-radius:12px;box-shadow:2px 2px 0 var(--ink);font-size:11px}
  .metronome-page .header-action-icon{font-size:16px}
  .metronome-main{height:calc(100dvh - 62px - max(18px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));padding-top:15px}
  .metronome-heading{align-items:center;flex-direction:row;margin-bottom:13px}
  .metronome-heading .eyebrow,.shortcut-note{display:none}
  .metronome-heading .display-title{font-size:34px;letter-spacing:-.04em}
  .metronome-grid{height:calc(100% - 51px)}
  .tempo-stage{
    --mobile-pendulum-length:clamp(82px,18vh,180px);
    --mobile-pendulum-offset:clamp(48px,10vh,98px);
    display:grid;
    grid-template-rows:auto auto auto minmax(110px,1fr) auto auto auto;
    height:100%;
    min-height:0;
    padding:14px 18px 12px;
    border-radius:23px;
    box-shadow:5px 5px 0 var(--ink);
  }
  .tempo-readout{padding-top:4px}
  .tempo-number{font-size:clamp(72px,24vw,110px);line-height:.84}
  .tempo-unit{margin-top:7px;font-size:10px}
  .tempo-slider{height:48px;margin:7px 0 5px}
  .tempo-actions{grid-template-columns:54px 1fr 54px;gap:7px}
  .square-button,.tap-button,.start-button{min-height:48px;border-radius:14px}
  .pendulum{width:190px;height:100%;min-height:110px;margin:0 auto}
  .pendulum-hook{top:calc(50% - var(--mobile-pendulum-offset));left:88px}
  .pendulum-arm{top:calc(50% - var(--mobile-pendulum-offset) + 7px);left:93px;height:var(--mobile-pendulum-length)}
  .pendulum-arm::after{width:32px;height:39px;bottom:-16px}
  .beat-dots{margin-top:0}
  .beat-help{margin-top:7px;font-size:9px}
  .start-button{margin-top:18px;min-height:50px}
  .settings-card{top:62px;right:12px;width:calc(100vw - 24px);max-height:calc(100dvh - 74px);padding:20px 16px;border-radius:22px;box-shadow:5px 5px 0 var(--ink)}
  .settings-title{font-size:25px}
  .rhythm-grid{gap:6px}
  .rhythm-option{height:58px;padding-inline:1px}
  .rhythm-option span{font-size:8px}
}

@media (max-width:760px) and (max-height:700px){
  .home-main{padding-top:20px}
  .staff-art{display:none}
  .tool-grid{margin-top:18px}
  .tool-card{min-height:125px}
  .home-note{margin-top:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}