.friktion-shell{min-width:780px;width:100%;max-width:1100px;margin:auto;background:#17131f;color:#d8d1df;border:2px solid #15121c;border-radius:4px;font-family:var(--font-ui);box-shadow:0 15px 40px #0006}.friktion-host{height:52px;background:linear-gradient(#333039,#26242b);display:flex;align-items:stretch;border-bottom:2px solid #17151c;font-size:11px}.friktion-host>button{min-width:32px;border-radius:0;color:#b5afbb}.friktion-host-name{font-family:var(--font-display);font-size:21px;letter-spacing:3px;padding:8px 20px;color:#e9e4ee;border-right:1px solid #45414b;line-height:1}.friktion-host-name small{font:6px 'DM Sans';display:block;letter-spacing:2px;margin-top:5px;color:#88818f}.friktion-host #friktion-current{flex:1;justify-content:flex-start;text-align:left;padding-left:12px;font-size:12px;color:#e3dce9}.friktion-host #friktion-current small{font-size:9px;color:#8c828f;margin-left:auto}.friktion-host .active{color:#ebc691}.friktion-instrument{background:radial-gradient(ellipse at 90% 45%,#74344555,transparent 60%),radial-gradient(ellipse at 0 90%,#59418377,transparent 64%),linear-gradient(115deg,#261a36,#2f142b 60%,#472135)}.friktion-bank-header{height:108px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 30px;background:linear-gradient(100deg,#271735aa,#32172c88,#a3575266);border-bottom:1px solid #e7aac01d;position:relative}.friktion-bank-header:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#b57080aa,transparent)}.friktion-series{font-size:8px;letter-spacing:1.8px;color:#a38baf;line-height:1.7}.friktion-series b{font-size:13px;font-weight:400;letter-spacing:2px;display:block}.friktion-series span{font-size:7px;letter-spacing:2.2px;display:block;margin-top:5px;color:#806d8b}.friktion-bank-header h2{font-family:var(--font-display);font-size:32px;line-height:.92;letter-spacing:1.4px;font-weight:700;color:#f2e6ee;transform:skewX(-8deg);text-align:center;text-shadow:0 3px 1px #29102b;margin:0}.friktion-bank-header h2 span{display:block;font-size:28px;letter-spacing:5px}.friktion-bank-header nav{display:flex;justify-content:flex-end;gap:13px}.friktion-bank-header nav button{color:#b79aa9;font-size:8px;gap:4px;padding:10px 0}.friktion-bank-header nav i{border:1px solid #ac889c;width:6px;height:6px;border-radius:50%}.friktion-bank-header nav .active{color:#f6dfea}.friktion-bank-header nav .active i{background:#edbdd0;box-shadow:0 0 8px #d581a7}.friktion-main{min-height:316px;padding:18px 27px 16px}.friktion-sound{display:grid;grid-template-columns:1fr 100px 1fr;align-items:center;gap:14px}.friktion-layer{background:#21192944;border:1px solid #e6bfd117;padding:10px 15px;border-radius:3px}.friktion-layer-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#958199;font-size:8px;letter-spacing:2px}.friktion-layer-top button{font-size:12px;width:25px;height:25px;min-height:25px;border:1px solid #806888;border-radius:50%;color:#92809b}.friktion-layer-top button.active{color:#ebd9ec;box-shadow:0 0 13px #d88aaf25;background:#83637d40}.friktion-layer select{width:100%;text-align:center;background:#120f1b55;color:#e4d4e7;border:1px solid #8c648744;padding:5px;font-size:12px}.friktion-layer canvas{width:100%;height:79px;display:block;margin:5px 0;opacity:.7}.friktion-layer .knob-row{gap:12px}.friktion-blend{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;font-size:10px;color:#998397}.friktion-blend .rotary-control{width:65px}.friktion-blend small{flex-basis:100%;font-size:7px;letter-spacing:1.5px;line-height:2.2;text-align:center;color:#96718d;margin-top:23px}.friktion-shell .rotary{width:37px;height:37px}.friktion-shell .rotary-ring{border-color:#160e21;background:conic-gradient(from 225deg,#b794b8,#745676 270deg,transparent 270deg);box-shadow:inset 0 0 1px #000,0 0 0 1px #b698ae18}.friktion-shell .rotary-cap{background:radial-gradient(ellipse at 35% 30%,#614768,#2d1d38 68%,#160d23);border:1px solid #977e9e88;box-shadow:0 3px 5px #0b041caa,0 0 0 1px #29142f}.friktion-shell .rotary-cap i{background:#dccccf;box-shadow:0 0 4px #ca8da380;width:2px;height:8px}.friktion-shell .rotary-control>label{font-size:7px;letter-spacing:1px;color:#bda7c0;font-weight:400}.friktion-shell .rotary-control output{font-size:8px;color:#a38ea8}.friktion-envelope{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:20px;padding:5px 8px 0}.friktion-envelope>span{font-size:7px;letter-spacing:1px;line-height:1.8;color:#ad8ba5}.friktion-env-spacer{flex:1}.friktion-bottom{display:flex;justify-content:space-around;gap:16px;padding:18px 24px 16px;border-top:1px solid #d9abc230;background:linear-gradient(90deg,#51406d77,#79576b44,#74516a77);box-shadow:inset 0 1px #e7a3c211}.friktion-bottom .rotary{width:40px;height:40px}.friktion-keyboard{display:flex;align-items:center;padding:10px 16px;gap:20px;background:#211e28}.friktion-keyboard small{width:120px;font-size:7px;color:#867a90;letter-spacing:1px;line-height:1.8}.friktion-keyboard .plugin-keys{height:49px;background:#17131f}.friktion-keyboard .plugin-keys button{background:linear-gradient(90deg,#b9b0c0,#dfd8e1 30%,#c4b9cd);border-color:#393040;box-shadow:inset 0 -4px #9e90aa}.friktion-keyboard .plugin-keys button.black{background:linear-gradient(90deg,#171322,#41364a,#21182c);box-shadow:0 2px 3px #0009,inset 0 -4px #160f23}.friktion-keyboard .plugin-keys button.pressed{background:#bd8aad}.friktion-fx-tabs{display:flex;gap:4px;border-bottom:1px solid #b990a333;padding-bottom:11px;flex-wrap:wrap}.friktion-fx-tabs button{flex:1;font-size:9px;padding:6px 8px;background:#17111f55;border:1px solid #8c657d22;color:#ab8da7;white-space:nowrap}.friktion-fx-tabs button.selected{background:#d6bfcf;color:#41263e}.friktion-fx-tabs button.bypassed{opacity:.5}.friktion-fx-title{display:flex;gap:9px;align-items:center}.friktion-fx-title h3{font-size:15px;font-weight:400;color:#d1b6ce;flex:1}.friktion-fx-title button{font-size:9px;border:1px solid #a3769644;padding:4px 8px}.friktion-fx-title button.active{color:#e8bed4}.friktion-fx-editor>.knob-row{padding:27px 55px;gap:22px;justify-content:space-around}.friktion-fx-editor .rotary{width:52px;height:52px}.friktion-fx-editor .rotary-cap{background:radial-gradient(ellipse at 40% 27%,#e7d7e6,#b5a1bd 72%,#806486);border-color:#d7c2de}.friktion-fx-editor .rotary-cap i{background:#3d2748;box-shadow:none;height:12px}.friktion-fx-editor>p{font-size:10px;color:#ae8a9f;text-align:center;margin-top:16px}.friktion-browser{display:grid;grid-template-columns:180px 1fr;background:#25212c;border-bottom:3px solid #100e17;height:313px}.friktion-browser aside{padding:12px;border-right:1px solid #524050;display:flex;flex-direction:column;gap:8px;font-size:10px}.friktion-browser h4{font-size:8px;letter-spacing:2px;color:#8f7e96;margin:0}.friktion-browser aside>[data-friktion-bank]{display:flex;flex-direction:column;align-items:flex-start;padding:16px 12px;height:103px;background:radial-gradient(ellipse at bottom right,#9a516477,transparent),linear-gradient(100deg,#3b274a,#382337);color:#e4cfdf;border:1px solid #ad789144;text-align:left;gap:13px}.friktion-browser aside strong{font:italic 20px/.95 Space Grotesk;letter-spacing:1px}.friktion-browser aside span{font-size:6px;letter-spacing:1px}.friktion-browser aside select{font-size:10px;padding:5px;background:#211829;border:1px solid #6b5065;color:#cbb6ce}.friktion-preset-list{padding:12px;display:flex;flex-direction:column;overflow:hidden}.friktion-preset-list>input{background:#19151f;border:1px solid #645267;border-radius:3px;padding:7px 10px;color:#dbcadf;font-size:11px}.friktion-results{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;overflow:auto;flex:1;margin:10px 0}.friktion-results button{display:flex;justify-content:space-between;padding:6px 10px;min-height:29px;font-size:10px;text-align:left;color:#b5a0bc;border-radius:0}.friktion-results button small{font-size:8px;color:#847189}.friktion-results button.selected{background:#66475888;color:#f0d8eb}.friktion-results button:hover{background:#81677644}.friktion-result-count{font-size:8px;color:#90788e}.friktion-seq-head{display:flex;align-items:center;gap:15px;font-size:9px}.friktion-seq-head>span{flex:1;color:#b194ad}.friktion-seq-head button,.friktion-seq-actions button{padding:5px 8px;border:1px solid #9c73913b;font-size:10px;text-transform:capitalize}.friktion-seq-head button.active{background:#ba8fa845;color:#f2ddea}.friktion-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin:30px 0 18px}.friktion-step{display:flex;align-items:center;flex-direction:column;background:#180e231f;border-right:1px solid #95738822;padding:10px 0 4px}.friktion-step .rotary-control{width:auto;min-width:0}.friktion-step .rotary{width:32px;height:32px}.friktion-step>button{font-size:10px;color:#ce9dbf;padding:6px}.friktion-step.off{opacity:.4}.friktion-seq-actions{display:flex;align-items:center;gap:10px;color:#a1849b;font-size:9px}.friktion-seq-actions small{margin-left:auto}.friktion-macros>p{font-size:11px;text-align:center;color:#be9cb7;margin-bottom:30px}.friktion-macros>div{display:flex;justify-content:space-around;gap:30px}.friktion-macros section{display:flex;align-items:center;flex-direction:column;gap:15px}.friktion-macros .rotary{width:65px;height:65px}.friktion-macros select{font-size:11px;padding:5px 10px;background:#28182e;border:1px solid #815b77;color:#d9bdd2}.friktion-macros>small{display:block;text-align:center;font-size:9px;color:#9b7a94;margin-top:28px}.plugin-overlay .friktion-shell{max-width:none;border:0}.plugin-overlay .friktion-host #plugin-popout{display:none}

.friktion-shell[data-bank="Sleaze2K"] .friktion-instrument{background:radial-gradient(at 10% 10%,#353717,#17211c 70%)}.friktion-shell[data-bank="Sleaze2K"] .friktion-bank-header h2{color:#d4f976;letter-spacing:3px}.friktion-shell[data-bank="Factory"] .friktion-instrument{background:linear-gradient(120deg,#253641,#1d252c)}.friktion-shell[data-bank="Factory"] .friktion-bank-header h2{color:#a6d8ed}.friktion-bank-count{display:block;font-size:10px;margin:12px 0;color:#c1bac9}#friktion-bank{width:100%;font-size:12px}

.friktion-seq-head{gap:12px;align-items:center}.friktion-seq-head label,.friktion-seq-tools label{display:flex;align-items:center;gap:6px;font-size:11px}.friktion-seq-head select{width:80px}.friktion-seq-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;background:#13121a66}.friktion-seq-tools select{width:175px}.friktion-step-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px;padding:16px}.friktion-grid-step{min-width:0}.friktion-grid-step:nth-child(4n+1){border-left:2px solid #a58dcc;padding-left:4px}.seq-value-bar{height:128px;width:100%;position:relative;overflow:hidden;background:#13151c!important;border:1px solid #695974!important;padding:0!important;cursor:ns-resize;touch-action:none}.seq-value-bar i{position:absolute;bottom:0;left:0;right:0;height:var(--step-height);background:linear-gradient(#b29cdb,#796581);opacity:.8}.seq-value-bar span{position:relative;z-index:1;font:10px monospace;color:white;text-shadow:0 1px 3px black}.seq-pad{width:100%;margin-top:6px;background:#ae94d8!important;color:#17131e!important;border-radius:4px!important;height:29px}.friktion-grid-step.off .seq-pad{background:#37323e!important;color:#928c9c!important}.friktion-grid-step.off .seq-value-bar i{opacity:.13}.friktion-seq-tip{font-size:11px;color:#b5acbf;margin:0 16px 10px}.friktion-seq-tools button.active{background:#a487cf;color:#17121e}.friktion-seq-head #friktion-seq-preview{background:#ac94d1;color:#21172e}
@media(max-width:780px){.friktion-shell{min-width:0;max-width:100%;border-width:1px;overflow:hidden}.friktion-host{height:auto;min-height:52px;flex-wrap:wrap}.friktion-host-name{flex:1;padding:8px 12px}.friktion-host #friktion-current{order:3;flex-basis:100%;padding:8px 12px;border-top:1px solid #45414b}.friktion-bank-header{height:auto;grid-template-columns:1fr;gap:13px;padding:18px 16px;text-align:center}.friktion-bank-header nav{justify-content:center}.friktion-main{padding:14px 12px}.friktion-sound{grid-template-columns:1fr;gap:10px}.friktion-layer{padding:10px}.friktion-envelope{flex-wrap:wrap;gap:9px}.friktion-env-spacer{display:none}.friktion-bottom{flex-wrap:wrap;justify-content:space-between;gap:12px;padding:14px 12px}.friktion-keyboard{align-items:stretch;flex-direction:column;gap:8px;padding:10px 12px}.friktion-keyboard small{width:auto}.friktion-keyboard .plugin-keys{width:100%;overflow:auto}.friktion-browser{grid-template-columns:1fr;height:auto;min-height:0}.friktion-browser aside{flex-direction:row;overflow:auto;padding:8px;min-width:0}.friktion-browser aside>[data-friktion-bank]{min-width:150px;height:82px;padding:10px;gap:8px}.friktion-preset-list{min-height:260px}.friktion-results{grid-template-columns:1fr}.friktion-steps,.friktion-step-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.friktion-step-grid{padding:10px;gap:4px}.friktion-seq-tools{align-items:stretch;flex-direction:column}.friktion-seq-tools select{width:100%}.friktion-fx-editor>.knob-row{padding:20px 5px;gap:12px}.friktion-macros>div{gap:12px}.friktion-macros .rotary{width:54px;height:54px}}