/*! Morph — © 2026 R. L. Cacciuttolo. All rights reserved. Copying, modifying or redistributing this code without written permission is prohibited. */
:root{--ink: #f4eefa;--glass: rgba(20, 16, 26, .55);--edge: rgba(244, 238, 250, .28);--image: #d27bff;--time: #ff6a00;--matter: #3fd0c0;--rec: #ff3b4e}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--ink);font:15px/1.35 system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}#work{position:fixed;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:0}#work.mirrored{transform:scaleX(-1)}#top,#bottom,#status,#banner,#callbar{z-index:3}#remote{position:fixed;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:0}body[data-call=on] #work,body[data-call=on].swapped #remote{inset:auto;top:calc(env(safe-area-inset-top) + 120px);right:12px;width:30vw;height:30vh;border-radius:12px;z-index:2;box-shadow:0 2px 12px #0009}body[data-call=on].swapped #work{inset:0;width:100%;height:100%;border-radius:0;z-index:0;box-shadow:none}#callbar{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 66px);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:16px;background:#14101ad9;border:1px solid var(--edge)}#callbar span{flex:1;font-size:13px}#callbar button{padding:0 12px}#incoming .ring{font-size:54px;margin:0}#incoming h2{font-size:26px;margin:8px 0 22px}#incoming-join,#callback{font-size:20px;min-height:60px;width:100%;max-width:320px;border-radius:30px;background:#25d366;border-color:#25d366;color:#0b0a0d;font-weight:700}#callback{display:block;margin:14px auto 0;font-size:17px;min-height:52px;max-width:240px}#callback[hidden]{display:none}#incoming-no{display:block;margin:12px auto 0;background:none;border:none;opacity:.7}#start.ringing h1,#start.ringing #go,#start.ringing #callback,#start.ringing p:not(#incoming p),#start.ringing a{display:none}#call.on{background:var(--rec);color:#fff}button{font:inherit;color:var(--ink);background:var(--glass);border:1px solid var(--edge);border-radius:22px;min-height:44px;padding:0 16px;cursor:pointer}button.on{background:#f4eefae6;color:#0b0a0d}#top{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px}#info{font-size:12px;opacity:.7}#banner{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 66px);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:16px;background:#14101ad9;border:1px solid var(--edge)}#banner span{flex:1;font-size:13px}#banner button{padding:0 12px}#bottom{position:fixed;left:0;right:0;bottom:0;padding:10px 0 calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(transparent,#0009 25%)}#level-row{display:flex;align-items:center;gap:12px;padding:0 16px 8px}#fx-name{min-width:5.5em;font-weight:600}#fx-level{min-width:2em;text-align:right;font-variant-numeric:tabular-nums}#level{flex:1;height:44px;margin:0;accent-color:var(--ink)}#strip{display:flex;gap:10px;overflow-x:auto;padding:0 16px;scroll-snap-type:x proximity;touch-action:pan-x;scrollbar-width:none}#strip::-webkit-scrollbar{display:none}#strip button{flex:none;scroll-snap-align:start;border-left:4px solid var(--fam)}#strip button small{margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.04em;opacity:.7;border:1px solid currentColor;border-radius:6px;padding:0 4px;vertical-align:1px}#strip button[data-family=image]{--fam: var(--image)}#strip button[data-family=time]{--fam: var(--time)}#strip button[data-family=matter]{--fam: var(--matter)}#strip button.sel{outline:2px solid var(--fam);outline-offset:2px}#strip button.fading{opacity:.6}#actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 0}#actions>button{flex:1;white-space:nowrap;padding:0 10px}#rec{flex:none!important;width:64px;height:64px;border-radius:50%;padding:0;font-size:26px;color:var(--rec);border:3px solid var(--ink);background:#00000059}#rec.on{width:auto;min-width:64px;padding:0 14px;border-radius:32px;font-size:15px;color:#fff;background:var(--rec)}body[data-mode=camera] #camera,body[data-mode=camera] #export,body[data-mode=camera] #voice,body[data-mode=clip] #rec,body[data-mode=clip] #flip,body[data-mode=clip] #gallery{display:none}#voice small{margin-left:6px;font-size:10px;font-weight:700;opacity:.7;border:1px solid currentColor;border-radius:6px;padding:0 4px}#export{background:#f4eefae6;color:#0b0a0d;font-weight:600}#status{position:fixed;left:16px;right:16px;top:calc(env(safe-area-inset-top) + 64px);text-align:center;font-size:13px;color:#ffd27a;pointer-events:none}#sheet{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:5;padding:16px;border-radius:20px;background:#14101af0;border:1px solid var(--edge)}#sheet p{margin:0 0 12px;text-align:center;font-variant-numeric:tabular-nums}#sheet .row{display:flex;gap:10px}#sheet .row button{flex:1}#start{position:fixed;inset:0;display:grid;place-items:center;background:#0b0a0d;padding:24px;z-index:10;text-align:center}#start h1{font-size:40px;letter-spacing:.08em;margin:0 0 20px}#start #go{font-size:20px;min-height:56px;padding:0 44px;border-radius:28px}#start p{opacity:.8;max-width:26em;margin:22px auto}#start #start-recipe{opacity:1;color:#ffd27a}#start a{color:var(--ink);opacity:.6;font-size:13px}