
#ml-living{--m-bg:light-dark(#edf2f8,#040e1a);--m-fg:light-dark(#040e1a,#edf2f8);--m-muted:light-dark(#526579,#92a8bc);--m-line:light-dark(#bbcbd9,#20364b);--m-cube:light-dark(#9eb6c9,#275370);--m-edge:light-dark(#557e99,#59839e);--m-accent:light-dark(#0081a5,#43d5dc);--m-on:light-dark(#fff,#040e1a);--m-inner:light-dark(#e2ebf2,#091827);background:var(--m-bg);color:var(--m-fg);padding:25px 28px 22px;font-family:Arial,sans-serif;overflow:hidden;box-sizing:border-box;position:relative}
#ml-living *{box-sizing:border-box}
#ml-living .ml-top{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--m-line)}
#ml-living .ml-name{font:500 18px/1.3 ui-monospace,Consolas,monospace;letter-spacing:-.05em}
#ml-living .ml-name b{color:var(--m-accent);font-weight:500}
#ml-living .ml-top-label{font:11px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.08em;color:var(--m-muted);text-align:right}
#ml-living .ml-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:25px}
#ml-living h2{font:500 clamp(29px,5.5vw,42px)/1.12 ui-monospace,Consolas,monospace;letter-spacing:-.06em;margin:0;color:var(--m-fg)}
#ml-living h2 span{color:var(--m-muted)}
#ml-living .ml-live{font:11px/1.5 ui-monospace,Consolas,monospace;color:var(--m-muted);display:flex;align-items:center;gap:7px;white-space:nowrap;padding-bottom:5px}
#ml-living .ml-live-dot{width:5px;height:5px;background:var(--m-accent);display:block}
#ml-living[data-paused=true] .ml-live-dot{background:var(--m-muted)}
#ml-living .ml-stage{height:390px;position:relative;margin:8px -28px 0;overflow:hidden}
#ml-living canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
#ml-living canvas:active{cursor:grabbing}
#ml-living .ml-corner{position:absolute;color:var(--m-muted);font:11px/1.4 ui-monospace,Consolas,monospace;pointer-events:none;bottom:15px}
#ml-living .ml-left{left:28px}#ml-living .ml-right{right:28px}
#ml-living .ml-states{display:grid;grid-template-columns:1.2fr 1fr 1fr;border:1px solid var(--m-line)}
#ml-living button{font-family:ui-monospace,Consolas,monospace;border-radius:0;color:var(--m-fg)}
#ml-living .ml-state{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;text-align:left;padding:12px;background:var(--m-bg);border:0;font-size:12px;line-height:1.35}
#ml-living .ml-state+.ml-state{border-left:1px solid var(--m-line)}
#ml-living .ml-state .ml-num{color:var(--m-muted);font-size:11px}
#ml-living .ml-state[aria-pressed=true]{background:var(--m-inner)}
#ml-living .ml-state[aria-pressed=true]:after{content:'';height:3px;background:var(--m-accent);position:absolute;left:0;right:0;bottom:0}
#ml-living .ml-state[aria-pressed=true] .ml-num{color:var(--m-accent)}
#ml-living button:focus-visible{outline:2px solid var(--m-accent);outline-offset:4px;z-index:2}
#ml-living .ml-info{font:13px/1.65 Arial,sans-serif;min-height:43px;margin:14px 0 12px;color:var(--m-muted)}
#ml-living .ml-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:15px;border-top:1px solid var(--m-line)}
#ml-living .ml-hint{font:11px/1.6 ui-monospace,Consolas,monospace;color:var(--m-muted);max-width:290px}
#ml-living .ml-actions{display:flex;gap:8px;flex-shrink:0}
#ml-living .ml-action{background:transparent;border:1px solid var(--m-line);min-height:42px;padding:10px 13px;font-size:12px;line-height:1.4;display:inline-flex;gap:8px;align-items:center;justify-content:center}
#ml-living .ml-action:hover{background:var(--m-inner)}
#ml-living .ml-action-primary{background:var(--m-accent);color:var(--m-on);border-color:var(--m-accent)}
#ml-living .ml-action-primary:hover{background:var(--m-accent);filter:brightness(1.09)}
#ml-living{--m-signal:light-dark(#4677b5,#6e9bea);--m-shimmer:light-dark(#168794,#baf5ed)}
#ml-living .ml-product-peek{position:absolute;z-index:3;width:245px;max-width:calc(100% - 24px);padding:13px 15px;background:var(--m-inner);border:1px solid var(--m-line);border-left:3px solid var(--m-accent);pointer-events:none;box-shadow:0 8px 24px #0002}
#ml-living .ml-product-peek[hidden]{display:none}
#ml-living .ml-product-meta{font:10px/1.5 ui-monospace,Consolas,monospace;color:var(--m-muted);letter-spacing:.025em}
#ml-living .ml-product-title{font:500 18px/1.3 ui-monospace,Consolas,monospace;margin:5px 0 6px;color:var(--m-fg)}
#ml-living .ml-product-description{font:13px/1.5 Arial,sans-serif;color:var(--m-fg);margin:0}
#ml-living .ml-product-picker{display:block;max-width:290px;min-width:0;flex:1;font:11px/1.5 ui-monospace,Consolas,monospace;color:var(--m-muted)}
#ml-living .ml-product-picker select{display:block;width:100%;min-height:38px;background:var(--m-bg);color:var(--m-fg);border:1px solid var(--m-line);border-radius:0;font:12px/1.4 ui-monospace,Consolas,monospace;padding:8px 10px;margin:4px 0 0}
#ml-living .ml-product-picker select:focus-visible{outline:2px solid var(--m-accent);outline-offset:3px}
#ml-living [hidden]{display:none!important}
#ml-living .ml-manual-hint{max-width:310px;font:12px/1.6 ui-monospace,Consolas,monospace;color:var(--m-muted)}
@media(max-width:520px){#ml-living .ml-product-picker{max-width:none;flex-basis:100%}#ml-living .ml-product-picker select{font-size:16px;min-height:44px}}
@media(max-width:520px){#ml-living{padding:20px 17px}#ml-living .ml-top-label{font-size:10px}#ml-living .ml-heading{padding-top:24px}#ml-living h2{font-size:30px}#ml-living .ml-live{display:none}#ml-living .ml-stage{height:340px;margin:4px -17px 0}#ml-living .ml-left{left:17px}#ml-living .ml-right{right:17px}#ml-living .ml-states{grid-template-columns:1.23fr .9fr 1fr}#ml-living .ml-state{min-height:66px;display:block;padding:9px 8px;font-size:11px}#ml-living .ml-num{display:block;margin-bottom:5px}#ml-living .ml-bottom{flex-wrap:wrap;gap:13px}#ml-living .ml-hint{max-width:none}#ml-living .ml-actions{width:100%}#ml-living .ml-action{min-height:44px;flex:1}#ml-living .ml-info{min-height:58px;font-size:13px}#ml-living .ml-corner{font-size:10px}}
