:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #080b0e; }
canvas { display: block; }
.loony-return{position:fixed;z-index:8;top:14px;right:18px;padding:8px 12px;border:1px solid #59666d;border-radius:999px;color:#cbd6da;background:#11181cbb;text-decoration:none;font-size:11px;letter-spacing:.06em;backdrop-filter:blur(8px)}
.loony-return:hover{color:#fff;background:#2d383e}
.hud { position: fixed; top: 28px; left: 32px; pointer-events: none; text-shadow: 0 2px 14px #000; }
.eyebrow { color: #8da7b3; font-size: 10px; letter-spacing: .28em; }
h1 { margin: 7px 0 2px; font: 300 clamp(28px, 5vw, 52px)/1.05 Georgia, serif; }
p, #status { margin: 5px 0; color: #aab3b8; font-size: 12px; }
#status { color: #dce4e7; }
#status.error { color: #ff9b8f; max-width: 320px; line-height: 1.45; }
button { pointer-events: auto; margin-top: 13px; border: 1px solid #64737a; border-radius: 99px; padding: 9px 15px; color: #f4f6f7; background: #1b2226aa; cursor: pointer; }
button:hover { background: #354249; }
.control-panel { width: 250px; max-height:calc(100vh - 170px); margin-top: 15px; padding-right:5px; overflow-y:auto; pointer-events: auto; scrollbar-width:thin; }
.wind-label { display: flex; justify-content: space-between; gap: 16px; color: #c7d0d4; font-size: 11px; letter-spacing: .04em; }
.wind-label output { color: #fff; font-variant-numeric: tabular-nums; }
#wind-control,#animation-speed,#scary-volume,.parameter-list input[type="range"] { display: block; width: 100%; margin: 9px 0 1px; accent-color: #d9e5e9; cursor: pointer; }
.animation-label{margin-top:12px}
.sound-toggle{width:100%;margin-top:9px;border-color:#59656b;background:#171c20cc}
.sound-toggle.active{border-color:#aab8be;background:#303a3f;color:#fff;box-shadow:0 0 18px rgba(182,207,218,.12)}
.cloth-parameters{margin-top:13px;border:1px solid #46545b;border-radius:12px;background:#11181ca8}
.cloth-parameters summary{padding:9px 11px;color:#d6dfe2;font-size:11px;letter-spacing:.05em;cursor:pointer;user-select:none}
.parameter-list{padding:2px 11px 11px}
.parameter-list .wind-label{margin-top:11px}
.parameter-select{display:block;width:100%;margin:8px 0 2px;padding:8px 9px;border:1px solid #56636a;border-radius:8px;color:#edf2f3;background:#182024;cursor:pointer}
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.button-row button { margin-top: 10px; white-space: nowrap; }
.drop-note{margin-top:8px;color:#7f9098;font-size:10px;letter-spacing:.06em;text-align:center}
.hint { position: fixed; right: 25px; bottom: 20px; color: #78858b; font-size: 11px; letter-spacing: .08em; }
#drop-overlay{position:fixed;inset:18px;z-index:20;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(205,222,232,.72);border-radius:22px;background:rgba(7,11,14,.78);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease;pointer-events:none}
#drop-overlay.visible{opacity:1;visibility:visible}
#drop-overlay div{display:flex;flex-direction:column;align-items:center;gap:7px;color:#eef4f7;text-transform:uppercase;letter-spacing:.18em}
#drop-overlay strong{font:600 24px/1 system-ui,sans-serif}
#drop-overlay span{font:500 11px/1 system-ui,sans-serif;color:#aebdc5}