/* font */
@font-face {
    font-family: 'Digital-7';
    src: url('../fonts/Digital-7.eot');
    src: url('../fonts/Digital-7.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Digital-7.woff2') format('woff2'),
        url('../fonts/Digital-7.woff') format('woff'),
        url('../fonts/Digital-7.ttf') format('truetype'),
        url('../fonts/Digital-7.svg#Digital-7') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Global style for wavform backgrounds */
.sm-wave-grid{
	--cols:16;			/* total vertical sections */
	--group:4;			/* thick line every N sections */
	--bg:#2a3130;		/* panel fill */
	--line:rgba(255,255,255,0.12);
	--line-strong:rgba(255,255,255,0.22);
	--thin:1px;
	--thick:2px;
	--rows:2;			/* horizontal sections (2 => one mid line) */

	background-color:var(--bg);

	/* vertical thin + vertical thick + horizontal thin */
	background-image:
		linear-gradient(to right,var(--line) 0,var(--line) var(--thin),transparent var(--thin)),
		linear-gradient(to right,var(--line-strong) 0,var(--line-strong) var(--thick),transparent var(--thick)),
		linear-gradient(to bottom,var(--line) 0,var(--line) var(--thin),transparent var(--thin));

	background-repeat:repeat;

	/* cell width, group width, row height */
	background-size:
		calc(100% / var(--cols)) 100%,
		calc(100% * var(--group) / var(--cols)) 100%,
		100% calc(100% / var(--rows));

	/* optional: a subtle outer edge like your image */
	border:1px solid rgba(0,0,0,0.35);
}

#sm-wrap{
	max-width:860px;
	margin:24px auto;
	padding:16px;
	box-sizing:border-box;
}

#sm-panel{
	border-radius:16px;
	padding:40px;
	background-image:
		url('../img/screw1.png'),
		url('../img/screw2.png'),
		url('../img/screw3.png'),
		url('../img/screw4.png'),
		url('../img/main-bg.png');
	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat;
	background-position:
		14px 10px,
		calc(100% - 14px) 10px,
		14px calc(100% - 10px),
		calc(100% - 14px) calc(100% - 10px),
		center;
	background-size:
		auto,
		auto,
		auto,
		auto,
		100% 100%;
	box-shadow:0 10px 30px rgba(0,0,0,0.25);
	color:#e8eef6;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	position: relative;
}

#sm-panel::before,
#sm-panel::after{
	content:'';
	position:absolute;
	top: -6px;
	width: 30px;
	height: calc(100% + 12px);
	background-repeat:no-repeat;
	background-size:30px 100%;
	pointer-events:none;
}

#sm-panel::before{
	left: -24px;
	background-image:url('../img/left-edge.png');
}

#sm-panel::after{
	right: -24px;
	background-image:url('../img/right-edge.png');
}

@media only screen and (max-width: 720px){
	#sm-panel::before, #sm-panel::after{
		width: 22px;
	}
	#sm-panel::before{
		left: -14px;
	}
	#sm-panel::after{
		right: -14px;
	}
}

@media only screen and (max-width: 720px){
	#sm-panel{
		padding: 6px 4px 40px 4px;
	}
}

#sm-title{
	font-weight:700;
	letter-spacing:0.08em;
	font-size:14px;
	margin: 14px;
}

@media only screen and (max-width: 720px){
	#sm-title{
		text-align:center;
	}
	#sm-title img{
		width: 80%;
		margin: 0 auto -8px auto;
	}
}

#sm-controls{
	display:flex;
	gap: 4px;
	align-items:center;
	flex-wrap:wrap;
	padding: 20px;
	border-radius:12px;
	border: 3px solid #864918ef;
	box-sizing: border-box;
	width: calc(100% - 32px);
	margin: 10px auto;
}

.sm-controls-right{
	margin-left:auto;
	display:flex;
	gap:4px;
	align-items:center;
}

@media only screen and (max-width: 720px) {
	#sm-controls{
		padding: 2px 10px;
	}
}

@media only screen and (max-width: 400px) {
	#sm-controls{
		padding: 6px 10px;
		gap: 6px 3%;
	}
}

.sm-btn{
	border:1px solid rgba(255,255,255,0.15);
	background:rgba(255,255,255,0.06);
	color:#e8eef6;
	border-radius:12px;
	padding:10px 14px;
	cursor:pointer;
	font-weight:600;
}

.sm-btn:hover{
	background:rgba(255,255,255,0.1);
}

.sm-btn-small{
	padding:8px 12px;
	border-radius:10px;
	font-weight:600;
}

.sm-record-btn{
	position:relative;
	display:inline-block;
	width: 42px;
	height: 42px;
	cursor:pointer;
	user-select:none;
	vertical-align:middle;
}

.sm-record-btn img{
	position:absolute;
	top:0;
	left:0;
	width: 42px;
	height: 42px;
	display:block;
}

.sm-record-off{
	opacity:1;
	transition:opacity 140ms linear;
}

.sm-record-on{
	opacity:0;
	transition:opacity 140ms linear;
}

/* Hover preview */
.sm-record-btn:hover .sm-record-on{
	opacity:1;
}

.sm-record-btn:hover .sm-record-off{
	opacity:0;
}

/* While recording: force "on" state */
.sm-record-btn.sm-is-recording .sm-record-on{
	opacity:1;
}

.sm-record-btn.sm-is-recording .sm-record-off{
	opacity:0;
}

.sm-record-btn:active{
	transform:scale(0.96);
}

#sm-bpm{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:13px;
	margin-left: 21px;
}
@media only screen and (max-width: 720px) {
	#sm-bpm{
		gap: 6px;
		margin-left: 4px;
	}
}

#sm-timesig{
	display:flex;
	align-items:center;
	gap:6px;
	margin-left:10px;
	position: relative;
}

#sm-timesig::before{
	content:'';
	position:absolute;
	left:50%;
	top: -16px;
	transform:translateX(-50%);
	width: 88px;
	height: 13px;
	background:url('../img/time-sig.png') no-repeat center center;
	background-size:contain;
	pointer-events:none;
}

.sm-timesig-input{
	width: 48px;
	height:40px;
	background:none!important;
	border: 2px solid rgba(0,0,0,0.5)!important;
	border-radius: 6px!important;
	color:#914B16!important;
	text-shadow: 0px 0px 10px #914B16;
	-webkit-box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	-moz-box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	text-align: center;
	line-height:40px;
	font-size: 35px;
	position: relative;
	top: 4px;
	font-family:'Digital-7', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	box-sizing:border-box;
	padding: 0!important;
}

.sm-timesig-input:focus{
	outline:none;
	border-color:rgba(255,255,255,0.35);
}

.sm-timesig-slash{
	font-family:'Digital-7', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	color:#914B16!important;
	text-shadow: 0px 0px 10px #914B16;
	font-size:28px;
	line-height:1;
	opacity:0.9;
}

@media only screen and (max-width: 720px) {
	#sm-timesig{
		gap: 6px;
		margin-left: 4px;
	}
	#sm-timesig::before{
		width:60px;
		height:8px;
		top:-6px;
	}
	.sm-timesig-input{
		width:36px;
		height:36px;
		font-size:28px;
		border: 2px solid rgba(0,0,0,0.5)!important;
		margin: 0;
	}
	.sm-timesig-slash{
		font-size:24px;
		position: relative;
		top: 3px;
		margin: 0!important;
	}
}

@media only screen and (max-width: 480px) {
	#sm-timesig{
		gap: 2px;
		margin-left: 2px;
	}
	#sm-timesig::before{
		width:40px;
	}
	.sm-timesig-input{
		width:28px;
		height:28px;
		font-size:24px;
	}
	.sm-timesig-slash{
		font-size:16px;
	}
}

@media only screen and (max-width: 400px) {
	#sm-timesig{
		gap: 8px;
		margin-left: 0px;
	}
	#sm-timesig::before{
		width:88px;
	}
	.sm-timesig-input{
		width:38px;
		height:36px;
		font-size:24px;
	}
	.sm-timesig-slash{
		font-size:24px;
	}
}

.sm-bpm-knob{
	position:relative;
	width:80px;
	height:80px;
	display:block;
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	touch-action:none;
}

.sm-bpm-ring{
	position:absolute;
	left:0;
	top:0;
	width:80px;
	height:80px;
}

.sm-bpm-knob-img{
	position:absolute;
	left:50%;
	top:50%;
	width:80px;
	height:80px;
	transform:translate(-50%,-50%) rotate(0deg);
	transform-origin:50% 50%;
}

@media only screen and (max-width: 720px) {
	.sm-bpm-knob, .sm-bpm-ring, .sm-bpm-knob-img{
		width: 56px;
		height: 56px;
	}
}

@media only screen and (max-width: 480px) {
	.sm-bpm-knob, .sm-bpm-ring, .sm-bpm-knob-img{
		width: 42px;
		height: 42px;
	}
}

@media only screen and (max-width: 400px) {
	.sm-bpm-knob, .sm-bpm-ring, .sm-bpm-knob-img{
		width: 52px;
		height: 52px;
	}
}

.sm-bpm-range{
	position:absolute;
	left:-9999px;
	top:-9999px;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none;
}

.sm-bpm-val{
	width: 80px;
	height: 40px;
	text-align: right;
	border: 2px solid rgba(0,0,0,0.5);
	border-radius: 6px;
	-webkit-box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	-moz-box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	text-align: center;
	line-height: 35px;
	position: relative;
	top: 4px;
	font-family: 'Digital-7';
	color: #914B16;
	text-shadow: 0px 0px 10px #914B16;
	font-size: 38px;
}

.sm-bpm-val::before{
	content:'';
	position:absolute;
	left:50%;
	top:-24px;
	transform:translateX(-50%);
	width:44px;
	height:16px;
	background:url('../img/bpm.png') no-repeat center center;
	background-size:contain;
	pointer-events:none;
}


@media only screen and (max-width: 720px) {
	.sm-bpm-val{
		width:56px;
		height:36px;
		font-size:30px;
		line-height:32px;
	}
	.sm-bpm-val::before{
		width:30px;
		height:8px;
		top:-12px;
	}
}

@media only screen and (max-width: 480px) {
	.sm-bpm-val{
		width: 42px;
		height: 28px;
		font-size: 26px;
		line-height: 23px;
	}
	.sm-bpm-val::before{
		width:26px;
		height: 6px;
		top:-12px;
	}
}

@media only screen and (max-width: 400px) {
	.sm-bpm-val{
		width: 56px;
		height: 36px;
		font-size: 32px;
		line-height: 34px;
	}
	.sm-bpm-val::before{
		width:26px;
		height: 12px;
		top:-14px;
	}
}


#sm-channels{
	display:flex;
	flex-direction:column;
	gap: 4px;
	padding: 23px 6px;
	border-radius:12px;
	border: 3px solid #864918ef;
	box-sizing: border-box;
	width: calc(100% - 32px);
	margin:0 auto;
}

@media only screen and (max-width: 720px) {
	#sm-channels{
		padding: 12px 6px;
	}
}

.sm-channel{
	border-radius:14px;
	padding: 0 14px;
}

@media only screen and (max-width: 720px) {
	.sm-channel{
		padding: 0 0 0 6px!important;
	}
}

.sm-channel{
	border-radius:14px;
	padding: 0 14px;
}

.sm-channel-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:10px;
}

.sm-channel-label{
	font-weight:700;
	font-size:13px;
	opacity:0.9;
}

.sm-channel-body{
	display:flex;
	align-items:center;
	gap: 4px;
	flex-wrap:wrap;
}

@media only screen and (max-width: 520px) {
	.sm-channel-body{
		margin-bottom:4px;
	}
}

.sm-file{
	max-width:260px;
}

.sm-status{
	font-size:12px;
	opacity:0.85;
	transition:opacity 300ms linear;
}

#sm-trim-modal{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	box-sizing:border-box;
}

#sm-trim-backdrop{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.7);
}

#sm-trim-inner{
	background-image:
		url('../img/screw1.png'),
		url('../img/screw2.png'),
		url('../img/screw3.png'),
		url('../img/screw4.png'),
		url('../img/main-bg.png');
	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat;
	background-position:
		10px 10px,
		calc(100% - 10px) 10px,
		10px calc(100% - 10px),
		calc(100% - 10px) calc(100% - 10px),
		center;
	background-size:
		auto,
		auto,
		auto,
		auto,
		100% 100%;
	box-shadow:0 10px 30px rgba(0,0,0,0.25);
    position: relative;
    width: min(980px, 100%);
    border-radius: 16px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    color: #e8eef6;
}

#sm-trim-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
}

#sm-trim-title{
	font-weight:700;
	letter-spacing:0.05em;
	font-size:14px;
	opacity:0.9;
}

#sm-trim-wave-wrap{
	position:relative;
	width:100%;
	border-radius:14px;
	border:1px solid rgba(255,255,255,0.08);
	overflow-x:auto;
	overflow-y:hidden;
}

#sm-trim-track{
	position:relative;
	height:100px;
	min-width:100%;
}

#sm-trim-wave{
	display:block;
	height:100px;
}

#sm-trim-sel{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:0;
	border:2px solid rgba(255,255,255,0.9);
	background:rgba(255,255,255,0.10);
	border-radius:10px;
	box-sizing:border-box;
	cursor:grab;
	touch-action:none;
}

#sm-trim-sel.sm-grabbing{
	cursor:grabbing;
}

.sm-trim-handle{
	position:absolute;
	top:-2px;
	bottom:-2px;
	width:14px;
	background:rgba(255,255,255,0.25);
}

.sm-trim-handle[data-handle="l"]{
	left:-7px;
	cursor:ew-resize;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}

.sm-trim-handle[data-handle="r"]{
	right:-7px;
	cursor:ew-resize;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}

#sm-trim-meta{
	display:flex;
	gap:14px;
	flex-wrap:wrap;
	margin-top:12px;
	font-size:13px;
	opacity:0.9;
}

.sm-trim-controls{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	align-items:center;
	margin-top:10px;
}

.sm-trim-control{
	display:flex;
	gap:10px;
	align-items:center;
	padding:8px 10px;
	border-radius:10px;
	background:rgba(255,255,255,0.04);
	border:1px solid rgba(255,255,255,0.06);
}

.sm-trim-control input[type="range"]{
	width:180px;
}

.sm-trim-row{
	display:flex;
	gap:8px;
	align-items:baseline;
}

#sm-trim-actions{
	display:flex;
	justify-content:flex-end;
	gap:10px;
	margin-top:14px;
}

#sm-rec-modal{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	box-sizing:border-box;
}

#sm-rec-backdrop{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.7);
}

#sm-rec-inner{
	background-image:
		url('../img/screw1.png'),
		url('../img/screw2.png'),
		url('../img/screw3.png'),
		url('../img/screw4.png'),
		url('../img/main-bg.png');
	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat;
	background-position:
		10px 10px,
		calc(100% - 10px) 10px,
		10px calc(100% - 10px),
		calc(100% - 10px) calc(100% - 10px),
		center;
	background-size:
		auto,
		auto,
		auto,
		auto,
		100% 100%;
	box-shadow:0 10px 30px rgba(0,0,0,0.25);
    position: relative;
	width:min(720px,100%);
    border-radius: 16px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    color: #e8eef6;
}

#sm-rec-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
}

#sm-rec-title{
	font-weight:700;
	letter-spacing:0.05em;
	font-size:14px;
	opacity:0.9;
}

#sm-rec-body {
    border-radius: 14px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
    padding: 14px;
    text-align: center;
}

#sm-rec-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    opacity: .9;
    justify-content: center;
    text-align: center
}

#sm-rec-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,80,80,.95);
    box-shadow: 0 0 0 6px rgba(255,80,80,.12);
    display: inline-block
}

#sm-rec-timer {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
    opacity: .95
}

#sm-rec-vu {
    position: relative;
    width: 220px;
    max-width: 100%;
    text-align: center;
    margin: 20px auto;
}

#sm-rec-vu #vu-meter-rec {
    display: block;
    width: 100%;
    height: auto;
    left: 0
}

#sm-rec-needle {
    position: absolute;
    left: 45%;
    top: 24%;
    width: 2px;
    height: 58%;
    background: rgba(0,0,0,.9);
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(30deg);
    border-radius: 2px
}

#sm-rec-vu #vu-meter-rec-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
}

#sm-rec-actions{
	margin-top:14px;
	display:flex;
	justify-content:flex-end;
}

#sm-rec-error{
	margin-top:12px;
	padding:10px 12px;
	border-radius:12px;
	background:rgba(255,80,80,0.12);
	border:1px solid rgba(255,80,80,0.25);
	color:#ffd6d6;
	font-size:13px;
	line-height:1.4;
}

.sm-hidden-file{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none;
}

.sm-upload-btn, .sm-edit-btn, .sm-mute-btn, .sm-play-btn, .sm-stop-btn, .sm-help-btn, .sm-export-btn{
	position:relative;
	display:inline-block;
	width: 42px;
	height: 42px;
	cursor:pointer;
	user-select:none;
	vertical-align:middle;
}

.sm-upload-btn img, .sm-edit-btn img, .sm-mute-btn img, .sm-play-btn img, .sm-stop-btn img, .sm-help-btn img, .sm-export-btn img{
	position:absolute;
	top:0;
	left:0;
	width: 42px;
	height: 42px;
	display:block;
}

@media only screen and (max-width: 620px) {
	.sm-record-btn, .sm-record-btn img, .sm-upload-btn, .sm-upload-btn img, .sm-edit-btn, .sm-edit-btn img, .sm-mute-btn, .sm-mute-btn img, .sm-vol-knob, .sm-vol-knob img, .sm-play-btn, .sm-play-btn img, .sm-stop-btn, .sm-stop-btn img, .sm-export-btn, .sm-export-btn img{
		width: 36px;
		height: 36px;
	}
}

@media only screen and (max-width: 420px) {
	.sm-record-btn, .sm-record-btn img, .sm-upload-btn, .sm-upload-btn img, .sm-edit-btn, .sm-edit-btn img, .sm-mute-btn, .sm-mute-btn img, .sm-vol-knob, .sm-vol-knob img, .sm-play-btn, .sm-play-btn img, .sm-stop-btn, .sm-stop-btn img, .sm-export-btn, .sm-export-btn img{
		width:32px;
		height:32px;
		margin:-1px;
	}
}

.sm-stop-btn, .sm-stop-btn img, .sm-play-btn, .sm-play-btn img, .sm-help-btn, .sm-help-btn img, .sm-export-btn, .sm-export-btn img{
	width:56px;
	height:56px;
}

@media only screen and (max-width: 720px) {
	.sm-stop-btn, .sm-stop-btn img, .sm-play-btn, .sm-play-btn img, .sm-help-btn, .sm-help-btn img, .sm-export-btn, .sm-export-btn img{
		width:42px;
		height:42px;
	}
}


@media only screen and (max-width: 480px) {
	.sm-stop-btn, .sm-stop-btn img, .sm-play-btn, .sm-play-btn img, .sm-help-btn, .sm-help-btn img, .sm-export-btn, .sm-export-btn img{
		width:36px;
		height:36px;
	}
}

@media only screen and (max-width: 400px) {
	.sm-stop-btn, .sm-stop-btn img, .sm-play-btn, .sm-play-btn img, .sm-help-btn, .sm-help-btn img, .sm-export-btn, .sm-export-btn img{
		width:44px;
		height:44px;
	}
}

/* Upload hover preview */
.sm-upload-off{
	opacity:1;
	transition:opacity 140ms linear;
}

.sm-upload-on{
	opacity:0;
	transition:opacity 140ms linear;
}

.sm-upload-btn:hover .sm-upload-on{
	opacity:1;
}

.sm-upload-btn:hover .sm-upload-off{
	opacity:0;
}

/* Edit hover + open toggle */
.sm-edit-off{
	opacity:1;
	transition:opacity 140ms linear;
}

.sm-edit-on{
	opacity:0;
	transition:opacity 140ms linear;
}

.sm-edit-btn:hover .sm-edit-on,
.sm-edit-btn.sm-is-open .sm-edit-on{
	opacity:1;
}

.sm-edit-btn:hover .sm-edit-off,
.sm-edit-btn.sm-is-open .sm-edit-off{
	opacity:0;
}


/* Play state: swap while playing */
.sm-play-off{
	opacity:1;
	transition:opacity 140ms linear;
}

.sm-play-on{
	opacity:0;
	transition:opacity 140ms linear;
}

.sm-play-btn.sm-is-playing .sm-play-on{
	opacity:1;
}

.sm-play-btn.sm-is-playing .sm-play-off{
	opacity:0;
}

/* Export hover preview + align right */
.sm-export-btn{
	margin-left: auto;
}

@media only screen and (max-width: 400px) {
	.sm-export-btn{
		margin-left: 0;
	}
}

.sm-export-off{
	opacity:1;
	transition:opacity 140ms linear;
}

.sm-help-off{
	opacity:1;
	transition:opacity 140ms linear;
}

.sm-help-on{
	opacity:0;
	transition:opacity 140ms linear;
}

.sm-help-btn:hover .sm-help-on,
.sm-help-btn.sm-is-active .sm-help-on{
	opacity:1;
}

.sm-help-btn:hover .sm-help-off,
.sm-help-btn.sm-is-active .sm-help-off{
	opacity:0;
}

.sm-export-on{
	opacity:0;
	transition:opacity 140ms linear;
}

.sm-export-btn:hover .sm-export-on{
	opacity:1;
}

.sm-export-btn:hover .sm-export-off{
	opacity:0;
}

/* Stop hover preview */
.sm-stop-off{
	opacity:1;
	transition:opacity 140ms linear;
}

.sm-stop-on{
	opacity:0;
	transition:opacity 140ms linear;
}

.sm-stop-btn:hover .sm-stop-on{
	opacity:1;
}

.sm-stop-btn:hover .sm-stop-off{
	opacity:0;
}

/* Mute state: ON means playing (mute-on.png visible). OFF means muted (mute-off.png visible). */
.sm-mute-on{
	opacity:1;
	transition:opacity 140ms linear;
}

.sm-mute-off{
	opacity:0;
	transition:opacity 140ms linear;
}

.sm-mute-btn.sm-is-muted .sm-mute-on{
	opacity:0;
}

.sm-mute-btn.sm-is-muted .sm-mute-off{
	opacity:1;
}

.sm-upload-btn:active,
.sm-mute-btn:active,
.sm-play-btn:active,
.sm-stop-btn:active,
.sm-help-btn:active,
.sm-export-btn:active{
	transform:scale(0.96);
}

.sm-hidden{
	display:none !important;
}

.sm-vol-knob{
	position:relative;
	display:inline-block;
	width: 42px;
	height: 42px;
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	vertical-align:middle;
	touch-action:none;
}

@media only screen and (max-width: 620px) {
	.sm-vol-knob{
		position:relative;
		display:inline-block;
		width: 36px;
		height: 36px;
	}
}

@media only screen and (max-width: 420px) {
	.sm-vol-knob{
		position:relative;
		display:inline-block;
		width: 32px;
		height: 32px;
	}
}

.sm-vol-arc{
	position:absolute;
	left:50%;
	top:50%;
	width:54px;
	height:54px;
	transform:translate(-50%,-50%);
	pointer-events:none;
	opacity:0;
}

.sm-vol-arc path{
	fill:none;
	stroke-linecap:round;
}

.sm-vol-arc [data-role="vol-arc-track"]{
	stroke:rgba(142,158,152,0.18);
	stroke-width:3;
}

.sm-vol-arc [data-role="vol-arc-path"]{
	stroke:rgba(142,158,152,0.75);
	stroke-width:3;
}

.sm-vol-readout{
	position:absolute;
	left:50%;
	top:-18px;
	transform:translateX(-50%);
	font-size:11px;
	font-weight:600;
	color:#e8eef6;
	background:rgba(0,0,0,0.75);
	padding:2px 6px;
	border-radius:10px;
	white-space:nowrap;
	pointer-events:none;
	opacity:0;
}

.sm-vol-input{
	position:absolute;
	left:50%;
	top:-22px;
	transform:translateX(-50%);
	width:36px;
	height:26px;
	font-size:20px;
	padding:0!important;
	text-align:center;
	background:rgba(50,50,50,1)!important;
	border: 2px solid rgba(0,0,0,0.5)!important;
	border-radius: 6px!important;
	color:#c76b26!important;
	text-shadow: 0px 0px 10px #ed812d;
	-webkit-box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	-moz-box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	font-family:'Digital-7', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	box-sizing:border-box;
	display:none;
}

.sm-vol-input::selection {
    background: transparent;
}

.sm-vol-knob.sm-vol-editing .sm-vol-readout{
	display:none;
}

.sm-vol-knob.sm-vol-editing .sm-vol-input{
	display:block;
}

.sm-vol-ring{
	position:absolute;
	left:0;
	top:0;
	width: 42px;
	height: 42px;
}

.sm-vol-knob-img{
	position:absolute;
	left:50%;
	top:50%;
	width: 42px;
	height: 42px;
	transform:translate(-50%,-50%) rotate(0deg);
	transform-origin:50% 50%;
}

.sm-vol-range{
	position:absolute;
	left:-9999px;
	top:-9999px;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none;
}

.sm-channel-wav{
	position:relative;
	overflow:hidden;
	width: calc(100% - 230px);
	height: 38px;
	border: 3px solid rgba(0,0,0,0.6);
	border-radius: 6px;
	-webkit-box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	-moz-box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
	box-shadow: inset 4px 2px 10px rgb(0 0 0 / 70%), inset -2px -2px 9px rgb(255 255 255 / 23%);
}

@media only screen and (max-width: 620px) {
	.sm-channel-wav{
		width: calc(100% - 210px);
	}
}

@media only screen and (max-width: 520px) {
	.sm-channel-wav{
		width: 100%;
		border: 2px solid rgba(0,0,0,0.6);
		height: 32px;
	}
}

.sm-channel-wave{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events:none;
}

.sm-pattern{
	position:relative;
	width: calc(100% - 240px);
	height: 26px;
	margin-left: 230px;
	border-radius: 6px;
	overflow:hidden;
	display:grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	gap: 2px;
	box-sizing:border-box;
}

@media only screen and (max-width: 620px) {
	.sm-pattern{
		width: calc(100% - 214px);
		margin-left: 200px;
	}
}

@media only screen and (max-width: 520px) {
	.sm-pattern{
		width: 100%;
		margin-left: 0;
		gap: 0;
	}
}

.sm-step{
	height:100%;
	border-radius:2px;
	cursor:pointer;
	background:rgba(0,0,0,0);
	transition:background 120ms linear;
	border: 2px solid #000;
	border-radius: 10px;
	width: 90%;
	height: 88%;
	box-shadow: inset 2px 2px 5px 1px #666;
}

.sm-step-on{
	background: rgba(255,186,0,0.85);
	box-shadow: 0px 0px 10px -1px #FFBA51, inset 2px 2px 6px 1px #FFDBA3;
	border: 2px solid rgba(0,0,0,0.6);
}

.sm-playhead{
	position:absolute;
	left:0;
	top:0;
	width:2px;
	height:100%;
	background:rgba(214,132,44,0.95);
	transform:translateX(-1px);
	pointer-events:none;
	opacity:0;
	-webkit-box-shadow: 0px 0px 7px 3px rgba(226,82,19,0.86), inset 0px 0px 7px 3px rgba(226,82,19,0.86);
	-moz-box-shadow: 0px 0px 7px 3px rgba(226,82,19,0.86), inset 0px 0px 7px 3px rgba(226,82,19,0.86);
	box-shadow: 0px 0px 7px 3px rgba(226,82,19,0.86), inset 0px 0px 7px 3px rgba(226,82,19,0.86);
}

#sm-footnote{
	margin-top:14px;
	font-size:12px;
	opacity:0.7;
	line-height:1.4;
}

@media(max-width:700px){
	#sm-bpm input[type="range"]{
		width:180px;
	}
}