#silent-recorder{color-scheme:light dark;font-family:Inter,system-ui,sans-serif;color:light-dark(#273b33,#e3ebe5)}
#silent-recorder *{box-sizing:border-box}
#silent-recorder .sr-app{position:relative;isolation:isolate;overflow:hidden;min-height:570px;background:light-dark(#f5f5f0,#141c18);border-radius:22px}
#silent-recorder .sr-top{height:94px;padding:0 44px;display:flex;align-items:center;justify-content:space-between}
#silent-recorder .sr-count{font-variant-numeric:tabular-nums;font-size:16px;font-weight:500;letter-spacing:4px;color:light-dark(#718074,#9daea2)}
#silent-recorder button{display:inline-flex;align-items:center;justify-content:center;border:0;font:inherit;flex-shrink:0;transition:background .18s,transform .18s;position:relative}
#silent-recorder button:hover{transform:translateY(-2px)}
#silent-recorder button:active{transform:scale(.96)}
#silent-recorder button:focus-visible,#silent-recorder input:focus-visible,#silent-recorder textarea:focus-visible{outline:3px solid light-dark(#79a991,#8fbea4);outline-offset:5px}
#silent-recorder .sr-icon{width:46px;height:46px;border-radius:50%;color:light-dark(#536b5a,#b1c2b6);background:transparent}
#silent-recorder .sr-icon:hover{background:light-dark(#e9ede5,#26382e)}
#silent-recorder svg{width:23px;height:23px;stroke-width:1.65}
#silent-recorder .sr-main{max-width:700px;margin:0 auto;padding:0 30px 42px;display:flex;flex-direction:column;align-items:center}
#silent-recorder .sr-stage{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/8.5;border-radius:18px;background:light-dark(#e9ede5,#1e2a23);overflow:hidden}
#silent-recorder .sr-monitor{position:relative;display:grid;place-items:center;color:light-dark(#9aaa9c,#718e7c)}
#silent-recorder .sr-monitor>svg{width:90px;height:90px;stroke-width:1}
#silent-recorder .sr-monitor-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:light-dark(#aabbab,#8fafa0);top:30px}
#silent-recorder .sr-time{margin:22px 0 23px;font-size:28px;font-weight:400;letter-spacing:2px;font-variant-numeric:tabular-nums;color:light-dark(#627367,#a9bbae)}
#silent-recorder .sr-controls,#silent-recorder .sr-running,#silent-recorder .sr-finished{display:flex;align-items:center;justify-content:center;gap:25px;height:82px}
#silent-recorder .sr-small{width:48px;height:48px;border-radius:50%;color:light-dark(#6b7a6e,#a6baab);background:transparent}
#silent-recorder .sr-small[aria-pressed=true]{background:light-dark(#e3eade,#304537);color:light-dark(#315e43,#c2e1cb)}
#silent-recorder .sr-rec{width:80px;height:80px;border-radius:50%;background:light-dark(#fff,#2c3830);box-shadow:0 5px 24px light-dark(#253c2812,#00000025);border:1px solid light-dark(#e2e6dc,#3c4b40)}
#silent-recorder .sr-rec span{height:45px;width:45px;border-radius:50%;background:light-dark(#dd5148,#f16c61)}
#silent-recorder .sr-rec:hover span{background:light-dark(#cd3b32,#ff8075)}
#silent-recorder .sr-stop{width:72px;height:72px;border-radius:50%;background:light-dark(#f9e5de,#492d29)}
#silent-recorder .sr-stop span{width:24px;height:24px;border-radius:4px;background:light-dark(#cc5146,#f18a7b)}
#silent-recorder .sr-download{width:72px;height:72px;border-radius:50%;background:light-dark(#265b43,#90cba5);color:light-dark(#fff,#153724)}
#silent-recorder .sr-download svg{width:29px;height:29px}
#silent-recorder .sr-live{width:83%;height:76%;display:grid;place-items:center}
#silent-recorder .sr-live-window{position:relative;width:100%;height:100%;border:1px solid light-dark(#becbbd,#4c6655);border-radius:10px;padding:13px;color:light-dark(#708b76,#8bb198)}
#silent-recorder .sr-live-window>span{display:inline-block;width:5px;height:5px;margin:0 3px;border-radius:50%;background:currentColor;opacity:.55}
#silent-recorder .sr-live-content{position:absolute;inset:35px 12px 12px;display:grid;place-items:center;background:light-dark(#dee6d9,#2b3c31);border-radius:5px}
#silent-recorder .sr-live-content svg{height:56px;width:56px;stroke-width:1.1}
#silent-recorder .sr-record-light{position:absolute;top:18px;right:19px;width:9px;height:9px;background:light-dark(#d44d43,#ff877b);border-radius:50%;animation:sr-blink 1.8s infinite}
#silent-recorder .sr-record-light.paused{animation:none;background:light-dark(#bd964b,#e3b760)}
#silent-recorder .sr-ready{position:absolute;inset:0;display:grid;place-items:center;background:light-dark(#dce7d9cc,#253e2dd9)}
#silent-recorder .sr-play{width:64px;height:64px;border-radius:50%;background:light-dark(#ffffffd9,#496b50);color:light-dark(#345840,#dfeddf)}
#silent-recorder .sr-play svg{margin-left:3px;width:28px;height:28px}
#silent-recorder .sr-backdrop{position:absolute;inset:0;z-index:10;background:light-dark(#34483b44,#00000077);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:22px}
#silent-recorder .sr-contact{width:100%;max-width:430px;background:light-dark(#fafbf7,#202c24);border-radius:20px;padding:22px 26px;box-shadow:0 15px 55px light-dark(#14271d22,#00000044)}
#silent-recorder .sr-dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;color:light-dark(#607d65,#a9c4ae)}
#silent-recorder .sr-dialog-top>svg{width:28px;height:28px}
#silent-recorder .sr-email{display:flex;gap:12px;align-items:center;border-bottom:1px solid light-dark(#dbe3d6,#415044);padding:6px 0 13px;margin-bottom:17px;color:light-dark(#839481,#97b39e)}
#silent-recorder input{min-width:0;width:100%;font:inherit;font-size:16px;border:0;background:transparent;color:inherit;padding:8px}
#silent-recorder textarea{width:100%;resize:vertical;min-height:120px;max-height:190px;border:1px solid light-dark(#dce4d6,#415344);background:light-dark(#f0f3ec,#17231b);color:light-dark(#354c3c,#e2eee5);border-radius:10px;padding:13px;font:inherit;font-size:16px}
#silent-recorder .sr-form-bottom{display:flex;align-items:center;justify-content:flex-end;margin-top:16px;gap:15px}
#silent-recorder .sr-send{width:48px;height:48px;border-radius:50%;background:light-dark(#2c6048,#a5d6b4);color:light-dark(#fff,#153621)}
#silent-recorder .sr-unsent,#silent-recorder .sr-download-note{display:flex;align-items:center;gap:8px;color:light-dark(#997b48,#d6b475)}
#silent-recorder .sr-download-note{margin-top:16px}
#silent-recorder .sr-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#silent-recorder [hidden]{display:none!important}
@keyframes sr-blink{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#silent-recorder *{animation:none!important;transition:none!important}}
@media(max-width:480px){#silent-recorder .sr-app{min-height:480px;border-radius:14px}#silent-recorder .sr-top{padding:0 23px;height:82px}#silent-recorder .sr-main{padding:10px 19px 35px}#silent-recorder .sr-stage{aspect-ratio:4/3}#silent-recorder .sr-contact{padding:15px 18px}#silent-recorder .sr-backdrop{padding:16px}}


#silent-recorder .sr-app{background:light-dark(#f8f3e9,#231e18);color:light-dark(#584a36,#e8d8bc);min-height:590px}
#silent-recorder .sr-top,#silent-recorder .sr-main{position:relative;z-index:1}
#silent-recorder .sr-count{color:light-dark(#9c896a,#c7b18c)}
#silent-recorder .sr-icon{color:light-dark(#8e7b60,#d1b78f)}
#silent-recorder .sr-icon:hover{background:light-dark(#ece1cf,#453721)}
#silent-recorder .sr-stage{background:light-dark(#eee5d5,#382e22);box-shadow:0 12px 50px light-dark(#9b6d3510,#00000020)}
#silent-recorder .sr-monitor{color:light-dark(#b2a180,#ad9873)}
#silent-recorder .sr-monitor-dot{background:light-dark(#b1a07c,#bea06d)}
#silent-recorder .sr-time{color:light-dark(#8a785b,#d4bd93)}
#silent-recorder .sr-small{color:light-dark(#97805d,#cfb686)}
#silent-recorder .sr-small[aria-pressed=true]{background:light-dark(#eadfc8,#4b3c24);color:light-dark(#7b613b,#e6cd99)}
#silent-recorder .sr-rec{background:light-dark(#fffcf5,#463728);border-color:light-dark(#e9dbc2,#675039);box-shadow:0 5px 25px light-dark(#815b2520,#00000030)}
#silent-recorder .sr-rec span{background:light-dark(#c65c3b,#ed8956)}
#silent-recorder .sr-rec:hover span{background:light-dark(#b74d2e,#ff9a67)}
#silent-recorder .sr-live-window{border-color:light-dark(#cdbb96,#806a44);color:light-dark(#9e845c,#d0ae76)}
#silent-recorder .sr-live-content{background:light-dark(#e1d3b7,#4b3d29)}
#silent-recorder .sr-ready{background:light-dark(#e6d9bfdd,#453720e8)}
#silent-recorder .sr-play{background:light-dark(#fff9ed,#705633);color:light-dark(#98703f,#f7e3bb)}
#silent-recorder .sr-download,#silent-recorder .sr-send{background:light-dark(#906338,#dfb47b);color:light-dark(#fff8ea,#342310)}
#silent-recorder .sr-contact{background:light-dark(#fcf7ec,#32281d)}
#silent-recorder .sr-dialog-top{color:light-dark(#947851,#d4b481)}
#silent-recorder .sr-email{border-color:light-dark(#e5d6bc,#6b5535);color:light-dark(#a18b65,#d8bb88)}
#silent-recorder textarea{background:light-dark(#f4ecdc,#241e16);border-color:light-dark(#e1d1b4,#665035);color:light-dark(#665035,#f0d9b1)}
#silent-recorder .sr-autumn{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;background:radial-gradient(ellipse at 3% 80%,light-dark(#d7a25e15,#d49b4010),transparent 43%),radial-gradient(ellipse at 99% 24%,light-dark(#c9854610,#e6b56d0a),transparent 42%)}
#silent-recorder .sr-leaf{position:absolute;width:48px;height:76px;border-radius:4% 95% 4% 95%;background:linear-gradient(130deg,light-dark(#d6ab67,#9c723a),light-dark(#b76e3f,#744729));box-shadow:inset -1px -1px 5px light-dark(#79512c17,#00000020);opacity:.65}
#silent-recorder .sr-leaf:before{content:'';position:absolute;left:50%;top:12%;width:1px;height:98%;background:light-dark(#8e653788,#d1ab7955);transform:rotate(-30deg);transform-origin:top}
#silent-recorder .sr-leaf:after{content:'';position:absolute;top:40%;left:29%;width:46%;height:1px;background:light-dark(#a1764077,#d0ad7755);transform:rotate(-18deg)}
#silent-recorder .sr-leaf>span{position:absolute;top:62%;left:42%;width:35%;height:1px;background:light-dark(#a1764066,#d0ad7744);transform:rotate(-14deg)}
#silent-recorder .sr-leaf-a{top:113px;left:24px;transform:rotate(-29deg);width:40px;height:67px}
#silent-recorder .sr-leaf-b{top:207px;right:24px;transform:rotate(43deg);width:33px;height:56px;opacity:.5;background:linear-gradient(130deg,light-dark(#d2b16b,#b39654),light-dark(#bea060,#827039))}
#silent-recorder .sr-leaf-c{bottom:51px;left:75px;transform:rotate(52deg);width:53px;height:82px;background:linear-gradient(130deg,light-dark(#c79454,#9e733c),light-dark(#ac6441,#855133))}
#silent-recorder .sr-leaf-d{bottom:39px;right:68px;transform:rotate(-71deg);width:47px;height:75px;opacity:.62}
#silent-recorder .sr-leaf-e{bottom:109px;right:31px;transform:rotate(13deg);width:22px;height:39px;opacity:.42;background:light-dark(#cbb174,#9d864b)}
#silent-recorder .sr-leaf-f{bottom:138px;left:18px;transform:rotate(-8deg);width:22px;height:39px;opacity:.38;background:light-dark(#b5a576,#7c784c)}
#silent-recorder .sr-seed{position:absolute;width:5px;height:11px;border-radius:95% 5% 95% 5%;background:light-dark(#be985b,#a68650);opacity:.4}
#silent-recorder .sr-seed-a{top:175px;left:83px;transform:rotate(-32deg)}
#silent-recorder .sr-seed-b{bottom:32px;left:155px;transform:rotate(45deg)}
#silent-recorder .sr-seed-c{top:135px;right:73px;transform:rotate(23deg)}
@media(max-width:780px){#silent-recorder .sr-main{max-width:620px;padding-left:43px;padding-right:43px}#silent-recorder .sr-leaf-a{left:-15px;top:140px}#silent-recorder .sr-leaf-b{right:-12px}#silent-recorder .sr-leaf-c{left:22px;bottom:35px;width:36px;height:62px}#silent-recorder .sr-leaf-d{right:20px;bottom:35px;width:34px;height:56px}#silent-recorder .sr-seed-a{left:20px}#silent-recorder .sr-seed-c{right:15px}}
@media(max-width:480px){#silent-recorder .sr-app{min-height:500px}#silent-recorder .sr-main{padding-left:28px;padding-right:28px}#silent-recorder .sr-leaf-e{right:-9px}#silent-recorder .sr-leaf-f{left:-9px}#silent-recorder .sr-leaf-c{left:10px;bottom:20px}#silent-recorder .sr-leaf-d{right:10px;bottom:22px}}

#silent-recorder .sr-visitors{display:flex;gap:12px;align-items:center;color:light-dark(#9c896a,#c7b18c)}
#silent-recorder .sr-visitors svg{width:19px;height:19px}
#silent-recorder .sr-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#17231b}
#silent-recorder .sr-ready{background:transparent;pointer-events:none}
#silent-recorder .sr-play{pointer-events:auto}
#silent-recorder .sr-monitor{pointer-events:none}
#silent-recorder .sr-honey{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important}
#silent-recorder .sr-unsent{color:light-dark(#9c4c36,#f4ad87)}
#silent-recorder .sr-unsent.success{color:light-dark(#2e6c47,#98d7ac)}
#silent-recorder .sr-record-light{z-index:2}
#silent-recorder .sr-app[data-season=winter]{background:light-dark(#eff4f6,#18242b)}
#silent-recorder .sr-app[data-season=spring]{background:light-dark(#f5f4ec,#1f281e)}
#silent-recorder .sr-app[data-season=summer]{background:light-dark(#faf5e5,#292318)}
#silent-recorder .sr-app[data-season=winter] .sr-stage{background:light-dark(#e0e9ed,#263944)}
#silent-recorder .sr-app[data-season=spring] .sr-stage{background:light-dark(#e6ecdf,#2f3e2a)}
#silent-recorder .sr-app[data-season=summer] .sr-stage{background:light-dark(#efe6cb,#443921)}
#silent-recorder .sr-app[data-season=winter] .sr-autumn{background:none}
#silent-recorder .sr-app[data-season=winter] .sr-leaf{border-radius:0;background:transparent;box-shadow:none;opacity:.55}
#silent-recorder .sr-app[data-season=winter] .sr-leaf:before{content:'❄';position:static;font-size:40px;background:none;color:light-dark(#90b0c0,#8eb3c5)}
#silent-recorder .sr-app[data-season=winter] .sr-leaf:after,#silent-recorder .sr-app[data-season=winter] .sr-leaf>span{display:none}
#silent-recorder .sr-app[data-season=spring] .sr-leaf{border-radius:90% 20% 90% 20%;background:linear-gradient(120deg,light-dark(#edcbd3,#b3798c),light-dark(#dbafc1,#80516b));width:24px;height:39px;box-shadow:none}
#silent-recorder .sr-app[data-season=spring] .sr-leaf:before,#silent-recorder .sr-app[data-season=spring] .sr-leaf:after,#silent-recorder .sr-app[data-season=spring] .sr-leaf>span{display:none}
#silent-recorder .sr-app[data-season=summer] .sr-leaf{background:light-dark(#d9bd6c,#a58a47);border-radius:50%;width:22px;height:22px;box-shadow:0 0 32px light-dark(#dab94766,#dab94722)}
#silent-recorder .sr-app[data-season=summer] .sr-leaf:before,#silent-recorder .sr-app[data-season=summer] .sr-leaf:after,#silent-recorder .sr-app[data-season=summer] .sr-leaf>span{display:none}
#silent-recorder .sr-app[data-season=summer] .sr-leaf-a{width:48px;height:48px}
body{margin:0;background:light-dark(#f8f3e9,#231e18);min-height:100dvh;color-scheme:light dark}
#silent-recorder .sr-app{border-radius:0;min-height:100dvh;display:flex;flex-direction:column}
#silent-recorder .sr-main{width:100%;margin:auto;max-width:820px;padding-bottom:65px}
#silent-recorder .sr-stage{aspect-ratio:16/9}
#silent-recorder button:disabled{opacity:.45;transform:none;cursor:default}
#silent-recorder .sr-stop{flex-shrink:0}
#silent-recorder .sr-download-note{position:relative;z-index:1}

/* Fit the recorder to the available browser viewport, including short windows. */
html,body{height:100%;min-height:0}
#silent-recorder{height:100%;min-width:0}
#silent-recorder .sr-app{height:100vh;height:100dvh;min-height:0;width:100%;overflow:hidden}
#silent-recorder .sr-top{flex:0 0 clamp(48px,10dvh,80px);height:auto;padding:0 clamp(16px,4vw,44px);min-width:0}
#silent-recorder .sr-visitors{gap:8px;min-width:0}
#silent-recorder .sr-count{font-size:clamp(12px,2vw,16px);letter-spacing:clamp(1px,.5vw,4px)}
#silent-recorder .sr-main{flex:1 1 0;min-height:0;min-width:0;width:100%;max-width:820px;margin:0 auto;padding:8px clamp(16px,4vw,30px) clamp(12px,3dvh,28px);justify-content:center}
#silent-recorder .sr-stage{flex:1 1 0;min-height:0;width:100%;aspect-ratio:auto;max-height:min(440px,calc((100vw - 32px)*.5625));border-radius:clamp(10px,2vw,18px)}
#silent-recorder .sr-monitor{height:min(90px,70%);aspect-ratio:1}
#silent-recorder .sr-monitor>svg{width:100%;height:100%}
#silent-recorder .sr-monitor-dot{width:14%;height:14%;top:33%}
#silent-recorder .sr-time{flex:0 0 auto;line-height:1.2;font-size:clamp(22px,4dvh,28px);margin:clamp(6px,2dvh,18px) 0}
#silent-recorder .sr-controls,#silent-recorder .sr-running,#silent-recorder .sr-finished{flex:0 0 clamp(56px,12dvh,82px);height:clamp(56px,12dvh,82px);gap:clamp(16px,4vw,25px)}
#silent-recorder .sr-rec{width:clamp(54px,11dvh,80px);height:clamp(54px,11dvh,80px)}
#silent-recorder .sr-rec span{width:56%;height:56%}
#silent-recorder .sr-stop,#silent-recorder .sr-download{width:clamp(52px,10dvh,72px);height:clamp(52px,10dvh,72px)}
#silent-recorder .sr-download-note{flex:0 0 auto;margin-top:8px}
#silent-recorder .sr-backdrop{position:fixed;padding:clamp(8px,3dvh,22px)}
#silent-recorder .sr-contact{max-height:100%;overflow:auto;overscroll-behavior:contain}
#silent-recorder textarea{min-height:60px;height:clamp(60px,22dvh,150px);max-height:190px}
@media(max-height:400px){
 #silent-recorder .sr-top{flex-basis:44px}
 #silent-recorder .sr-main{padding-top:2px;padding-bottom:8px}
 #silent-recorder .sr-time{font-size:20px;margin:5px 0}
 #silent-recorder .sr-controls,#silent-recorder .sr-running,#silent-recorder .sr-finished{flex-basis:52px;height:52px}
 #silent-recorder .sr-rec,#silent-recorder .sr-stop,#silent-recorder .sr-download{width:50px;height:50px}
 #silent-recorder .sr-contact{padding:12px 18px}
 #silent-recorder .sr-dialog-top{margin-bottom:4px}
 #silent-recorder .sr-email{margin-bottom:8px;padding-bottom:4px}
 #silent-recorder .sr-form-bottom{margin-top:8px}
}

/* Capability-based guidance, without visible text. */
#silent-recorder .sr-unavailable{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,30px);max-width:100%;padding:12px;color:light-dark(#a18b65,#d4bd93)}
#silent-recorder .sr-device{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,2dvh,14px)}
#silent-recorder .sr-device>svg{width:clamp(38px,9vw,72px);height:clamp(38px,9vw,72px);stroke-width:1.2}
#silent-recorder .sr-phone{opacity:.6}
#silent-recorder .sr-compat-status{display:flex}
#silent-recorder .sr-compat-status svg{width:21px;height:21px}
#silent-recorder .sr-computer .sr-compat-status{color:light-dark(#50795c,#9ac9a3)}
#silent-recorder .sr-compat-arrow{display:flex}
#silent-recorder .sr-incompatible .sr-rec:disabled{opacity:1;color:light-dark(#8a785b,#d4bd93)}
#silent-recorder .sr-incompatible .sr-rec>svg{width:30px;height:30px}
@media(max-height:400px){#silent-recorder .sr-unavailable{padding:3px}#silent-recorder .sr-device{gap:3px}#silent-recorder .sr-device>svg{width:clamp(22px,12dvh,42px);height:clamp(22px,12dvh,42px)}#silent-recorder .sr-compat-status svg{width:16px;height:16px}}