#fountivaApp{
  position:relative;width:100%;height:100%;min-height:620px;overflow:hidden;
  color-scheme:dark;background:#0a0e16;container-type:size;
  font-family:system-ui,"Segoe UI",Roboto,sans-serif;
}
@scope (#fountivaApp){
  *{box-sizing:border-box}
  button,input{font:inherit}
  button:focus-visible,input:focus-visible{outline:2px solid #8bd8ff;outline-offset:2px}
  #fountivaCanvasHost{position:absolute;inset:0;display:block;width:100%;height:100%}
  #fountivaCanvasHost canvas{display:block;width:100%!important;height:100%!important}
  #vignette{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,12,.38))}
  #brand{position:absolute;top:16px;left:18px;z-index:9;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);pointer-events:none}
  #brand h1{margin:0;font-size:20px;font-weight:700;letter-spacing:.02em}
  #brand p{margin:3px 0 0;font-size:12px;opacity:.78}
  #hud{position:absolute;left:18px;bottom:14px;z-index:9;color:#cfe3f5;font-size:12px;opacity:.8;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none}
  #panel{position:absolute;top:16px;right:16px;width:min(274px,calc(100% - 32px));z-index:10;color:#dbe4f0;font-size:13px;line-height:1.4;background:rgba(13,18,28,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:14px;box-shadow:0 12px 44px rgba(0,0,0,.5);overflow:hidden}
  #panelHead{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font-weight:650;font-size:14px;border-bottom:1px solid rgba(255,255,255,.07)}
  #panelHead button{width:28px;height:28px;background:none;border:0;color:#a9bfd5;cursor:pointer;font-size:16px;border-radius:6px}
  #panelBody{max-height:640px;max-height:calc(100cqh - 78px);overflow-y:auto;padding:10px 14px 16px;scrollbar-color:rgba(255,255,255,.18) transparent;scrollbar-width:thin}
  #panelBody::-webkit-scrollbar{width:6px}
  #panelBody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
  #panel.closed{width:auto;min-width:132px}
  #panel.closed #panelBody{display:none}
  #panelActions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 38px;gap:6px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07)}
  #panelActions button{min-width:0;height:38px;border:1px solid rgba(255,255,255,.12);color:#e8eef5;background:rgba(255,255,255,.07);padding:0 6px;border-radius:8px;cursor:pointer;font-size:10.5px;line-height:1.15;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
  #panelActions button:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}
  #panelActions .icon-btn{width:38px;padding:0;font-size:21px;line-height:1}
  #panelActions button:disabled{cursor:wait;opacity:.72;transform:none}
  #recordBtn.recording{background:rgba(196,39,71,.84);border-color:#ff6b86;box-shadow:0 0 18px rgba(255,70,105,.2)}
  #fullscreenBtn.on{background:rgba(29,127,184,.82);border-color:#4fc3f7}
  #recordStatus{min-height:0;margin:5px 0 0;color:#aebfd0;font-size:10px;line-height:1.35}
  #recordStatus:empty{display:none}
  .sec{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7fcdf7;margin:14px 0 6px;font-weight:700}
  .ctl{margin:8px 0}
  .ctl label{display:flex;justify-content:space-between;margin-bottom:3px;color:#c7d2df;font-size:12.5px}
  .ctl label span{color:#7fcdf7}
  .chk label{justify-content:flex-start;gap:7px;cursor:pointer}
  input[type=range]{width:100%;accent-color:#4fc3f7;cursor:pointer}
  input[type=color]{width:100%;height:28px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:transparent;padding:1px;cursor:pointer}
  .btnrow{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
  .btnrow button,.widebtn{border:1px solid rgba(255,255,255,.12);color:#e8eef5;background:rgba(255,255,255,.07);padding:7px 6px;border-radius:8px;cursor:pointer;font-size:12px;transition:background .15s,border-color .15s,transform .15s}
  .btnrow button{flex:1;min-width:60px}
  .btnrow button:hover,.widebtn:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}
  .btnrow button.on,.widebtn.on{background:rgba(29,127,184,.82);border-color:#4fc3f7}
  .widebtn{width:100%;margin-top:5px}
  #flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20;transition:opacity .45s}
  :scope:fullscreen{width:100vw;height:100vh;min-height:0;border-radius:0}
}
@container (max-width:760px){
  #fountivaApp #brand{top:14px;left:14px}
  #fountivaApp #brand p{max-width:210px}
  #fountivaApp #panel{top:12px;right:12px}
  #fountivaApp #hud{left:14px;bottom:11px;font-size:10px}
}
@container (max-width:430px){
  #fountivaApp #panelActions{gap:4px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 35px}
  #fountivaApp #panelActions button{height:35px;padding-inline:4px;font-size:10px}
  #fountivaApp #panelActions .icon-btn{width:35px;padding:0;font-size:20px}
}