.digital-card{box-sizing:border-box;background:#fffef9;border:1px solid #ded8c8;border-radius:18px;width:100%;max-width:820px;margin:10px auto 80px;padding:34px 38px;box-shadow:0 8px 32px #3d4f3010}.sample-top{border-bottom:1px solid #e6e1d5;justify-content:space-between;align-items:center;gap:24px;padding-bottom:22px;display:flex}.sample-top h2{margin:8px 0;font-family:Georgia,serif;font-size:32px;font-weight:400}.muted{color:#6f786c;font-size:12px}.active-note{color:#0f5d5b;background:#e9f3f1;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-width:112px;min-height:88px;display:flex}.active-note span,.sample-piano-heading span{letter-spacing:1.4px;font-size:9px}.active-note strong{font-family:Georgia,serif;font-size:34px;font-weight:400}.volume-control{color:#50605a;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:24px 0;font-size:12px;display:grid}.volume-control input{accent-color:#0f5d5b}.volume-control output{text-align:right;color:#0f5d5b;min-width:34px;font-weight:700}.sample-errors{color:#853f32;background:#fff0ec;border:1px solid #ca7162;border-radius:8px;flex-direction:column;gap:5px;margin:16px 0;padding:14px;font-size:11px;display:flex}.sample-piano{border-top:1px solid #e6e1d5;margin-top:26px;padding-top:20px}.sample-piano-heading{color:#0f5d5b;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;display:flex}.sample-piano-heading small{color:#71806e;font-size:10px}.sample-keys{touch-action:manipulation;background:#263b35;border:1px solid #b8b8ad;border-radius:8px;grid-template-columns:repeat(7,minmax(0,1fr));height:190px;display:grid;position:relative;overflow:hidden}.sample-key{font:inherit;cursor:pointer;touch-action:manipulation}.sample-key.white{z-index:1;color:#0f5d5b;background:linear-gradient(90deg,#fffef9,#f1eee3);border:0;border-right:1px solid #b9b9ae;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding:0 0 13px;display:flex;position:relative}.sample-key.white:last-of-type{border-right:0}.sample-key.white:hover,.sample-key.white.active{background:#d9ece7}.sample-key b{font-size:13px}.sample-key small{color:#8b897d;font-size:10px}.sample-key.black{z-index:2;color:#faf7ee;background:linear-gradient(90deg,#1b2f2a,#071513);border:1px solid #0a1714;border-radius:0 0 6px 6px;width:32px;height:111px;position:absolute;top:0;box-shadow:2px 3px 3px #0005}.sample-key.black small{color:#e9e2c6;margin-top:7px;display:block}.sample-key.black:hover,.sample-key.black.active{background:#0f5d5b}.sample-list{grid-template-columns:repeat(5,1fr);gap:7px;margin-top:16px;display:grid}.sample-list button{color:#0f5d5b;text-align:left;cursor:pointer;background:#fffdf7;border:1px solid #ded8c8;border-radius:7px;flex-direction:column;align-items:flex-start;gap:3px;padding:9px;display:flex}.sample-list button:hover,.sample-list button.active{background:#e9f3f1;border-color:#0f5d5b}.sample-list span{font-size:11px;font-weight:700}.sample-list small{color:#788078;font-size:8px}.fine{text-align:center;color:#737b70;margin-top:20px;font-size:10px}@media (max-width:700px){.digital-card{margin:10px 0 50px;padding:22px 16px}.sample-top{flex-direction:column;align-items:stretch}.sample-top h2{font-size:28px}.active-note{min-height:72px}.sample-piano-heading{flex-direction:column;align-items:flex-start;gap:4px}.sample-keys{height:150px}.sample-key.black{width:26px;height:86px}.sample-list{grid-template-columns:repeat(2,1fr)}}.digital-selectors{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;display:grid}.digital-selectors.tarota-selectors{grid-template-columns:repeat(3,minmax(0,1fr))}.digital-selectors label{color:#0f5d5b;flex-direction:column;gap:7px;font-size:11px;font-weight:700;display:flex}.digital-selectors select{color:#2e2e2e;width:100%;font:inherit;background:#fffdf7;border:1px solid #d4a017;border-radius:8px;padding:11px 12px;font-weight:400}.selection-notice{color:#72530a;background:#f4ead0;border-radius:8px;margin:-4px 0 20px;padding:11px 13px;font-size:11px;line-height:1.45}@media (max-width:700px){.digital-selectors,.digital-selectors.tarota-selectors{grid-template-columns:1fr}}.sample-key:disabled,.sample-list button:disabled{cursor:not-allowed;opacity:.45}.sample-key:disabled:hover,.sample-list button:disabled:hover{background:inherit;border-color:inherit}.midi-strip{background:#f8f5eb;border:1px solid #d9d4c6;border-radius:8px;align-items:center;gap:12px;margin:-6px 0 20px;padding:10px 12px;display:flex}.midi-strip button{color:#fff;font:inherit;white-space:nowrap;cursor:pointer;background:#0f5d5b;border:0;border-radius:7px;padding:9px 12px;font-size:11px;font-weight:700}.midi-strip span{color:#647069;font-size:10px;line-height:1.35}@media (max-width:700px){.midi-strip{flex-direction:column;align-items:flex-start}}.sample-keys.tarota-keys{grid-template-columns:repeat(7,minmax(0,1fr))}.sample-keys.gralla-keys{grid-template-columns:repeat(3,minmax(0,1fr))}.digital-portrait{text-align:center;color:#0f5d5b;background:linear-gradient(#faf8f0 0%,#f2eee1 100%);border-top:1px solid #e6e1d5;border-radius:14px;flex-direction:column;align-items:center;gap:8px;margin:28px auto 4px;padding:22px 18px 18px;display:flex}.digital-portrait-title{color:#0f5d5b;margin:0;font-family:Georgia,serif;font-size:18px}.digital-portrait img{object-fit:contain;filter:drop-shadow(0 8px 10px #24352b24);width:auto;max-width:100%;height:320px;display:block}.digital-portrait small{color:#768078;font-size:10px}.digital-portrait-pending{color:#788078;background:#fffdf7;border:1px dashed #b7c1b5;border-radius:10px;justify-content:center;align-items:center;width:min(260px,100%);height:180px;font-size:11px;display:flex}.digital-portrait-pending+small{max-width:280px;line-height:1.5}@media (max-width:700px){.digital-portrait{margin-top:24px;padding:18px 12px 15px}.digital-portrait img{height:260px}}.sample-piano-header{justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:12px;display:flex}.piano-skin-picker{color:#0f5d5b;flex-direction:column;gap:6px;min-width:210px;font-size:10px;font-weight:700;display:flex}.piano-skin-picker select{color:#2e2e2e;width:100%;font:inherit;background:#fffdf7;border:1px solid #d4a017;border-radius:8px;padding:9px 10px;font-weight:400}.piano-workspace{grid-template-columns:minmax(0,1fr) 190px;align-items:stretch;gap:14px;display:grid}.piano-skin-preview{color:#0f5d5b;text-align:center;background:#f7f4e9;border:1px solid #ded8c8;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:190px;padding:12px 10px;display:flex}.piano-skin-preview strong{font-size:11px;line-height:1.25}.piano-skin-preview img{object-fit:contain;width:100%;height:100px;display:block}.piano-skin-preview small{color:#788078;font-size:8px;line-height:1.4}.piano-skin-kicker{letter-spacing:1px;color:#73806f;font-size:8px}.piano-skin-aula img{border-radius:12px;width:80px;height:80px}.piano-skin-mpk2 img,.piano-skin-mpk3 img,.piano-skin-keystation32 img{background:#fff;border-radius:6px}@media (max-width:700px){.sample-piano-header{flex-direction:column;align-items:stretch;gap:10px}.piano-skin-picker{min-width:0}.piano-workspace{grid-template-columns:1fr}.piano-skin-preview{min-height:150px}.piano-skin-preview img{height:90px}}
