/* =============================================================
   EscenarioAI Editor — restrained cyberpunk theme
   System fonts only. icomoon kept for icons.
   All .pk_* selectors preserved (used by JS).
   ============================================================= */

/* ---------- Tokens ---------- */
:root{
	/* Layered surfaces (deepest → raised) */
	--bg-0:#0a0a0c;
	--bg-1:#0f1115;
	--bg-2:#161a22;
	--bg-3:#1e2330;
	--bg-4:#282e3c;

	/* Foreground */
	--fg-0:#e8edf0;
	--fg-1:#9aa3ad;
	--fg-2:#6a7380;
	--fg-3:#3a414a;

	/* Neon cyan accent */
	--ac:#06b6d4;
	--ac-2:#6366f1;          /* indigo secondary accent */
	--ac-soft:rgba(6,182,212,.12);
	--ac-glow:rgba(6,182,212,.45);
	--ac-ink:#041014;

	/* Status */
	--rec:#ff3355;
	--rec-glow:rgba(255,51,85,.45);
	--solo:#28c8f0;
	--solo-glow:rgba(40,200,240,.45);
	--warn:#f5c542;
	--ok:#6ecc87;
	--pl:#ff8c35;            /* playhead orange */

	/* Borders */
	--bd:rgba(255,255,255,.07);
	--bd-s:rgba(255,255,255,.04);
	--bd-h:rgba(6,182,212,.4);

	/* Geometry */
	--r:2px;
	--r-md:4px;
	--r-lg:8px;

	/* Spacing */
	--s1:4px; --s2:8px; --s3:12px; --s4:16px;

	/* Motion */
	--ease:cubic-bezier(.2,.7,.3,1);
	--tr:160ms var(--ease);

	/* Effects */
	--glow:0 0 0 1px var(--bd-h), 0 0 10px var(--ac-glow);
	--inset-hi:inset 0 1px 0 rgba(255,255,255,.04);

	/* Typography (system only) */
	--ff:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--ff-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- Icon font (functional, not typography) ---------- */
@font-face{
	font-family:'icomoon';
	src:url('fonts/icomoon.woff') format('woff');
	font-weight:normal;
	font-style:normal;
}

/* ---------- Base ----------
   Note: NO global box-sizing reset.
   Original layouts assume content-box; specific elements opt into
   border-box explicitly (modals, tracks, mt strips, etc.). */

body,html{height:100%;background:var(--bg-0);overscroll-behavior:none}
body{
	margin:0;padding:0;
	font:13px/1.45 var(--ff);
	color:var(--fg-0);
	-webkit-tap-highlight-color:transparent;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

button{
	font:inherit;color:var(--fg-0);background:transparent;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
	-webkit-user-select:none;user-select:none;
	-webkit-touch-callout:none;
}
a{
	color:var(--ac);cursor:pointer;text-decoration:none;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
	-webkit-touch-callout:none;
}
@media (hover:hover){
	a:hover{color:#fff;text-shadow:0 0 6px var(--ac-glow)}
}

/* iOS auto-zooms inputs/selects with font-size <16px on focus.
   Force 16px on mobile so tapping a field doesn't disrupt layout. */
.pk_mob input,
.pk_mob select,
.pk_mob textarea,
.pk_mob .pk_modal .pk_txt,
.pk_mob .pk_mt_track input{font-size:16px}

.pk_noselect{
	-webkit-touch-callout:none;user-select:none;
	touch-action:manipulation;
}
.pk_app{width:100%;height:100%}

.pk_inact,.pk_app .pk_inact,.pk_btn.pk_inact{opacity:.45;cursor:default}

.pk_grabbing,.pk_grabbing wave{cursor:grabbing!important;cursor:-webkit-grabbing!important}

/* ---------- Header (top menu bar) ---------- */
.pk_hdr{
	z-index:7;position:relative;
	height:26px;padding:0 var(--s2);
	background:var(--bg-1);
	border-bottom:1px solid var(--bd);
	display:flex;align-items:center;
}

.pk_hdr .pk_btn{
	float:none;position:relative;
	margin:0 16px;min-width:42px;
	border-radius:var(--r);text-align:center;
	transition:background var(--tr),color var(--tr);
}
.pk_btn button{
	padding:3px var(--s2);
	border:0;outline:0;background:transparent;color:inherit;
	cursor:pointer;text-decoration:inherit;white-space:nowrap;
	font:inherit;letter-spacing:.2px;
}
.pk_hdr .pk_btn>button{border-radius:var(--r);transition:background var(--tr),color var(--tr),box-shadow var(--tr)}

.pk_hdr .pk_btn:hover{background:transparent;color:var(--ac)}
.pk_hdr .pk_btn:hover>button{background:var(--bg-3);color:var(--ac)}
.pk_hdr .pk_btn.pk_act{background:transparent;color:var(--ac-ink);text-shadow:none;text-decoration:none;box-shadow:none}
.pk_hdr .pk_btn.pk_act>button{background:var(--ac);color:var(--ac-ink);box-shadow:0 0 12px var(--ac-glow)}

.pk_hdr .pk_btn .pk_menu{
	position:absolute;top:24px;left:-2px;
	min-width:200px;min-height:20px;
	max-height:calc(100vh - 38px);overflow-x:hidden;overflow-y:auto;
	padding:var(--s1) 0;
	background:var(--bg-2);
	border:1px solid var(--bd);border-radius:var(--r-md);
	box-shadow:0 8px 28px rgba(0,0,0,.6),var(--inset-hi);
	opacity:0;z-index:-1;visibility:hidden;display:none;
	transition:opacity var(--tr);
}
.pk_hdr .pk_btn.pk_vis .pk_menu{display:block}
.pk_hdr .pk_btn.pk_act .pk_menu{z-index:5;opacity:1;visibility:visible;display:block}
.pk_hdr .pk_btn .pk_menu_el .pk_act{background:var(--ac-soft);color:var(--ac)}
.pk_sloop{display:block;width:100%;height:96px;background:#000;cursor:ew-resize;margin:0 0 var(--s1)}
.pk_sloop_meta{color:var(--fg-2);font-size:12px;margin-bottom:var(--s1)}

.pk_hdr .pk_btn .pk_shrtct{
	color:var(--fg-2);margin-left:var(--s4);
	font-size:.92em;text-align:right;font-family:var(--ff-mono);
}

.pk_hdr .pk_btn .pk_menu_el button{
	display:flex;justify-content:space-between;
	width:100%;margin:0;padding:5px var(--s3);
	text-align:left;color:var(--fg-0);
}
.pk_hdr .pk_btn .pk_menu_el:hover button{background:var(--bg-3);color:var(--ac)}

/* ---------- Toolbar ---------- */
.pk_tbc{
	position:relative;
	overflow:visible;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.pk_tbc::-webkit-scrollbar{width:0;height:0}
.pk_tb{
	position:relative;z-index:6;
	min-width:560px;height:48px;
	padding:var(--s2) 0 var(--s2) 14px;
	background:var(--bg-1);
	border-bottom:1px solid var(--bd);
	text-rendering:optimizeSpeed;
	white-space:nowrap;
}
.pk_mt_on .pk_tbc{
	overflow-x:scroll;overflow-y:hidden;
	background:var(--bg-1);
	border-bottom:1px solid var(--bd);
}
.pk_mt_on .pk_tb{
	display:inline-block;min-width:max-content;
	border-bottom:none;
}

.pk_total_dur,.pk_hover_dur{
	position:absolute;right:10px;top:6px;
	color:var(--ac-2);font-size:13px;
	font-variant-numeric:tabular-nums;
}
.pk_hover_dur{top:26px;color:var(--fg-1)}

.pk_inpfile{position:absolute;width:1px;height:1px;visibility:hidden;overflow:hidden;z-index:-1}

.pk_tmpMsg{
	position:absolute;left:50%;top:50%;
	width:340px;margin:-40px 0 0 -170px;
	height:100px;z-index:6;
	font-size:18px;color:var(--fg-0);text-align:center;line-height:32px;
	text-shadow:0 0 8px var(--bg-0);
}
.pk_tmpMsg2{
	position:fixed;inset:0;z-index:10;
	display:none;flex-direction:column;justify-content:center;
	background:rgba(7,8,10,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
	font-size:16px;text-align:center;cursor:progress!important;
}
.pk_tmpMsg2.pk_act{display:flex}

.pk_mload{
	width:200px;height:3px;margin:25px auto 0;
	position:relative;background:var(--bg-0);
	border:1px solid var(--bd-s);border-radius:var(--r);overflow:hidden;
}
.pk_mload>div:before{
	content:" ";position:absolute;left:0;
	height:100%;width:100%;
	background:linear-gradient(90deg,var(--ac) 0%,#b6f6ff 100%);
	box-shadow:0 0 8px var(--ac-glow);
	transform:scaleX(0) translate3d(0,0,0);
	transform-origin:0 0;will-change:transform;z-index:1;
}
.pk_act .pk_mload>div:before{
	animation:pk_loader_anim 1.8s infinite;
}

.pk_prc{margin-top:20px;padding-bottom:7px;font-size:14px;text-align:center}
.pk_prc span{margin-right:10px}
.pk_prc button{
	padding:4px var(--s3);
	background:transparent;color:var(--fg-0);
	border:1px solid var(--bd);border-radius:var(--r);outline:0;
	transition:border-color var(--tr),color var(--tr),box-shadow var(--tr);
}
.pk_prc button:hover{border-color:var(--ac);color:var(--ac);box-shadow:0 0 0 1px var(--bd-h)}

/* Time display container */
.pk_timecontainer{
	float:left;width:236px;height:46px;margin-right:var(--s3);
	position:relative;contain:strict;
	background:var(--bg-0);
	border:1px solid var(--bd);border-radius:var(--r-md);
	box-shadow:var(--inset-hi),inset 0 0 18px rgba(90,242,255,.04);
	color:var(--fg-0);
}
.pk_mob .pk_timecontainer{cursor:pointer}
.pk_mob .pk_timing{font-size:18px;letter-spacing:0;padding:13px 0 0 8px}
.pk_timing{
	display:block;position:absolute;z-index:2;
	padding:9px 0 0 14px;
	font:29px/1 var(--ff);
	font-variant-numeric:tabular-nums;
	letter-spacing:1px;text-align:left;
	color:var(--fg-0);
}
.pk_timingcnv{display:block;position:absolute;z-index:2;left:6px}

/* Toolbar groups */
.pk_btngroup{float:left}
.pk_mt_on .pk_timecontainer,
.pk_mt_on .pk_btngroup,
.pk_mt_on .pk_selection,
.pk_mt_on .pk_ctns,
.pk_mt_on .pk_transport{
	float:none;display:inline-block;vertical-align:top;
}
.pk_selection,.pk_ctns,.pk_transport{
	float:left;height:46px;padding:0 2px;margin-right:var(--s3);
	min-width:340px;
	border:1px solid var(--bd);border-radius:var(--r-md);
	background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-1) 100%);
	box-shadow:var(--inset-hi);
}
.pk_selection{margin-right:0}
.pk_ctns{min-width:40px}
.pk_mtbeat{
	display:none;float:left;grid-template-columns:34px 42px auto 34px;
	grid-template-rows:19px 19px;gap:0 4px;align-items:center;height:46px;
	padding:3px 8px;margin-right:var(--s3);box-sizing:border-box;
	border:1px solid var(--bd);border-radius:var(--r-md);
	background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-1) 100%);
	box-shadow:var(--inset-hi);
}
.pk_mt_on .pk_mtbeat{float:none;display:inline-grid;vertical-align:top}
.pk_tb .pk_mtbeat .pk_mtbeat_btn{
	grid-column:1;grid-row:1;width:34px;height:18px;margin:0;
	font:8px/18px var(--ff-mono);
	letter-spacing:.4px;color:var(--ac);
	box-shadow:inset 0 0 0 1px rgba(90,242,255,.24);
}
.pk_tb .pk_mtbeat .pk_mtbeat_btn.pk_act{background:var(--ac);color:var(--ac-ink);box-shadow:0 0 10px var(--ac-glow)}
.pk_tb .pk_mtbeat .pk_mtbeat_snap{grid-row:2;margin-top:2px;color:var(--fg-1)}
.pk_tb .pk_mtbeat .pk_mtbeat_sig{
	grid-column:4;grid-row:1/3;width:34px;height:28px;margin:0;
	font:10px/28px var(--ff-mono);
	color:var(--fg-1);
}
.pk_tb .pk_mtbeat .pk_mtbeat_sig:hover{color:var(--ac)}
.pk_mtbeat_bpm{
	grid-column:2;grid-row:1/3;width:42px;height:28px;margin:0;padding:0 4px;
	box-sizing:border-box;background:var(--bg-0);color:var(--fg-0);
	border:0;border-radius:var(--r);outline:0;
	-moz-appearance:textfield;
	font:12px/28px var(--ff-mono);text-align:center;
	box-shadow:inset 0 0 0 1px var(--bd-s);
}
.pk_mtbeat_bpm:focus{box-shadow:inset 0 0 0 1px var(--ac),0 0 8px var(--ac-glow)}
.pk_mtbeat_bpm::-webkit-outer-spin-button,
.pk_mtbeat_bpm::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pk_mtbeat b{grid-column:3;grid-row:1/3;font:9px/28px var(--ff-mono);color:var(--fg-2)}
.pk_mtbeat_rng{z-index:16}

/* Toolbar buttons */
.pk_tb .pk_btn{
	font-family:'icomoon';
	display:inline-block;position:relative;
	width:38px;height:38px;margin:4px 3px;padding:0;
	font-size:1.32em;line-height:25px;text-align:center;
	border:0;border-radius:var(--r);outline:0;
	color:var(--fg-0);background:transparent;
	transition:background var(--tr),color var(--tr),box-shadow var(--tr);
}
.pk_tb .pk_btn:not(.pk_act):hover{background:var(--ac-soft);color:var(--ac);box-shadow:0 0 0 1px var(--bd-h)}
.pk_tb .pk_btn:active{background:var(--bg-0);box-shadow:inset 0 0 10px rgba(0,0,0,.6)}

/* Tooltip (pk_btn span) */
.pk_ftr .pk_btn span,
.pk_tb .pk_btn span,
.pk_mt_head button span,
.pk_mt_track button span,
.pk_mt_knob span{
	position:absolute;left:50%;bottom:-31px;
	display:block;padding:0 6px;
	transform:translate(-50%,0);
	background:#000;color:#eee;
	font:11px/26px Arial,sans-serif;letter-spacing:normal;font-weight:normal;
	white-space:nowrap;
	border-radius:3px;
	visibility:hidden;opacity:0;pointer-events:none;
	user-select:none;
	transition:opacity 320ms 296ms;
	z-index:6;
}
.pk_ftr .pk_btn:hover span,
.pk_tb .pk_btn:hover span,
.pk_mt_head button:hover span,
.pk_mt_track button:hover span,
.pk_mt_knob:hover span{visibility:visible;opacity:1}

.pk_ftr .pk_btn.pk_inact:hover span,
.pk_tb .pk_btn.pk_inact:hover span,
.pk_mt_head button.pk_inact:hover span{visibility:hidden;opacity:0}
.pk_mt_head .pk_mt_add span{left:0;transform:none}

.pk_tb .pk_btn span{display:none}
.pk_ttip{
	position:fixed;z-index:20;
	padding:0 6px;background:#000;color:#eee;
	font:11px/26px Arial,sans-serif;letter-spacing:normal;font-weight:normal;
	white-space:nowrap;border-radius:3px;
	visibility:hidden;opacity:0;pointer-events:none;user-select:none;
	transition:opacity 320ms 296ms;
}
.pk_ttip.pk_act{visibility:visible;opacity:1}

.pk_mob .pk_ftr .pk_btn span,
.pk_mob .pk_tb .pk_btn span{visibility:hidden;display:none}
.pk_mob .pk_tb .pk_btn:not(.pk_act):hover{box-shadow:none}

/* Selection panel inside toolbar */
.pk_selection .pk_sellist{margin:5px;width:346px;color:#e1e1e1}
.pk_sellist .pk_title{float:left;line-height:35px}
.pk_selection .pk_sellist div{float:left;width:40px;margin:0 10px;text-align:center}
.pk_selection .title{display:block;line-height:18px}
.pk_selection .pk_dat{
	display:inline-block;min-width:14px;padding:2px 5px;
	background:var(--bg-3);color:var(--ac);
	border-radius:var(--r);font-family:var(--ff-mono);
	font-size:11px;line-height:16px;
	font-variant-numeric:tabular-nums;
}

.pk_btn.icon-clearsel{
	font-family:var(--ff);
	width:92px;min-height:30px;margin:0 0 0 var(--s3);padding:4px 6px;
	font-size:11px;line-height:1.15;
	border:1px solid var(--bd);
	white-space:normal;word-break:normal;overflow-wrap:normal;
	box-sizing:border-box;
	display:inline-flex;align-items:center;justify-content:center;text-align:center;
}

/* ---------- Audio view ---------- */
.pk_av_cont{position:relative;touch-action:none;overscroll-behavior:none}
.pk_av{
	clear:both;width:calc(100% - 64px);margin:0 0 0 48px;
	position:relative;overflow:hidden;contain:content;
	background:var(--bg-0);
	border:1px solid var(--bd-s);
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
	overscroll-behavior:none;
}
.pk_av wave{cursor:text}
.pk_av canvas{opacity:0;transition:opacity 440ms}

#pk_prgwv{
	position:absolute;left:0;top:0;bottom:0;
	width:1px;background:var(--pl);
	box-shadow:0 0 6px rgba(255,140,53,.7);
	transform:translate3d(0,0,0);
	z-index:3;display:none;pointer-events:none;
}

.pk_wave_cursor{
	position:absolute;left:0;top:0;bottom:0;
	width:1px;margin-left:-2px;z-index:5;
	border-right:1px dashed var(--warn);
	transform:translate3d(0,0,0);pointer-events:none;
}

.pk_wavepoint{
	position:absolute;top:0;width:2px;height:100%;
	background:#d7ba6d;
	transform:translate3d(0,0,0);
	pointer-events:none;display:none;
}

/* ---------- Multitrack ---------- */
.pk_mt{
	display:none;position:relative;z-index:0;
	height:0;min-height:0;
	background:var(--bg-1);
	border-bottom:1px solid var(--bd);
	box-sizing:border-box;
	overflow:hidden;overscroll-behavior:none;
}
.pk_mt_on .pk_av_cont{display:none}
.pk_mt_on .pk_mt{display:flex}
.pk_mt_on .pk_zoombtn .pk_zoom_out_v,
.pk_mt_on .pk_zoombtn .pk_zoom_in_v{display:block!important;z-index:12}
.pk_mob.pk_mt_on .pk_zoombtn .pk_zoom_out_v,
.pk_mob.pk_mt_on .pk_zoombtn .pk_zoom_in_v{display:none!important}
.pk_mt_on .pk_ftr{position:relative;z-index:6}

.pk_mt_side{
	flex:0 0 178px;width:178px;position:relative;z-index:6;
	background:var(--bg-1);
	border-right:1px solid var(--bd);
}
.pk_mt_tracks_wrap{
	position:absolute;top:24px;left:0;right:0;bottom:0;
	overflow-x:hidden;overflow-y:auto;
	scrollbar-width:none;
	padding-bottom:64px;
}
.pk_mt_tracks_wrap::-webkit-scrollbar{display:none}

.pk_mt_head,.pk_mt_ruler{
	height:24px;line-height:24px;
	background:var(--bg-2);
	border-bottom:1px solid var(--bd);
	color:var(--ac);font-size:12px;font-family:var(--ff-mono);
}
.pk_mt_head{display:flex;align-items:center;gap:4px;padding:0 6px}
.pk_mt_head>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.5px;text-transform:uppercase;font-size:11px}

.pk_mt_head button{
	width:22px;height:18px;margin:0;padding:0;
	background:var(--bg-0);color:var(--ac);
	border:0;border-radius:var(--r);outline:0;
	font-size:11px;line-height:18px;text-align:center;
	cursor:pointer;position:relative;overflow:visible;
	transition:box-shadow var(--tr),background var(--tr),color var(--tr);
}
.pk_mt_head .pk_mt_add{width:28px;font-size:15px;line-height:16px;margin-right:1px}
.pk_mt_head .pk_mt_clear{background:var(--bg-0);color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--bd-s)}
.pk_mt_head button:hover{box-shadow:0 0 0 1px var(--bd-h)}
.pk_mt_head button.pk_inact{cursor:default;opacity:.42}
.pk_mt_head button.pk_inact:hover{box-shadow:inset 0 0 0 1px var(--bd-s)}

.pk_mt_head button.pk_mt_mute.pk_act{background:#3a0a0e;color:#fff;box-shadow:inset 0 0 0 1px var(--rec)}
.pk_mt_head button.pk_mt_solo.pk_act{background:var(--solo);color:#041014;box-shadow:none}

/* Tracks (sidebar entries) */
.pk_mt_tracks{position:relative;will-change:transform}
.pk_mt_track{
	position:relative;height:88px;padding:7px 6px;box-sizing:border-box;
	background:var(--bg-2);
	border-bottom:1px solid var(--bd);
}
.pk_mt_track.pk_mt_sel{background:var(--bg-3)}

.pk_mt_track input{
	display:block;box-sizing:border-box;
	width:calc(100% - 31px);height:24px;
	margin:0 0 10px;padding:0 6px;
	background:var(--bg-0);color:var(--fg-0);
	border:1px solid var(--bd);border-radius:var(--r);outline:0;
	font:12px var(--ff);cursor:text;
	-webkit-user-select:text;user-select:text;
	transition:border-color var(--tr),box-shadow var(--tr);
}
.pk_mt_track input:focus{border-color:var(--ac);box-shadow:0 0 8px var(--ac-glow)}

.pk_mt_track button{
	background:var(--bg-0);color:var(--fg-0);
	border:0;border-radius:var(--r);
	cursor:pointer;position:relative;overflow:visible;
	transition:box-shadow var(--tr),background var(--tr),color var(--tr);
}
.pk_mt_track button{width:25px;height:24px;margin-right:5px;font-size:11px}
.pk_mt_track button:hover{box-shadow:0 0 0 1px var(--bd-h)}
.pk_mt_track button:active{box-shadow:inset 0 0 10px rgba(0,0,0,.5)}
.pk_mt_track button.pk_act{background:var(--ac);color:var(--ac-ink)}

.pk_mt_track button.pk_mt_mute.pk_act{background:#3a0a0e;color:#fff;box-shadow:inset 0 0 0 1px var(--rec)}
.pk_mt_track button.pk_mt_solo.pk_act{background:var(--solo);color:#041014;box-shadow:none}
.pk_mt_track button.pk_mt_rec.pk_act{background:var(--rec);color:#fff}

.pk_mt_track .pk_mt_rec{position:absolute;right:6px;top:41px;margin:0}
.pk_mt_track .pk_mt_del{position:absolute;right:4px;top:7px;margin:0;color:#c99999}
.pk_mt_track .pk_mt_rec span,
.pk_mt_track .pk_mt_del span{left:auto;right:0;transform:none}

.pk_mt_track.pk_mt_compact input{height:22px;margin-bottom:7px}
.pk_mt_track.pk_mt_compact .pk_mt_rec{top:36px}
.pk_mt_track.pk_mt_compact .pk_mt_knob:after{display:none}
.pk_mt_track.pk_mt_tiny input{height:20px;margin-bottom:5px}
.pk_mt_track.pk_mt_tiny .pk_mt_mute,
.pk_mt_track.pk_mt_tiny .pk_mt_solo{height:20px}
.pk_mt_track.pk_mt_tiny .pk_mt_knob,
.pk_mt_track.pk_mt_tiny .pk_mt_rec{display:none}

/* Knobs */
.pk_mt_knob{
	display:inline-block;position:relative;
	width:23px;height:23px;margin-right:5px;
	background:var(--bg-0);
	border:1px solid var(--bd);border-radius:50%;
	box-shadow:var(--inset-hi),inset 0 -1px 2px rgba(0,0,0,.6);
	cursor:move;vertical-align:bottom;
	transition:border-color var(--tr),box-shadow var(--tr);
}
.pk_mt_knob:hover{border-color:var(--bd-h);box-shadow:var(--inset-hi),0 0 8px var(--ac-glow)}
.pk_mt_knob:before{
	position:absolute;left:0;right:0;bottom:3px;
	font-size:6px;line-height:6px;text-align:center;
	pointer-events:none;letter-spacing:.5px;
}
.pk_mt_track .pk_mt_knob:before{
	top:-9px;bottom:auto;
	font-size:7px;line-height:7px;
}
.pk_mt_pan:before{content:"L/R";color:var(--ac-2)}
.pk_mt_vol:before{content:"VOL";color:#b9c6ff}
.pk_mt_knob:after{
	content:attr(data-val);
	position:absolute;left:-9px;top:25px;width:42px;
	color:var(--fg-2);font:9px var(--ff-mono);
	font-variant-numeric:tabular-nums;text-align:center;
}
.pk_mt_knob i{
	position:absolute;left:10px;top:3px;
	width:2px;height:9px;
	background:var(--ac);
	box-shadow:0 0 4px var(--ac-glow);
	transform-origin:1px 9px;
}
.pk_mt_vol i{background:#b9c6ff;box-shadow:0 0 4px rgba(185,198,255,.5)}

.pk_mt_resize{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize;z-index:3}

/* Main multitrack canvas */
.pk_mt_main{
	flex:1 1 auto;position:relative;
	overflow-x:hidden;overflow-y:auto;
	background:var(--bg-0);outline:0;
	overscroll-behavior:none;
	padding-bottom:64px;
}

.pk_mt_empty{z-index:2;pointer-events:none}
.pk_mt_empty a{
	margin-left:5px;padding:5px 18px;
	white-space:nowrap;font-size:.94em;
	border:1px solid var(--ac);border-radius:24px;
	pointer-events:auto;
	box-shadow:0 0 12px var(--ac-glow),inset 0 0 12px rgba(90,242,255,.08);
	transition:background var(--tr),color var(--tr);
}
.pk_mt_empty a:hover{background:var(--ac);color:var(--ac-ink);text-shadow:none}

.pk_mt_ruler{position:sticky;top:0;z-index:9}
.pk_mt_timeline{position:absolute;top:0;pointer-events:none}
.pk_mt_tick{
	position:absolute;top:0;height:24px;min-width:54px;
	box-sizing:border-box;text-align:center;
	color:var(--fg-1);font:10px/12px var(--ff-mono);
	font-variant-numeric:tabular-nums;
	transform:translateX(-50%);pointer-events:none;
}
.pk_mt_tick:after{
	content:"";position:absolute;left:50%;top:16px;
	height:8px;border-left:1px solid var(--fg-2);
}
.pk_mt_ruler,.pk_mt_lanes,.pk_mt_lane{cursor:text}
.pk_mt_lanes{
	position:relative;
	background:repeating-linear-gradient(to right,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 86px);
}
.pk_mt_lanes.pk_mt_beats{background:var(--bg-0)}
.pk_mt_beatgrid{position:absolute;left:0;top:0;z-index:1;pointer-events:none}

.pk_mt_region{display:none;position:absolute;top:24px;cursor:move;z-index:2}
.pk_mt_region .wavesurfer-handle{position:absolute;left:0;top:0;width:1%;max-width:4px;height:100%;cursor:col-resize}
.pk_mt_region .wavesurfer-handle-end{left:100%}

.pk_mt_lane{
	position:absolute;left:0;right:0;height:88px;
	box-sizing:border-box;
	border-bottom:1px solid #1a1a1a;
}
.pk_mt_lane.pk_mt_sel{background:#1a2122}

.pk_mt_clip{
	position:absolute;top:8px;height:60px;min-width:36px;
	background:var(--mt-bg,#0a1414);
	border:1px solid var(--mt-br,#2f7b75);border-radius:var(--r-md);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
	overflow:hidden;contain:content;cursor:default;z-index:2;
}
.pk_mt_clip.pk_mt_clip_sel{
	border-color:#f0d878;
	box-shadow:inset 0 0 0 1px rgba(240,216,120,.5);
	cursor:grab;
	z-index:7;
}
.pk_mt_clip.pk_drag{cursor:grabbing;z-index:8;box-shadow:0 0 8px rgba(153,194,198,.45)}
.pk_mt_clip.pk_mt_clip_muted{opacity:.58}
.pk_mt_clip canvas{display:block;width:100%;height:calc(100% - 8px)}

.pk_mt_trim{position:absolute;top:0;bottom:0;width:8px;z-index:2;cursor:ew-resize}
.pk_mt_trim_l{left:0}
.pk_mt_trim_r{right:0}
.pk_mt_fade{position:absolute;top:0;width:10px;height:12px;z-index:3;cursor:ew-resize}
.pk_mt_fade:before{content:"";position:absolute;top:0;width:0;height:0;border-top:9px solid #f0d878}
.pk_mt_fade_l:before{left:0;border-right:9px solid transparent}
.pk_mt_fade_r:before{right:0;border-left:9px solid transparent}
.pk_mt_trim:after{
	content:"";position:absolute;top:8px;bottom:10px;left:3px;
	border-left:1px solid rgba(245,197,66,.7);
	opacity:0;transition:opacity var(--tr);
}
.pk_mt_clip:hover .pk_mt_trim:after,
.pk_mt_clip.pk_mt_clip_sel .pk_mt_trim:after{opacity:1}

.pk_mt_clip span{
	position:absolute;left:5px;right:5px;bottom:1px;
	overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
	color:var(--fg-0);font:10px/11px var(--ff);
	text-shadow:0 1px 0 #000;
}
.pk_mt_clip em{
	position:absolute;top:2px;right:3px;
	padding:0 3px;
	background:var(--warn);color:#171303;
	border-radius:var(--r);
	font:9px/12px var(--ff);font-style:normal;
}
.pk_mt_clip.pk_mt_clip_xf{border-color:#d5b64c}
.pk_mt_clip.pk_mt_rec_clip{
	z-index:9;
	background:#1a0a0a;
	border-color:#e13030;
	box-shadow:0 0 6px rgba(225,48,48,.35);
	pointer-events:none;
}

.pk_mt_playhead,
.pk_mt_marker{
	position:absolute;left:0;top:24px;width:1px;
	pointer-events:none;will-change:transform;
}
.pk_mt_playhead{background:var(--pl);box-shadow:0 0 6px rgba(255,140,53,.7);z-index:11}
.pk_mt_marker{margin-left:-2px;border-right:1px dashed var(--warn);z-index:12}

/* "Switch to multitrack" button */
.pk_mt_topbtn{
	margin-left:auto;margin-right:6px;
	height:20px;padding:0 12px;
	background:linear-gradient(180deg,var(--bg-3) 0%,var(--bg-1) 100%);
	color:var(--fg-0);
	border:1px solid var(--bd);border-radius:10px;
	box-shadow:var(--inset-hi);
	font:bold 11px/18px var(--ff);letter-spacing:.4px;
	white-space:nowrap;cursor:pointer;outline:0;
	transition:box-shadow var(--tr),color var(--tr),border-color var(--tr),background var(--tr);
}
.pk_mt_topbtn:hover{color:#fff;border-color:var(--ac);box-shadow:0 0 14px var(--ac-glow),inset 0 0 12px var(--ac-soft)}
.pk_mt_topbtn:active{transform:translateY(1px)}
.pk_mt_topbtn.pk_act{
	color:var(--ac-ink);border-color:var(--ac);
	background:linear-gradient(180deg,#a8eef5 0%,#5ac8d2 100%);
	box-shadow:0 0 16px var(--ac-glow),inset 0 1px 0 rgba(255,255,255,.3);
}
.pk_mt_topbtn em{
	display:inline-block;margin-left:8px;padding:1px 5px 0;
	background:var(--ac);color:var(--ac-ink);
	border-radius:var(--r);
	font:bold 8px/11px var(--ff);font-style:normal;
	letter-spacing:1px;text-transform:uppercase;vertical-align:1px;
}
.pk_mt_topbtn.pk_act em{background:var(--ac-ink);color:var(--ac)}

/* ---------- Footer ---------- */
.pk_ftr{
	padding:6px 14px var(--s2);
	background:var(--bg-1);
	border-top:1px solid var(--bd);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.pk_volpar{
	position:relative;width:100%;height:5px;
	background:linear-gradient(to right,var(--ac) 0%,var(--ok) 54%,var(--warn) 85%,var(--rec) 100%);
	border:1px solid #222;overflow:hidden;
}
.pk_volpar:last-child{border-top:2px solid #222}
.pk_vol{
	position:absolute;right:0;top:0;bottom:0;width:100%;
	background:var(--bg-0);
	z-index:1;pointer-events:none;
	transform:translate3d(0,0,0);
}
.pk_peaker{
	position:absolute;right:0;top:0;height:100%;width:15px;
	background:var(--bg-1);border-left:2px solid var(--bd);
	z-index:2;
}
.pk_peaker.pk_act{background:var(--rec);box-shadow:0 0 8px var(--rec-glow)}

.pk_markers{
	position:relative;width:100%;margin-top:4px;
	border-right:12px solid transparent;
	box-sizing:border-box;text-align:left;
	color:var(--fg-1);font:10px var(--ff-mono);
	font-variant-numeric:tabular-nums;letter-spacing:.5px;
}
.pk_mark1{display:inline-block;width:2.777%}
.pk_mark1:last-child{position:absolute;right:0;text-align:right}

/* Zoom */
.pk_zoombtn{float:left;padding-right:4px;position:relative}
.pk_zoombtn button{
	width:26px;height:18px;margin-right:6px;padding:0;
	background:var(--bg-0);color:var(--ac);
	border:1px solid var(--bd);border-radius:var(--r);outline:0;
	font:bold 12px/16px var(--ff-mono);cursor:pointer;
	transition:border-color var(--tr),color var(--tr),box-shadow var(--tr);
}
.pk_zoombtn button:hover{border-color:var(--ac);box-shadow:0 0 0 1px var(--bd-h)}
.pk_zoombtn .pk_zoom_out_v,
.pk_zoombtn .pk_zoom_in_v{position:absolute;left:0;top:-50px}
.pk_zoombtn .pk_zoom_in_v span,
.pk_zoombtn .pk_zoom_out_v span{margin-left:40px}
.pk_zoombtn .pk_zoom_out_v{top:-26px}
.pk_mob .pk_zoom_in_v,
.pk_mob .pk_zoom_out_v{display:none}

/* Pan toggle (left of waveform) */
.pk_panner{position:absolute;left:0;top:0;width:48px;height:100%}
.pk_mono .pk_panner{display:none!important}
.pk_pan_left{position:absolute;left:14px;top:0;height:50%}
.pk_pan_right{position:absolute;left:14px;top:50%;height:50%}
.pk_pan_btn{
	position:absolute;left:20%;top:30%;
	width:24px;height:40%;padding:0;margin:0;
	background:var(--bg-0);color:#2a8472;
	border:0;border-radius:var(--r);
	font-size:10px;text-align:center;white-space:nowrap;word-break:break-all;outline:0;
	transition:color var(--tr),background var(--tr);
}
.pk_pan_btn strong{display:block;font-size:12px}
.pk_pan_btn:active{background:var(--bg-1);color:var(--ac)}

/* ---------- Context menu ---------- */
.pk_contextMenu{
	position:absolute;z-index:99999;
	min-width:160px;margin:1px 0 0;padding:4px 0;
	background:var(--bg-2);color:var(--fg-0);
	border:1px solid var(--bd);border-radius:var(--r-md);
	box-shadow:0 12px 40px rgba(0,0,0,.6),var(--inset-hi);
	background-clip:padding-box;
	font:13px var(--ff);
}
.pk_contextMenu div{position:relative}
.pk_contextMenu a,
.pk_contextMenu a:hover{
	display:block;clear:both;
	margin:1px 4px;padding:5px var(--s2);
	color:var(--fg-0);font:13px/18px var(--ff);font-weight:normal;
	white-space:nowrap;cursor:pointer;
	border-radius:var(--r);
	transition:background 110ms var(--ease),color 110ms var(--ease);
}
.pk_contextMenu a:hover{background:var(--ac-soft);color:var(--ac);text-decoration:none}

/* ---------- Wave scrollbar ---------- */
.pk_wavescroll{
	position:relative;height:14px;margin-bottom:10px;
	background:var(--bg-0);
	border:1px solid var(--bd-s);border-radius:var(--r);
	overflow:hidden;contain:strict;overscroll-behavior:none;
	-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
.pk_wavedrag{
	cursor:grab;border-radius:var(--r);
	transform:translate3d(0,0,0);
}
.pk_wavedrag.pk_drag{cursor:grabbing}
.pk_wavedrag.pk_inact{cursor:default;border-radius:0}
.pk_wavescroll .pk_wavedrag{
	display:block;position:absolute;
	width:100%;min-width:50px;height:100%;
	background:linear-gradient(180deg,#1f5e60 0%,#103538 100%);
	box-shadow:var(--inset-hi);
}
.pk_wavescroll .pk_wavedrag_l,
.pk_wavescroll .pk_wavedrag_r{width:12px;height:100%;cursor:col-resize}
.pk_wavescroll .pk_wavedrag_l{float:left}
.pk_wavescroll .pk_wavedrag_r{float:right}

/* Play / loop button special states */
.pk_play.pk_act{
	background:linear-gradient(180deg,var(--rec) 0%,#aa1c2c 100%);
	color:#fff;
}
.pk_loop.pk_act{
	background:linear-gradient(180deg,var(--warn) 0%,#a4791c 100%);
	color:#1a1300;
}

/* WaveSurfer regions */
.wavesurfer-region{
	background:linear-gradient(120deg,rgba(90,242,255,.32),rgba(245,87,210,.28))!important;
	mix-blend-mode:screen;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}

/* ---------- Icon glyphs (icomoon-driven) ---------- */
.icon-silence:before{content:"S";height:1px;display:inline-block;font-family:var(--ff)}
.icon-clearsel:before{content:"clear selection"}
.icon-files-empty:before{content:"\e925"}
.icon-file-text2:before{content:"\e926"}
.icon-play3:before{content:"\ea1c"}
.icon-pause2:before{content:"\ea1d"}
.icon-stop2:before{content:"\ea1e"}
.icon-backward2:before{content:"\ea1f"}
.icon-forward3:before{content:"\ea20"}
.icon-previous2:before{content:"\ea23"}
.icon-next2:before{content:"\ea24"}
.icon-loop:before{content:"\ea2d"}
.icon-scissors:before{content:"\ea5a"}

/* Record dot */
.icon-rec:before{
	content:".";
	display:inline-block;width:33%;height:33%;
	margin-top:-2px;
	background:#922;color:transparent;border-radius:30px;
	font-size:0;vertical-align:middle;
}
.icon-rec.pk_act{
	background:var(--rec);
	box-shadow:0 0 10px var(--rec-glow);
	animation:fade_anim .6s steps(6,start) infinite alternate;
}
.icon-rec.pk_act:before{background:var(--bg-1)}
.pk_mob .icon-rec.pk_act{box-shadow:none}

/* ---------- 1up notification ---------- */
.pk_oneup{
	position:fixed;left:50%;top:49%;z-index:15;
	margin:0;padding:10px 14px;
	background:rgba(7,8,10,.78);
	color:var(--fg-0);
	border:1px solid var(--bd-h);border-radius:var(--r-md);
	box-shadow:0 0 24px var(--ac-glow);
	backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
	font-size:16px;
	transform:translate(-50%,-50%);
	transition:opacity 300ms var(--ease),margin-top 300ms var(--ease);
	user-select:none;pointer-events:none;
}

/* ---------- Modal ---------- */
.pk_modal_back{
	position:absolute;left:0;top:0;right:0;
	z-index:14;height:100%;display:block;
	background:rgba(4,8,12,.55);
	backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
	overflow:auto;
	touch-action:manipulation;
	-webkit-overflow-scrolling:touch;
}
.pk_modal_cnt{
	position:absolute;top:0;
	min-height:100%;min-width:100%;padding:40px 20px;
	box-sizing:border-box;
	display:flex;justify-content:center;align-items:center;
}
.pk_modal{
	position:relative;display:block;
	min-width:344px;min-height:168px;margin:0 auto;
	background:var(--bg-2);
	border:1px solid var(--bd);border-radius:var(--r-md);
	box-shadow:0 8px 24px rgba(0,0,0,.45);
	animation:pk_shw .2s ease-out 0ms 1;
}
.pk_modal.pk_bigger{min-width:400px}

.pk_modal_title{
	padding:9px 15px;margin-bottom:10px;
	border-bottom:1px solid var(--bd);
	font:13px var(--ff);letter-spacing:0;text-transform:none;
	color:var(--ac);
}
.pk_modal_main{position:relative;clear:both;padding:0 15px 52px}
.pk_modal_bottom{
	position:absolute;left:0;right:0;bottom:0;
	height:22px;padding:12px 15px;
	background:var(--bg-2);
	border-top:1px solid var(--bd);
}

.pk_modal_a_bottom{
	display:block;float:right;box-sizing:border-box;
	margin-left:var(--s3);padding:3px 10px;
	color:#eee;
	border:1px solid var(--bd);border-radius:21px;
	font:12px/16px var(--ff);text-align:center;
	background:transparent;
	transition:border-color var(--tr),color var(--tr),box-shadow var(--tr),background var(--tr);
	-webkit-user-select:none;user-select:none;cursor:pointer;
}
.pk_modal_a_bottom:hover{border-color:var(--ac);color:var(--ac);box-shadow:0 0 8px var(--ac-glow)}
.pk_modal_a_red{
	float:left;margin-left:2px;
	background:linear-gradient(180deg,var(--rec) 0%,#a8252e 100%);
	border-color:var(--rec);color:#fff;
}
.pk_modal_a_red:hover{box-shadow:0 0 10px var(--rec-glow);color:#fff}
.pk_modal_cancel{border-color:rgba(200,122,122,.55);color:#e69e9e;background:rgba(60,12,16,.55)}
.pk_modal_cancel:hover{border-color:var(--rec);color:#fff;background:rgba(110,20,28,.7);box-shadow:0 0 8px var(--rec-glow)}
.pk_modal_a_accpt{border-color:var(--ac);color:var(--ac)}
.pk_modal_a_accpt:hover{color:var(--ac-ink);background:var(--ac);box-shadow:0 0 10px var(--ac-glow)}

.pk_modal_a_bottom.pk_act{background:var(--ac);color:var(--ac-ink);border-color:var(--ac)}
.pk_modal_a_bottom.pk_inact{pointer-events:none}

.pk_modal .pk_txt{
	display:block;margin-top:6px;padding:5px 8px;
	background:var(--bg-0);color:var(--fg-0);
	border:1px solid var(--bd);border-radius:var(--r);
	outline:0;font:13px var(--ff);
	transition:border-color var(--tr),box-shadow var(--tr);
}
.pk_modal .pk_txt:focus{border-color:var(--ac);box-shadow:0 0 10px var(--ac-glow)}

.pk_modal_a_top{
	float:right;display:block;position:relative;
	padding:2px var(--s1);
	color:var(--ac-2);font-size:11px;
}
.pk_modal_a_top.pk_act{color:var(--ac);text-decoration:underline}

/* Modal toolbar tooltip (hover) */
.pk_modal_a_top span{
	position:absolute;left:50%;top:24px;
	display:block;padding:0 6px;
	transform:translate(-50%,0);
	background:#000;color:#eee;
	font:11px/22px Arial,sans-serif;letter-spacing:normal;font-weight:normal;
	white-space:nowrap;
	border-radius:3px;
	visibility:hidden;opacity:0;pointer-events:none;
	user-select:none;
	transition:opacity 320ms 296ms;
	z-index:6;
}
.pk_modal_a_top:hover span{visibility:visible;opacity:1}
.pk_mob .pk_modal_a_top span{visibility:hidden;display:none}

/* Compressor gain-reduction meter */
.pk_grmtr{
	float:left;position:relative;
	width:200px;max-width:60%;height:14px;margin:9px 0;
	background:var(--bg-0,#111);
	border:1px solid var(--bd,#444);
	border-radius:3px;
	overflow:hidden;
}
.pk_grmtr_f{
	position:absolute;right:0;top:0;bottom:0;
	width:0%;
	background:linear-gradient(to left, #ffc107, #ff5722);
	transition:width 50ms linear;
}
.pk_grmtr_v{min-width:60px;text-align:right}

.pk_modal_anim{animation:pk_ppr .22s var(--ease) 0ms 1}

/* Modal layout helpers */
.pk_col{float:left;margin-top:8px;text-align:center;position:relative}
.pk_h200 .pk_col{height:220px;width:10%;min-width:38px;max-width:60px}
.pk_dens .pk_h200 .pk_col{max-width:54px;overflow:hidden}
.pk_dens .pk_h200 .pk_val{padding:2px 6px;font-size:11px}
.pk_h200 .pk_col .pk_vert{
	display:inline-block;width:160px;
	margin-left:50%;margin-top:12px;
	transform-origin:80px 80px;
}
.pk_h200 .pk_btm{bottom:10px;font-size:12px}
.pk_h200 .pk_val{margin:0;padding:2px var(--s2);background:var(--bg-1)}

.pk_btm{position:absolute;left:0;right:0;bottom:0;user-select:none}
.pk_val{
	min-width:30px;padding:4px 10px;
	background:var(--bg-1);
	border-top:1px solid var(--bd-s);border-bottom:1px solid var(--bd);
	border-radius:11px;
	font:12px var(--ff-mono);font-variant-numeric:tabular-nums;text-align:center;
	user-select:none;
}
.pk_row .pk_val{float:right;margin:4px 0}
.pk_sel{float:left;max-width:92px}
.pk_sel_edt{
	display:flex;align-items:center;justify-content:center;float:left;
	box-sizing:border-box;
	width:25px;height:25px;margin-left:6px;
	color:var(--fg-2);background:#000;
	border:1px solid var(--bd);border-radius:var(--r-md);
	font-weight:bold;text-align:center;cursor:pointer;line-height:1;
	visibility:hidden;opacity:0;position:relative;
	transition:opacity 620ms;
}
.pk_sel_edt>span{
	display:block;position:absolute;left:50%;bottom:-30px;
	padding:0 6px;
	background:var(--bg-0);color:var(--fg-0);
	border:1px solid var(--bd);border-radius:var(--r);
	font:11px/18px var(--ff);
	white-space:nowrap;letter-spacing:normal;
	transform:translate(-50%,0);
	visibility:hidden;opacity:0;pointer-events:none;
	transition:opacity 320ms 296ms;
	z-index:6;
}
.pk_sel_edt:hover>span{visibility:visible;opacity:1}

.pk_row{
	clear:both;overflow:hidden;
	margin-bottom:4px;padding:6px 0 12px;
	border-bottom:1px solid var(--bd);
}
.pk_row:last-child{border:none}
.pk_row input{float:left}
.pk_row label{display:block;margin:0 24px 4px 0}
.pk_row label.pk_line{
	display:block;float:left;
	width:80px;padding-right:6px;margin:8px 0;text-align:center;
}
.pk_lufs_out{display:block;color:var(--fg-0)}
.pk_lufs_note{color:var(--fg-1)}
.pk_lufs_warn{color:var(--warn)}
.pk_norm_rng .pk_horiz,.pk_lufs_rng .pk_horiz{max-width:180px}
.pk_norm_modes .pk_check+label{margin-right:14px;font-size:12px;white-space:nowrap}

/* ---------- Form controls ---------- */
select{
	display:block;height:25px;padding:0 var(--s3);margin:0;
	background:var(--bg-1);color:var(--fg-0);
	border:1px solid var(--bd);border-radius:var(--r-md);outline:0;
	font:12px/24px var(--ff);font-weight:normal;
	transition:border-color var(--tr),box-shadow var(--tr);
}
select:hover,select:focus{border-color:var(--ac);box-shadow:0 0 10px var(--ac-glow)}
select option{background:var(--bg-2);padding:2px 0;margin:2px 0}

/* Range sliders */
.pk_vert,.pk_horiz{
	-webkit-appearance:none;appearance:none;
	-webkit-tap-highlight-color:transparent;
	width:100%;max-width:235px;height:10px;
	margin:10px 0;padding:1px 2px;
	background:#111;
	border:none;border-radius:14px;
	box-shadow:inset 0 1px 0 0 #0d0e0f,inset 0 -1px 0 0 #3a3d42;
	outline:none;
}
.pk_vert{transform:rotate(270deg) translate(0,-5px)}
input.pk_horiz.pk_w180{max-width:200px}
.pk_bigger .pk_horiz{max-width:180px}

.pk_vert::-moz-range-track,
.pk_horiz::-moz-range-track{border:inherit;background:transparent}

.pk_vert::-webkit-slider-thumb,
.pk_horiz::-webkit-slider-thumb{
	-webkit-appearance:none;
	width:38px;height:18px;
	border:1px solid #000;border-radius:12px;
	background:linear-gradient(180deg,#47497d 0%,#519fa7 100%);
	cursor:pointer;
}
.pk_vert::-moz-range-thumb,
.pk_horiz::-moz-range-thumb{
	width:38px;height:18px;
	border:1px solid #000;border-radius:12px;
	background:linear-gradient(180deg,#47497d 0%,#519fa7 100%);
}

/* Radio-style checkbox */
.pk_check:not(:checked),
.pk_check:checked{position:absolute;left:-9999px}
.pk_check:not(:checked)+label,
.pk_check:checked+label{
	position:relative;display:inline-block;
	height:24px;line-height:24px;padding-left:30px;cursor:pointer;
}
.pk_check:not(:checked)+label:before,
.pk_check:checked+label:before{
	content:'';position:absolute;left:0;top:0;
	width:20px;height:20px;
	background:#111;
	border:1px solid #222;border-radius:20px;
	box-shadow:inset 0 1px 0 0 #000,inset 0 -1px 0 0 #4d5158;
	outline:0;
}
.pk_check:not(:checked)+label:after,
.pk_check:checked+label:after{
	content:' ';position:absolute;left:3px;top:3px;
	width:16px;height:16px;
	background:var(--ac-2);border-radius:20px;
	outline:0;transition:opacity .1s,transform .1s;
}
.pk_check:checked+label:before{border-color:#666}
.pk_check:not(:checked)+label:after{opacity:0;transform:scale(0)}
.pk_check:checked+label:after{opacity:1;transform:scale(1)}
.pk_check:disabled:not(:checked)+label:before,
.pk_check:disabled:checked+label:before{box-shadow:none;border-color:#555;background:#3a3a3a}
.pk_check:disabled+label{color:var(--fg-2)}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ---------- EQ / FX panels ---------- */
.pk_dck{position:relative;display:none;width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden}

.pk_frqan{
	position:absolute;z-index:13;
	width:380px;height:110px;margin:15px;
	background:var(--bg-1);
	border:1px solid var(--bd);border-radius:var(--r-md);
}
.pk_mixwin{width:620px;height:280px;max-width:calc(100vw - 32px)}

.pk_peq{position:relative;width:450px;height:225px;z-index:3}
.pk_peq2{
	position:absolute;left:14px;
	width:225px;height:112px;z-index:2;
	transform:scale(2);transform-origin:0 0;
}
.pk_peq3{position:relative;z-index:1;color:var(--fg-2);font:10px var(--ff-mono)}
.pk_peq3 span span{
	position:absolute;top:-229px;left:50%;
	width:1px;height:225px;
	display:block;border-left:1px dashed var(--bd);
}
.pk_peq4{
	position:absolute;left:0;top:0;height:225px;
	color:var(--fg-2);font:9px var(--ff-mono);
}
.pk_peq4:before{
	content:' ';position:absolute;left:15px;top:5px;
	display:block;width:450px;height:225px;
	background:var(--bg-2);
}
.pk_peq4 span span{
	position:absolute;left:18px;top:5px;
	display:block;width:446px;height:1px;
	border-top:1px solid rgba(245,197,66,.18);
}
.pk_peq4 span{
	position:absolute;left:0;top:50%;
	width:15px;text-align:center;
}

.pk_pgeq_els{
	padding:6px 0;border-bottom:1px solid var(--bd);
	transition:background 120ms var(--ease);
}
.pk_pgeq_els:hover{background:var(--bg-3)}
.pk_pgeq_els.pk_act{background:linear-gradient(90deg,var(--ac-soft),transparent)}
.pk_pgeq_els>span{
	display:inline-block;width:18%;
	color:#ccc;font:12px var(--ff);text-align:center;
}
.pk_pgeq_els .pk_txlft{width:20%;text-align:left}
.pk_pgeq_els .pk_del{width:8%;font-size:8px;text-align:left;overflow:hidden}
.pk_pgeq_els>div{display:inline-block;width:18%;position:relative;text-align:center}
.pk_pgeq_els .pk_val{
	float:none;margin:0;
	min-width:32px;max-width:44px;color:#fff;
	border-left:none;border-right:none;outline:0;
}
.pk_pgeq_els select{margin:0 auto;padding:0 0 0 var(--s3)}

.pk_pgeq_freq{
	position:absolute;left:-100px;top:30px;z-index:9;
	width:220px;padding:3px 20px;
	background:var(--bg-2);
	border:1px solid var(--bd);border-radius:20px;
	box-shadow:0 12px 36px rgba(0,0,0,.6),var(--inset-hi);
}
.pk_pgeq_freq .pk_arr{
	position:absolute;left:50%;top:-8px;
	width:0;height:0;
	border-left:8px solid transparent;border-right:8px solid transparent;
	border-bottom:8px solid var(--bg-2);
	pointer-events:none;
}

.pk_pgeq_els .pk_check:not(:checked)+label,
.pk_pgeq_els .pk_check:checked+label{
	position:relative;display:inline-block;
	height:24px;line-height:20px;
	padding-left:25px;margin:0;
	font-size:10px;cursor:pointer;
}
.pk_pgeq_els i{display:inline-block;padding:0 var(--s2);margin-right:var(--s2)}

label.pk_dis,
.pk_pgeq_els.pk_dis .pk_gain{pointer-events:none;opacity:.5}

.pk_pglst{
	max-height:160px;padding-bottom:20px;
	overflow-y:scroll;
}
.pk_pglst::-webkit-scrollbar{width:0}

/* ---------- Tap tempo / tabs ---------- */
.pk_tbs{margin:-10px -14px 0;text-align:center}
.pk_tbsa{
	display:inline-block;width:33.333%;padding:10px 0;
	background:var(--bg-1);color:var(--fg-2);
	border-right:1px solid var(--bg-1);border-bottom:1px solid var(--bg-1);
	box-sizing:border-box;
	transition:background var(--tr),color var(--tr),box-shadow var(--tr);
}
.pk_tbsa:hover{box-shadow:inset 0 -2px 6px rgba(0,0,0,.5)}
.pk_tbsa.pk_act{background:transparent;border-bottom:none;box-shadow:none;color:var(--ac);text-shadow:0 0 8px var(--ac-glow)}

#pk_tmp_tap{
	position:relative;width:100%;min-width:500px;height:30px;
	margin-bottom:10px;clear:both;overflow:hidden;
	background:var(--bg-2);
	border:1px solid var(--bd);border-top:0;
	box-sizing:border-box;
}
#pk_tmp_tap2 .pk_obj,
#pk_tmp_tap .pk_obj{
	position:absolute;top:0;left:-4px;z-index:2;
	width:100%;height:100%;
	background:linear-gradient(to right,rgba(255,51,85,.5) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%);
	border-left:2px solid var(--rec);
	transform:translate3d(100%,0,0);
	will-change:transform;overflow:hidden;
	transition:transform 3.3s linear;
}
#pk_tmp_tap2 .pk_obj{transform:translate3d(50%,0,0);transition:transform 1770ms linear}
#pk_tmp_tap .pk_obj2{
	position:absolute;left:50%;
	display:block;width:100px;margin-left:-50px;
	font-size:16px;line-height:30px;text-align:center;opacity:.6;
	transition:opacity var(--tr);
}

#pk_tmp_tap3{
	position:relative;width:100%;min-width:500px;min-height:200px;
	margin-top:10px;overflow:hidden;
	background:var(--bg-2);
	border:1px solid var(--bd);box-sizing:border-box;
	transition:background 70ms var(--ease);
}
#pk_tmp_tap3:hover{background:var(--bg-3)}
#pk_tmp_tap3.pk_act{background:var(--bg-4)}

/* ---------- ID3 / Local files ---------- */
.pk_id3ttl{display:inline-block;min-width:64px;padding:2px var(--s3);font-weight:bold}

.pk_lcldrf{
	position:relative;overflow:hidden;
	margin:10px -5px 0;padding:6px 5px 14px;
	border-bottom:1px solid var(--bd);
	transition:background var(--tr);
}
.pk_lcldrf:hover{background:var(--bg-3)}
.pk_lcldrf .pk_i{
	display:inline-block;min-width:20px;padding-right:5px;
	color:var(--fg-1);font:11px var(--ff-mono);line-height:16px;
	vertical-align:middle;
}
.pk_lcla{margin:0 10px 0 15px;vertical-align:middle}
.pk_lcla2{
	position:absolute;left:7px;bottom:16px;
	display:block;padding:1px var(--s2);
	background:rgba(0,0,0,.78);
	border:1px solid var(--bd);border-radius:var(--r);
	font-size:9px;
}
.pk_lcla2.pk_act{background:rgba(255,255,255,.74);color:var(--bg-0)}
.pk_lcli{
	display:inline-block;width:120px;max-width:120px;height:48px;
	background:var(--bg-0);border:1px solid var(--bd-s);
	vertical-align:middle;
}
.pk_lcls{
	display:inline-block;width:25%;min-width:74px;
	margin-bottom:6px;line-height:16px;white-space:nowrap;
	vertical-align:top;
}

.pk_aut_act,.pk_aut{
	box-shadow:0 0 20px var(--ac-glow),inset 0 0 4px var(--warn);
}

/* ---------- Standalone ---------- */
body.pk_stndln{padding-bottom:600px;overflow:hidden}
.pk_stndln .pk_fxd{position:fixed;left:0;top:0;width:100%;height:100%;height:100dvh}
.pk_stndln .pk_modal_back{position:fixed}
.pk_fnt10 .pk_modal_a_bottom{font-size:10px}

/* ---------- Animations ---------- */
@keyframes pk_ppr{
	0%  {transform:scale(.96);opacity:0}
	100%{transform:scale(1);   opacity:1}
}
@keyframes pk_shw{
	0%{opacity:0}
	100%{opacity:1}
}
@keyframes pk_loader_anim{
	0%  {transform:scaleX(0)   translate3d(0,0,0)}
	25% {transform:scaleX(.5)  translate3d(0,0,0)}
	50% {transform:scaleX(.4)  translate3d(70%,0,0)}
	75% {transform:scaleX(.6)  translate3d(50%,0,0)}
	100%{transform:scaleX(1)   translate3d(100%,0,0)}
}
@keyframes fade_anim{to{opacity:.78}}

/* ---------- Custom scrollbars ---------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--bg-1)}
*::-webkit-scrollbar-thumb{background:var(--bg-3);border:2px solid var(--bg-1);border-radius:var(--r-md)}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active{background:var(--fg-2);box-shadow:none}

/* ---------- Responsive ---------- */
@media only screen and (max-height:438px){
	.pk_zoombtn .pk_zoom_out_v,
	.pk_zoombtn .pk_zoom_in_v{display:none!important}
}

@media only screen and (max-width:1250px){
	.pk_tbc{
		overflow-x:scroll;
		overflow-y:hidden;
		background:var(--bg-1);
		border-bottom:1px solid var(--bd);
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.pk_tbc::-webkit-scrollbar{width:0;height:0}
	.pk_tb{border-bottom:none;white-space:nowrap;display:inline-block;min-width:max-content}
	.pk_ctns,.pk_transport,.pk_mtbeat{
		float:none;display:block;height:28px;
		min-width:auto;margin:0 14px 0 0;
		border:0;
	}
	.pk_mt_on .pk_transport,
	.pk_mt_on .pk_ctns{display:block}
	.pk_mtbeat{
		display:none;grid-template-columns:40px 36px;grid-template-rows:22px 16px;
		gap:1px 4px;align-items:center;height:42px;padding:1px 6px 0;
		background:transparent;box-shadow:none;vertical-align:top;
	}
	.pk_mt_on .pk_mtbeat{display:inline-grid}
		.pk_tb .pk_mtbeat .pk_mtbeat_btn{
		grid-column:1;grid-row:2;width:40px;height:16px;
		margin:0;font-size:8px;line-height:16px;
	}
	.pk_tb .pk_mtbeat .pk_mtbeat_snap{grid-column:2;width:36px}
	.pk_tb .pk_mtbeat .pk_mtbeat_sig{
		grid-column:2;grid-row:1;width:36px;height:22px;
		margin:0;font-size:10px;line-height:22px;
	}
	.pk_mtbeat_bpm{
		grid-column:1;grid-row:1;width:40px;height:22px;
		margin:0;font-size:11px;line-height:22px;
	}
	.pk_mtbeat b{display:none}
	.pk_selection{min-width:auto}
	.pk_tb .pk_btn{width:24px;height:23px;margin:0 3px;font-size:12px;line-height:24px}
	.pk_sellist .pk_title{font-size:10px}
	.pk_selection .pk_sellist{width:296px}
	.pk_tb .pk_selection .pk_btn{
		width:60px;height:32px;margin:3px 0 0 10px;
		font-size:11px;line-height:10px;
	}
	.pk_mark1{width:5.554%}
	.pk_mark1.pk_odd{display:none}
}

@media only screen and (max-width:864px){
	.pk_selection .pk_sellist div{margin:0 16px 0 0}
	.pk_sellist .pk_title{display:none}
	.pk_tb .pk_selection .pk_btn{width:34px}
	.pk_selection .pk_sellist{width:212px}
	.icon-clearsel:before{content:"clear"}
	.pk_mark1{font-size:9px;letter-spacing:0}
}

@media only screen and (max-width:779px){
	.pk_selection{display:none!important}
	.pk_mob .pk_selection{
		float:none;display:inline-flex!important;align-items:center;min-width:0;height:36px;
		margin:0 8px 0 4px;padding:0;border:0;background:transparent;box-shadow:none;
		vertical-align:middle;
	}
	.pk_mob .pk_selection .pk_sellist{display:none}
	.pk_mob .pk_selection .icon-clearsel{
		width:64px;height:32px;min-height:32px;
		margin:0 4px;padding:0 6px;
		font-size:11px;line-height:1;
	}
	.pk_btn button{padding:2px var(--s3)}
	.pk_timecontainer{width:200px;margin-right:10px}
	.pk_timing{padding:10px 0 0 8px;font-size:24px}
	.pk_total_dur,.pk_hover_dur{font-size:13px}
	.pk_mt_topbtn em{display:none}
	.pk_hdr .pk_btn{margin:2px 10px 0}
	.pk_tbc{
		overflow-x:scroll;
		overflow-y:hidden;
		background:var(--bg-1);
		border-bottom:1px solid var(--bd);
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.pk_tbc::-webkit-scrollbar{width:0;height:0}
	.pk_tb{padding:6px 0 6px 14px;border-bottom:none;white-space:nowrap;display:inline-block;min-width:max-content}
	.pk_mob .pk_ctns,.pk_mob .pk_transport{height:36px}
	.pk_mark1{font-size:8px}
	.pk_tmpMsg{width:240px;margin-left:-120px;font-size:14px;line-height:28px}
	.pk_mob .pk_hdr{padding:20px 5px 0}
	.pk_mob .pk_transport,
	.pk_mob .pk_ctns,
	.pk_mob .pk_btngroup{float:none;display:inline-block}
	.pk_mob .pk_mtbeat{float:none}
	.pk_mob.pk_mt_on .pk_mtbeat{display:inline-grid}
	.pk_mob .pk_selection{display:inline-flex!important}
	.pk_mob .pk_btngroup{padding-top:8px}
	.pk_mob .pk_tb .pk_btn{width:32px;height:32px;margin:0 4px;font-size:16px;line-height:24px}
	.pk_mob .pk_tb .pk_mtbeat .pk_mtbeat_btn{width:40px;height:16px;margin:0;font-size:8px;line-height:16px}
	.pk_mob .pk_tb .pk_mtbeat .pk_mtbeat_snap{width:36px}
	.pk_mob .pk_tb .pk_mtbeat .pk_mtbeat_sig{width:36px;height:22px;margin:0;font-size:10px;line-height:22px}
	.pk_mob .pk_tb .pk_selection .icon-clearsel{
		width:auto;min-width:54px;height:32px;
		margin:0 8px 0 5px;padding:0 10px;
		font-size:11px;line-height:1;
	}
	.pk_h200 .pk_col{width:20%;overflow:hidden}
	.pk_zoombtn button{height:19px}
	.pk_wavescroll{height:16px;margin-bottom:8px}
	.pk_markers{margin-top:3px}
	.pk_mob .pk_ftr{
		padding-bottom:var(--s2);
		padding-bottom:max(var(--s2), calc(var(--s2) + env(safe-area-inset-bottom, 0px) - 4px));
	}
	.pk_lcldrf .pk_lcla{margin-left:14px;font-size:12px}
}

@media only screen and (max-width:400px){
	.pk_hdr .pk_btn{margin:2px 4px 0}
	.pk_timecontainer{width:160px}
	.pk_timing{font-size:15px;letter-spacing:0;padding:14px 0 0 6px}
	/* Canvas is drawn at a fixed 150x40 in JS — scale to .6 (≈90×24)
	   and offset top so it sits vertically centered in the 46px container,
	   with the total/hover duration spans stacked on the right. */
	.pk_timingcnv{top:11px;transform:scale(.6);transform-origin:0 0}
	.pk_total_dur,.pk_hover_dur{font-size:10px;right:8px}
	.pk_total_dur{top:8px}
	.pk_hover_dur{top:24px}
	.pk_hdr .pk_btn .pk_menu{min-width:160px}
}

/* =============================================================
   Touch / mobile primitives
   - Disables hover visual changes on touch-only devices
   - Suppresses iOS callout & accidental selection on controls
   - Prevents double-tap zoom (touch-action:manipulation)
   - Larger hit targets for fiddly multitrack controls on mobile
   ============================================================= */

/* On touch-only devices, neutralize hover effects so nothing
   sticks in a "hovered" state after a tap. */
@media (hover:none){
	a:hover,
	.pk_hdr .pk_btn:hover,
	.pk_hdr .pk_btn:hover>button,
	.pk_hdr .pk_btn .pk_menu_el:hover button,
	.pk_prc button:hover,
	.pk_tb .pk_btn:not(.pk_act):hover,
	.pk_mt_head button:not(.pk_act):hover,
	.pk_mt_head button.pk_inact:hover,
	.pk_mt_track button:not(.pk_act):hover,
	.pk_mt_knob:hover,
	.pk_mt_topbtn:hover,
	.pk_zoombtn button:hover,
	.pk_modal_a_bottom:hover,
	.pk_modal_a_red:hover,
	.pk_modal_cancel:hover,
	.pk_modal_a_accpt:hover,
	.pk_pgeq_els:hover,
	.pk_tbsa:hover,
	.pk_lcldrf:hover{
		background:inherit;color:inherit;
		border-color:inherit;
		box-shadow:none;text-shadow:none;
	}
	.pk_mt_clip:hover .pk_mt_trim:after{opacity:0}
	*::-webkit-scrollbar-thumb:hover{background:transparent;box-shadow:none}
	/* Tooltips never appear on touch */
	.pk_btn:hover span,
	.pk_mt_head button:hover span,
	.pk_mt_track button:hover span,
	.pk_mt_knob:hover span{visibility:hidden;opacity:0}
	/* Re-assert active states that the hover reset above clobbers
	   when sticky :hover lingers on touch devices. */
	.pk_mt_topbtn.pk_act,
	.pk_mt_topbtn.pk_act:hover{
		color:var(--ac-ink);border-color:var(--ac);
		background:linear-gradient(180deg,#a8eef5 0%,#5ac8d2 100%);
		box-shadow:0 0 16px var(--ac-glow),inset 0 1px 0 rgba(255,255,255,.3);
	}
	.pk_hdr .pk_btn.pk_act,
	.pk_hdr .pk_btn.pk_act:hover{
		background:transparent;color:var(--ac-ink);
		text-shadow:none;text-decoration:none;
		box-shadow:none;
	}
	.pk_hdr .pk_btn.pk_act>button,
	.pk_hdr .pk_btn.pk_act:hover>button{
		background:var(--ac);color:var(--ac-ink);
		box-shadow:0 0 12px var(--ac-glow);
	}
}

/* Apply touch-friendly behavior to every interactive surface
   regardless of UA. Cheap, additive, no visual change on desktop. */
.pk_btn,
.pk_mt_head button,
.pk_mt_track button,
.pk_mt_knob,
.pk_mt_clip,
.pk_mt_trim,
.pk_mt_fade,
.pk_mt_region,
.pk_mt_ruler,
.pk_zoombtn button,
.pk_mt_topbtn,
.pk_modal_a_bottom,
.pk_pan_btn,
.pk_peaker,
.pk_volpar{
	touch-action:manipulation;
	-webkit-touch-callout:none;
	-webkit-user-select:none;user-select:none;
}

/* Inputs are special — keep selectable but suppress callout. */
input,textarea{-webkit-touch-callout:none}

/* Multitrack track-list sidebar momentum scrolling on iOS. */
.pk_mt_tracks_wrap,.pk_mt_main{-webkit-overflow-scrolling:touch;overscroll-behavior:none}
.pk_mt_tracks_wrap,.pk_mt_main,.pk_mt_lanes,.pk_mt_lane{touch-action:pan-y}
.pk_mt_clip.pk_mt_clip_sel .pk_mt_trim,.pk_mt_clip.pk_mt_clip_sel .pk_mt_fade,
.pk_mt_region,.pk_mt_knob,.pk_mt_resize{touch-action:none}

/* ---------- Mobile-only sizing & visibility (.pk_mob) ---------- */

/* Hide multitrack tooltips on mobile (already hidden for tb/ftr). */
.pk_mob .pk_mt_head button span,
.pk_mob .pk_mt_track button span,
.pk_mob .pk_mt_knob span{visibility:hidden;display:none}
.pk_mob .pk_mt_tracks_wrap{overflow-y:scroll}
.pk_mob .pk_mt_main{overflow-x:auto;overflow-y:scroll;scrollbar-width:none}
.pk_mob .pk_mt_main::-webkit-scrollbar{width:0;height:0}
.pk_mob .pk_mt_clip{min-width:24px;touch-action:pan-y}

/* Larger hit targets for fiddly mt controls on mobile. */
.pk_mob .pk_mt_side{flex:0 0 154px;width:154px}
.pk_mob .pk_mt_track{padding:6px 5px}
.pk_mob .pk_mt_track input{height:26px;margin-bottom:8px;padding:0 5px}
.pk_mob .pk_mt_head{gap:2px}
.pk_mob .pk_mt_head button{width:30px;height:24px;font-size:13px}
.pk_mob .pk_mt_track button{width:28px;height:28px;margin-right:3px;font-size:13px}
.pk_mob .pk_mt_knob{width:32px;height:32px}
.pk_mob .pk_mt_knob i{left:14px;top:5px}
.pk_mob .pk_mt_track .pk_mt_rec{position:absolute;right:5px;top:40px;margin:0}
.pk_mob .pk_mt_track .pk_mt_del{right:5px;top:6px;margin:0}
.pk_mob .pk_mt_track .pk_mt_knob{width:34px;height:34px;margin:15px 14px 0 0;vertical-align:top}
.pk_mob .pk_mt_track .pk_mt_knob:before{top:-8px;font-size:6px}
.pk_mob .pk_mt_track .pk_mt_knob:after{display:block;left:-7px;top:37px;width:48px;font-size:9px}
.pk_mob .pk_mt_track.pk_mt_compact .pk_mt_knob:after{display:none}
.pk_mob .pk_mt_track .pk_mt_knob i{left:16px;top:5px;height:12px;transform-origin:1px 11px}
.pk_mob .pk_mt_resize{display:none}
.pk_mob .pk_mt_trim{width:18px}
.pk_mob .pk_mt_region{touch-action:pan-y}
.pk_mob .pk_mt_region .wavesurfer-handle{width:18px;max-width:none}
.pk_mob .pk_mt_region .wavesurfer-handle-start{left:-9px}
.pk_mob .pk_mt_region .wavesurfer-handle-end{left:auto;right:-9px}
.pk_mob .pk_mt_region .wavesurfer-handle{touch-action:none}

/* ---------- Narrow viewport: modals, floating windows ---------- */
@media only screen and (max-width:480px){
	.pk_modal{min-width:auto;width:calc(100vw - 24px);max-width:100%}
	.pk_modal.pk_bigger{min-width:auto;width:calc(100vw - 24px)}
	.pk_modal_cnt{padding:20px 10px}
	.pk_modal_main{padding:0 10px 48px}
	.pk_modal.pk_bigger .pk_row label.pk_line{width:70px}
	.pk_modal.pk_bigger .pk_horiz,
	.pk_modal.pk_bigger .pk_grmtr{max-width:145px}
	.pk_modal.pk_bigger .pk_val{padding:4px 8px}

	.pk_frqan,.pk_peq{width:calc(100vw - 32px);max-width:380px}
	.pk_mixwin{max-width:calc(100vw - 32px)}
	.pk_peq{height:auto}
	.pk_peq2{width:50%}

	.pk_selection .pk_sellist{width:auto;max-width:calc(100vw - 24px)}

	.pk_mt_side{flex:0 0 132px;width:132px}
}