:root{font-family:Manrope,system-ui,sans-serif;color:#17374b;background:#e8f3f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:linear-gradient(120deg,#eef7fcdd,#e4f1f4cc),url('/assets/water.png') center/cover fixed}button,input,select{font:inherit}button,select{cursor:pointer}button{color:#244e67;background:#ffffff9c;border:1px solid #fff;border-radius:12px;padding:10px 14px;font-size:13px}button:hover{background:#fff;box-shadow:0 4px 20px #37627c19}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible,.pad:focus-visible,summary:focus-visible{outline:3px solid #3893b9;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;padding:22px 4%;border-bottom:1px solid #fff9;background:#ffffff55}.brand{font-size:25px;font-weight:700;letter-spacing:-1px}.brand span{font-size:13px;font-weight:500;letter-spacing:0;margin-left:12px;color:#577c91}.badge{font-size:12px;background:#ffffff8c;border:1px solid white;border-radius:20px;padding:7px 12px;color:#436779}main{max-width:1500px;margin:auto;padding:30px 4%}.intro{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:25px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:#5e8497}h1{font-size:36px;font-weight:500;letter-spacing:-1.6px;margin:10px 0}em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.2em}p{font-size:14px;line-height:1.7;color:#557387}.intro p{margin:0}.glass{background:linear-gradient(145deg,#ffffffa6,#ffffff54);border:1px solid #fff;border-radius:24px;box-shadow:0 16px 60px #34678612,inset 0 1px 0 #fff;backdrop-filter:blur(24px)}.workspace{display:grid;grid-template-columns:300px 1fr;gap:22px}.input-panel{padding:22px}.panel-title,.network-head{display:flex;justify-content:space-between;align-items:center;gap:15px}h2{font-size:13px;font-weight:700;margin:0;letter-spacing:.01em}.pad{height:235px;border-radius:18px;background:linear-gradient(#d9eefa77,#d1e7f366),url('/assets/water.png') center 75%/cover;margin:18px 0;position:relative;overflow:hidden;touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 1px #fff8}.pad-label{position:absolute;top:14px;left:15px;font-size:9px;letter-spacing:.12em;color:#55778d}.pad-cross{position:absolute;top:50%;left:50%;width:10px;height:10px;border:1px solid #436e8144;border-radius:50%;transform:translate(-50%,-50%)}.pad-target{position:absolute;left:50%;top:50%;width:24px;height:24px;border:1px solid white;border-radius:50%;background:#5d9dc68c;box-shadow:0 0 0 9px #ffffff44,0 4px 20px #224d7544;transform:translate(-50%,-50%);z-index:2}.pad-coordinates{position:absolute;bottom:14px;left:15px;font-size:11px;color:#395f77}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.helper{font-size:12px;line-height:1.7;margin:12px 0;color:#53758b}.switch{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:14px;padding:16px 0;border-top:1px solid #b7d1df66}.switch small{display:block;font-size:11px;color:#5d798c;line-height:1.5;margin-top:5px;max-width:175px}input[type=checkbox]{accent-color:#3d8cab;width:20px;height:20px;flex-shrink:0}.control{display:block;font-size:13px;margin:12px 0}.control output{float:right;color:#487b96}.control input{display:block;width:100%;margin-top:12px;accent-color:#5c9bb9}.event-label{background:#d5eaf47c;border:1px solid #fff8;border-radius:10px;padding:12px;font-size:12px;margin-top:20px}.preview-panel{overflow:hidden;padding:22px}.viewport{height:340px;border-radius:17px;background:radial-gradient(ellipse at 50% 80%,#b4d7e5,#e6f3f8);display:flex;align-items:center;justify-content:center;perspective:1100px;position:relative;overflow:hidden;margin-top:20px}#screen{width:78%;background:#ffffffed;border:1px solid white;border-radius:12px;box-shadow:0 24px 45px #234d7333;position:relative;will-change:transform;transform-origin:center}.window-bar{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e0edf3;font-size:9px;color:#7493a5}.sample{display:flex;min-height:230px}.sample aside{width:23%;padding:24px 14px;border-right:1px solid #e8f1f6;font-size:11px;color:#6b8a9f}.sample-main{flex:1;padding:22px}.sample-main .eyebrow{font-size:7px}.sample h3{font-size:27px;font-weight:500;letter-spacing:-1px;line-height:1.05;margin:12px 0 16px}.cards{display:flex;gap:12px}.cards>div{width:50%;padding:10px;border:1px solid #e0edf3;border-radius:8px}.cards span{font-size:9px;color:#8da7b4;display:block;margin-bottom:5px}.cards b{font-size:10px;font-weight:600}.cards p{font-size:8px;margin:5px 0}.writing{margin-top:15px;font-size:10px;color:#63849a}#cursor{position:absolute;left:50%;top:50%;font-size:23px;color:#306988;text-shadow:1px 1px white;transform:rotate(-30deg);pointer-events:none}#caret{opacity:0}.preview-caption{position:absolute;bottom:12px;font-size:10px;color:#476e87}.metrics{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 0;border-bottom:1px solid #b4d1e34d;gap:12px}.metrics span{display:block;font-size:11px;color:#5c7b8e;margin-bottom:7px}.metrics b{font-size:22px;font-weight:500;letter-spacing:-.5px}.network-head{margin-top:20px}select{border:1px solid #fff;border-radius:10px;background:#ffffff77;padding:8px;font-size:12px;color:#416c82}#network-canvas{display:block;width:100%;height:170px;margin-top:12px}.tuning{padding:25px;margin-top:24px}.tuning .panel-title p{font-size:12px;margin:8px 0 18px}details{border-top:1px solid #c1d8e388;padding:15px 0}summary{cursor:pointer;font-size:14px}.sliders{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 25px;margin-top:20px}.sliders label{font-size:12px;display:block}.sliders output{float:right;font-variant-numeric:tabular-nums;color:#387a99}.sliders input{width:100%;accent-color:#5296b2;margin-top:12px}pre{max-height:220px;overflow:auto;background:#ffffff66;padding:20px;border-radius:12px;font-size:12px}footer{text-align:center;font-size:12px;color:#5c7b8e;padding:28px}button:disabled{opacity:.5;cursor:wait}@media(max-width:1000px){.intro{display:block}.intro p{display:none}.workspace{grid-template-columns:245px 1fr}.input-panel,.preview-panel{padding:16px}.sample-main{padding:12px}.sample aside{display:none}.metrics b{font-size:17px}.metrics span{font-size:10px}.sliders{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){header{padding:16px 5%}.brand span{display:block;margin:5px 0;font-size:11px}.badge{font-size:10px}main{padding:24px 5%}.intro h1{font-size:30px}.workspace{grid-template-columns:1fr}.pad{height:190px}.input-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.input-panel .panel-title,.input-panel .pad,.input-panel .helper{grid-column:1/-1}.input-panel .actions{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}.input-panel .actions button{padding:10px 3px}.switch{font-size:12px}.switch small{font-size:10px}.event-label{margin:12px 0}.viewport{height:290px}#screen{width:86%}.metrics{grid-template-columns:1fr 1fr}.network-head{align-items:flex-start;flex-direction:column}.sliders{grid-template-columns:1fr 1fr;gap:15px}.tuning{padding:20px}.tuning .panel-title{align-items:flex-start}.tuning .panel-title button{white-space:nowrap}.preview-panel>.panel-title .badge{max-width:130px;text-align:center}.sample h3{font-size:24px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
:root h1 em{margin-left:.13em}.ripple{position:absolute;width:12px;height:12px;pointer-events:none;border:1px solid #ffffffcc;border-radius:50%;transform:translate(-50%,-50%);animation:ripple 1.8s ease-out forwards;box-shadow:0 0 12px #fff7,inset 0 0 8px #fff8}@keyframes ripple{to{width:300px;height:300px;opacity:0}}@media(prefers-reduced-motion:reduce){.ripple{display:none}}