:root{
	--pagebg:#ffffff;
	--ink:#e9edf6;
	--panel:rgba(15,18,24,.70);
	--panel2:rgba(0,0,0,.35);
	--stroke:rgba(255,255,255,.16);
	--stroke2:rgba(255,255,255,.24);
	--blue:#58a6ff;
	--gold:#D4AF37;
	--shadow:0 18px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--pagebg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow:hidden}
#app{position:fixed;inset:0;overflow:hidden;background:var(--pagebg)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--pagebg)}
.center{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:100;background:radial-gradient(1200px 800px at 50% 40%, rgba(88,166,255,.10), rgba(0,0,0,0) 60%)}
.card{position:relative;pointer-events:none;width:min(520px,calc(100vw - 40px));border:1px solid var(--stroke);border-radius:18px;padding:16px;background:rgba(15,18,24,.62);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.title{font-weight:900;font-size:14px;letter-spacing:.2px}.sub{margin-top:6px;color:rgba(233,237,246,.72);font-size:12px;line-height:1.35}.bar{margin-top:12px;height:10px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}.bar>i{display:block;height:100%;width:0%;background:linear-gradient(90deg,rgba(88,166,255,.85),rgba(255,255,255,.95));border-radius:999px;transition:width .12s ease}
#timeLeftBox{position:absolute;top:10px;right:14px;font-size:11px;font-weight:900;color:rgba(233,237,246,.75);letter-spacing:.4px}
.err{position:absolute;left:12px;bottom:12px;right:12px;display:none;z-index:300;pointer-events:auto;border:1px solid rgba(255,80,80,.30);border-radius:16px;padding:12px;background:rgba(255,80,80,.08);color:#ffd5d5;font:12px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre-wrap;box-shadow:var(--shadow)}.err.show{display:block}
#toast{position:absolute;right:12px;bottom:12px;z-index:310;display:none;pointer-events:none;border:1px solid var(--stroke);border-radius:16px;padding:10px 12px;background:var(--panel);backdrop-filter:blur(12px);box-shadow:var(--shadow);color:#e9edf6;font-size:12px;font-weight:900}#toast.show{display:block}
.icons{position:absolute;top:12px;right:12px;display:flex;gap:10px;z-index:40;pointer-events:auto;align-items:center;flex-wrap:wrap;max-width:calc(100% - 124px);justify-content:flex-end}.iconBtn{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--stroke);background:var(--panel);box-shadow:0 10px 24px rgba(0,0,0,.35);backdrop-filter:blur(10px);cursor:pointer;user-select:none;font-weight:1000}.iconBtn:active{transform:translateY(1px)}.iconBtn.active{outline:2px solid rgba(255,255,255,.78);outline-offset:2px}.iconBtnWide{width:auto;padding:0 14px;font-size:12px;letter-spacing:.35px}
.dot{width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}.dot.gold{background:#D4AF37}.dot.silver{background:#C9CED6}.dot.bronze{background:#B87333}.dot.white{background:#fff;border-color:rgba(0,0,0,.35)}.dot.gray{background:#9CA3AF}.dot.black{background:#0B0E12}.matPicker{position:relative}.matMenu{position:absolute;top:46px;right:0;min-width:140px;display:none;padding:8px;border-radius:16px;border:1px solid var(--stroke);background:rgba(15,18,24,.82);backdrop-filter:blur(12px);box-shadow:var(--shadow);z-index:60}.matMenu.show{display:block}.matItem{width:100%;display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;border:1px solid transparent;background:transparent;color:#e9edf6;font-weight:900;font-size:12px;cursor:pointer}.matItem:hover,.matItem.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}.matItem .dot{width:14px;height:14px}.matSep{height:1px;margin:6px 2px;background:rgba(255,255,255,.10);border-radius:999px}
#imgDrop{position:absolute;left:12px;top:12px;width:100px;height:100px;border-radius:18px;border:1px dashed rgba(255,255,255,.35);background:rgba(15,18,24,.55);backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:50;display:grid;place-items:center;overflow:hidden;cursor:pointer;user-select:none;pointer-events:auto}#imgDrop.drag{border-color:rgba(88,166,255,.95);box-shadow:0 0 0 4px rgba(88,166,255,.18),0 10px 24px rgba(0,0,0,.35)}#imgDrop .ph{font-weight:900;font-size:12px;letter-spacing:.4px;color:rgba(233,237,246,.75)}#imgDrop img{display:none;width:100%;height:100%;object-fit:cover}#imgDrop.hasImg .ph{display:none}#imgDrop.hasImg img{display:block}#imgGear,#imgRegen{position:absolute;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-weight:900;line-height:1;border:1px solid var(--stroke);background:rgba(0,0,0,.45);backdrop-filter:blur(10px);cursor:pointer;user-select:none;pointer-events:auto;z-index:2}#imgGear{top:6px;left:6px;font-size:14px}#imgRegen{top:6px;right:6px;font-size:16px;display:none}#imgDrop.hasImg #imgRegen{display:grid}
#imgGear:hover,#imgRegen:hover{border-color:rgba(88,166,255,.95);box-shadow:0 0 0 4px rgba(88,166,255,.18),0 0 22px rgba(88,166,255,.38)}
#panWrap{position:absolute;left:12px;top:120px;height:min(45vh,320px);width:40px;z-index:12;pointer-events:auto;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(0,0,0,.35)}#panSlider{appearance:none;width:calc(min(45vh,320px) - 22px);height:4px;background:rgba(255,255,255,.18);border-radius:999px;transform:rotate(-90deg)}#panSlider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid rgba(88,166,255,.65);box-shadow:0 0 0 4px rgba(88,166,255,.18)}#panSlider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid rgba(88,166,255,.65);box-shadow:0 0 0 4px rgba(88,166,255,.18)}
.toolPanel,.textUI{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:90;display:none;pointer-events:auto;width:min(980px,calc(100vw - 24px));border:1px solid var(--stroke);border-radius:18px;background:rgba(15,18,24,.82);backdrop-filter:blur(12px);box-shadow:var(--shadow);padding:10px;color:#e9edf6}.toolPanel.show,.textUI.show{display:block}.toolHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.toolHead b{font-size:13px}.toolClose{width:30px;height:30px;border-radius:999px;border:1px solid var(--stroke);background:rgba(0,0,0,.25);color:#fff;font-weight:1000;cursor:pointer}.toolBtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}.toolBtns button,.scaleSize button,#toolbar button,#addTextBtn{border:1px solid var(--stroke);background:rgba(0,0,0,.28);color:#fff;border-radius:12px;padding:8px 10px;font-weight:900;cursor:pointer}.toolBtns button:hover,.scaleSize button:hover,#toolbar button:hover,#addTextBtn:hover{border-color:rgba(88,166,255,.70);box-shadow:0 0 0 3px rgba(88,166,255,.12)}.scaleSize{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:10px}.scaleSize button.active{border-color:rgba(212,175,55,.75);box-shadow:0 0 0 4px rgba(212,175,55,.12)}.scaleGrid{display:grid;grid-template-columns:auto 54px auto 62px auto minmax(120px,1fr);gap:8px;align-items:center}.scaleGrid input[type=text],.scaleGrid input:not([type=range]){height:30px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.24);color:#fff;border-radius:10px;padding:0 8px;font-weight:900}.scaleGrid input[type=range]{width:100%;accent-color:var(--gold)}
#boxesWrap{display:flex;align-items:flex-start;justify-content:center;gap:10px;flex-wrap:wrap}#boxes,#tboxStrip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.tbox{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--stroke);border-radius:16px;padding:8px}.tbox.active{border-color:rgba(88,166,255,.65);box-shadow:0 0 0 3px rgba(88,166,255,.22)}.tboxHeader{display:flex;align-items:center;gap:8px}.edit{min-width:170px;max-width:420px;padding:7px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);outline:none;line-height:20px;color:#fff;cursor:text}.dragHandle,.removeBtn{width:34px;height:34px;border-radius:12px;border:1px solid var(--stroke2);background:rgba(0,0,0,.35);display:grid;place-items:center;cursor:pointer;user-select:none;padding:0}.dragHandle{border-color:#ffd84d;cursor:grab;box-shadow:0 0 0 2px rgba(255,216,77,.18),0 0 16px rgba(255,216,77,.38)}.dragHandle:active{cursor:grabbing}.dragHandle .handIcon{font-size:20px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,216,77,.95));transform:translateY(-1px)}.dragHandle:hover{border-color:#ffe978;box-shadow:0 0 0 3px rgba(255,216,77,.22),0 0 22px rgba(255,216,77,.50)}.removeBtn{color:#ffb4b4;font-size:17px}.removeBtn:hover{border-color:rgba(255,90,90,.65);box-shadow:0 0 0 3px rgba(255,90,90,.20),0 0 16px rgba(255,90,90,.25)}#addTextBtn{width:42px;height:42px;border-radius:14px;color:#ffeb3b;font-size:28px;padding:0;line-height:1}#toolbar{position:relative;margin-top:10px;display:flex;flex-direction:column;gap:8px;align-items:center}#toolbar.collapsed .toolbarControls,#toolbar.collapsed #tboxStrip{display:none!important}#tbToggle{position:absolute;right:8px;top:-42px;width:36px;height:34px;padding:0}.toolbarControls{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.ctl{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:14px;border:1px solid var(--stroke);background:rgba(0,0,0,.25)}.ctl label{font-size:12px;color:rgba(255,255,255,.75)}select,input[type=number]{background:#111;border:1px solid rgba(255,255,255,.15);color:#fff;outline:none;font-size:14px;border-radius:8px;padding:5px}select option{background:#111;color:#fff}select{width:118px}input[type=number]{width:68px}.btnGroup{display:inline-flex;gap:6px;padding:6px;border-radius:14px;border:1px solid var(--stroke);background:rgba(0,0,0,.25)}.alignBtn.active,#underlineBtn.active{border-color:rgba(88,166,255,.55);box-shadow:0 0 0 2px rgba(88,166,255,.18) inset}.placing canvas{cursor:crosshair!important}
.trellisFuse{position:relative;border-radius:14px}.trellisFuse.isSel{outline:2px solid rgba(88,166,255,.95);outline-offset:2px;box-shadow:0 0 0 4px rgba(88,166,255,.18)}iframe.trellisThumb{pointer-events:none}
@media(max-width:720px){.icons{top:auto;bottom:12px;right:12px;max-width:calc(100% - 24px)}.toolPanel,.textUI{bottom:64px}.scaleGrid{grid-template-columns:auto 52px auto 58px auto}.scaleGrid input[type=range]{grid-column:2 / span 5}.edit{min-width:130px}.toolbarControls{max-height:42vh;overflow:auto}#settingsPanel{left:10px;right:10px;top:auto;bottom:10px;width:auto}.textUI.show~.center,.toolPanel.show~.center{display:none}}
#btnRepair {
	position: relative;
}

#btnRepair:hover {
	border-color: #58a6ff;
	box-shadow: 0 0 0 4px rgba(88,166,255,.18), 0 0 22px rgba(88,166,255,.38);
}
.edit {
	pointer-events: auto;
	user-select: text;
	-webkit-user-select: text;
}

#imgRegen {
	box-shadow: 0 0 0 2px rgba(34,197,94,.25), 0 0 18px rgba(34,197,94,.45);
	animation: regenGlow 1.5s ease-in-out infinite;
}

	#imgRegen.clicked {
		animation: none !important;
		box-shadow: 0 0 0 2px rgba(88,166,255,.12), 0 0 14px rgba(88,166,255,.28);
	}

@keyframes regenGlow {

	0% {
		box-shadow: 0 0 0 2px rgba(34,197,94,.20), 0 0 10px rgba(34,197,94,.25), 0 0 20px rgba(34,197,94,.18);
	}

	50% {
		box-shadow: 0 0 0 3px rgba(34,197,94,.45), 0 0 24px rgba(34,197,94,.85), 0 0 44px rgba(34,197,94,.65);
	}

	100% {
		box-shadow: 0 0 0 2px rgba(34,197,94,.20), 0 0 10px rgba(34,197,94,.25), 0 0 20px rgba(34,197,94,.18);
	}
}

#settingsPanel {
	position: fixed;
	left: 12px;
	top: 120px;
	width: min(600px,calc(100vw - 24px));
	max-height: calc(100vh - 132px);
	z-index: 102;
	display: none;
	pointer-events: auto;
	border: 1px solid var(--stroke);
	border-radius: 16px;
	background: rgba(15,18,24,.88);
	backdrop-filter: blur(12px);
	box-shadow: var(--shadow);
	padding: 10px;
	color: #e9edf6;
	overflow-y: auto;
	overflow-x: hidden
}

	#settingsPanel.show {
		display: block
	}

.spHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 0 8px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,.10)
}

.spTitle {
	font-weight: 900;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .35px
}

.spClose {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	border: 1px solid var(--stroke);
	background: rgba(0,0,0,.25);
	cursor: pointer
}

.spLine {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px
}

.spLineTop {
	justify-content: center;
	gap: 24px
}

.spCtl {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	max-width: 45%;
	min-width: 0
}

	.spCtl .spLabel {
		flex: 0 0 auto
	}

	.spCtl input[type=range] {
		flex: 1 1 auto;
		min-width: 0;
		accent-color: var(--blue);
		margin: 0
	}

.spLabel {
	font-weight: 900;
	font-size: 11px;
	color: rgba(233,237,246,.90);
	white-space: nowrap
}

.spVal {
	margin-left: 4px;
	color: rgba(233,237,246,.75)
}

.spSeedWrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px
}

#spSeed {
	width: 120px;
	height: 30px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(0,0,0,.20);
	color: #e9edf6;
	padding: 0 8px;
	font-weight: 900
}

.spRadio {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(0,0,0,.20);
	font-size: 11px;
	font-weight: 900;
	white-space: nowrap
}

.spPromptLine {
	display: block;
	margin-bottom: 10px
}

.spPromptWrap {
	width: 100%
}

#spPrompt {
	width: 100%;
	min-height: 100px;
	max-height: 200px;
	resize: vertical;
	border-radius: 10px;
	padding: 8px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(0,0,0,.20);
	color: #e9edf6;
	box-sizing: border-box
}

.spRadios {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap
}

.spEta {
	display: inline-flex;
	align-items: center;
	height: 30px;
	font-size: 11px;
	font-weight: 900;
	color: rgba(233,237,246,.90)
}

@media(max-width:640px) {
	.spLineTop {
		gap: 10px
	}

	.spCtl {
		max-width: none;
		flex: 1 1 100%
	}

	#spSeed {
		width: 100px
	}
}