.is-phone{position:relative;height:340px;max-width:300px;margin:0 auto;overflow:hidden;border:1px solid var(--rule);border-radius:22px;background:color-mix(in srgb,var(--fg) 5%,transparent);user-select:none;-webkit-user-select:none}
.is-snap,.is-ghost{position:absolute;top:0;left:0;right:0;height:0;border-top:1px dashed var(--rule);pointer-events:none;z-index:2}
.is-snap{border-top-color:color-mix(in srgb,var(--fg) 22%,transparent)}
.is-snap::after{content:attr(data-name);position:absolute;right:8px;top:-15px;color:var(--muted);font-size:11px}
.is-ghost{border-top:1.5px dashed var(--redline);z-index:3}
.is-ghost span{position:absolute;left:8px;top:2px;color:var(--redline);font-size:11px}
.is-ghost.is-off{opacity:.5}
.is-sheet{position:absolute;top:0;left:0;right:0;height:100%;padding:28px 16px 0;border-radius:14px 14px 0 0;background:var(--bg);box-shadow:0 -1px 0 var(--rule),0 -10px 30px -18px rgba(0,0,0,.35);touch-action:none;cursor:grab;z-index:1}
.is-sheet:active{cursor:grabbing}
.is-handle{position:absolute;top:0;left:50%;width:64px;height:24px;margin-left:-32px;padding:0;border:0;background:none;cursor:inherit}
.is-handle::before{content:"";position:absolute;left:18px;right:18px;top:10px;height:4px;border-radius:2px;background:var(--rule)}
.is-sheet i{display:block;height:10px;margin-bottom:12px;border-radius:3px;background:color-mix(in srgb,var(--fg) 9%,transparent)}
.is-sheet i:nth-of-type(odd){width:72%}
.is-rb{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:1rem;align-items:start}
.is-view{position:relative;height:200px;overflow:hidden;border:1px solid var(--rule);border-radius:10px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.is-content{padding:10px;background:var(--bg);min-height:100%}
.is-content i{display:block;height:22px;margin-bottom:8px;border-radius:4px;background:color-mix(in srgb,var(--fg) 9%,transparent)}
.is-rb canvas{display:block;width:100%;height:200px}
.is-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;margin-top:.9rem}
.is-sliders label{display:grid;grid-template-columns:1fr auto;gap:.25rem .5rem;align-items:center}
.is-sliders input{grid-column:1/-1;width:100%;accent-color:var(--redline)}
.is-sliders output{color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:480px){.is-rb,.is-sliders{grid-template-columns:minmax(0,1fr)}}