:root{--bg:#f7f4ed;--paper:#fffcf6;--ink:#17261e;--ink-soft:#56625b;--green:#1e4939;--gold:#ba7a35;--line:#dddcd3;--ring:#8ea98d;--shadow:0 18px 58px rgba(31,51,37,.065);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}a{color:inherit}a:hover{color:#a96a24}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ring);outline-offset:3px}button:disabled{cursor:not-allowed}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}.topbar{background:#fffdf8;border-bottom:1px solid var(--line)}.header{min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{text-decoration:none;display:inline-flex;align-items:center;gap:12px;font-size:21px;font-weight:800;letter-spacing:-.8px}.logo{background:#244935;color:#faf4e5;border-radius:13px;display:grid;place-items:center;width:41px;height:41px;font-size:26px;font-family:Georgia,serif}.right-links{display:flex;gap:10px;align-items:center}.lang-switch{display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}.lang-switch a{text-decoration:none;padding:8px 13px;color:#48564e;font-size:14px}.lang-switch a[aria-current=page]{background:var(--green);color:#fff}.mini-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:750;color:#986c3e}
.hero{padding:58px 0 37px;display:grid;grid-template-columns:1fr minmax(290px,.72fr);gap:45px;align-items:center}.hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5.4vw,66px);line-height:1.07;letter-spacing:-2.1px;margin:14px 0 18px;font-weight:650}.hero p{max-width:560px;color:var(--ink-soft);font-size:18px;margin:0}.hero-art{position:relative;min-height:247px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:28px;background:radial-gradient(circle at 50% 40%,#416451 0,#244634 43%,#183529 100%);box-shadow:var(--shadow)}.hero-art:before,.hero-art:after{content:'';position:absolute;width:170px;height:170px;border-radius:50%;border:1px solid rgba(241,214,158,.22)}.hero-art:after{width:252px;height:252px}.hero-art-inner{display:flex;gap:21px;z-index:2;align-items:center;height:165px;transform:rotate(-14deg)}.hero-art-inner i{display:block;width:2px;height:155px;background:linear-gradient(#eac793,#fff9d8,#bd8a56);box-shadow:0 0 13px #ba9863;border-radius:3px}.hero-art-inner i:nth-child(2){height:125px}.hero-art-inner i:nth-child(3){height:138px}.hero-art-inner i:nth-child(4){height:104px}.is-playing .hero-art-inner i{animation:pulse 1.3s infinite alternate}.is-playing .hero-art-inner i:nth-child(2){animation-delay:.2s}.is-playing .hero-art-inner i:nth-child(3){animation-delay:.4s}.is-playing .hero-art-inner i:nth-child(4){animation-delay:.6s}@keyframes pulse{to{transform:translateX(3px);box-shadow:0 0 23px #f9d9a5}}
.workspace{display:grid;grid-template-columns:minmax(330px,1.06fr) minmax(300px,.94fr);gap:20px;align-items:stretch}.panel{background:var(--paper);border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);padding:26px}.panel h2,.info h2{font-size:22px;margin:0 0 5px;line-height:1.25;letter-spacing:-.45px}.subhead{margin:0;color:var(--ink-soft);font-size:14px}.play-card{background:#234b38;color:#fff;border-radius:18px;margin:22px 0;padding:22px}.play-card .state{display:flex;align-items:center;gap:9px;color:#dcebdd;font-size:14px;margin-bottom:17px}.play-card .dot{width:9px;height:9px;background:#e6c58b;border-radius:50%}.is-playing .play-card .dot{background:#94d4a9;box-shadow:0 0 0 5px #94d4a927}.play-button{border:0;width:100%;border-radius:12px;background:#f1d7a7;color:#21372b;padding:17px 18px;font-size:17px;font-weight:800;transition:background .2s}.play-button:hover{background:#ffe6b7}.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}.pill{border-radius:99px;padding:4px 10px;border:1px solid #44604e;color:#d0e0d0;font-size:12px}.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.control{display:grid;gap:7px}.control label,.label{font-weight:700;font-size:14px}.control select{border:1px solid #d0d5ce;background:#fff;padding:12px;border-radius:11px;color:#1c2c22;width:100%;min-height:48px}.range{width:100%;accent-color:var(--green);cursor:pointer}.range-value{font-size:13px;color:#67726b}.label-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.control-wide{margin-top:18px}.save{font-size:12px;color:#718076;margin:20px 0 0}.tuning-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.note-chip{background:#eef2e9;border:1px solid #dce3d8;border-radius:13px;padding:9px 12px;text-align:right}.note-chip strong{display:block;font-size:24px;line-height:1.1}.note-chip small{font-size:12px;color:#50695a}.strings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:21px}.string-btn{border:1px solid #dcded5;background:#fff;border-radius:14px;padding:16px 6px;display:grid;justify-items:center;gap:12px;min-height:168px;transition:transform .15s,background .15s}.string-btn:hover{transform:translateY(-2px);background:#f3f7f1}.string-btn .line{display:block;width:3px;height:56px;background:linear-gradient(#b8a174,#e6bc73,#92774c);border-radius:4px}.string-btn .string-name{font-weight:750}.string-btn .string-hz{color:#66756c;font-size:11px}.note-help{color:#637369;font-size:13px;margin:16px 0 0}.sound-warning{border-top:1px solid var(--line);margin-top:23px;padding-top:18px;color:#5c6a60;font-size:13px}.info{padding:40px 0 64px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.info .panel{box-shadow:none}.info h2{margin-bottom:12px}.info p,.info li{color:#4e5c52}.info ol{padding-left:22px;margin:0}.info li+li{margin-top:8px}details{border-top:1px solid var(--line);padding:14px 0}details summary{font-weight:750;cursor:pointer}details p{margin:8px 0 0}.footer{border-top:1px solid var(--line);padding:25px 0 34px;font-size:13px;color:#647269}.footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.foot-note{max-width:700px}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:26px;padding-top:40px}.hero-art{min-height:145px}.hero-art-inner{transform:rotate(-30deg) scale(.7)}.workspace{grid-template-columns:1fr}.hero h1{letter-spacing:-1.5px}.wrap{padding:0 18px}.info-grid{grid-template-columns:1fr}.info{padding-top:22px}.panel{padding:22px}.hero p{font-size:16px}}
@media(max-width:400px){.strings{gap:6px}.string-btn{padding:13px 2px}.string-btn .string-hz{font-size:10px}.hero h1{font-size:37px}.field-row{gap:10px}.panel{padding:17px}.brand{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}