:root{font-family:"Courier New",ui-monospace,monospace;color:#172a3a;background:#e8e1d4;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(90deg,rgba(23,42,58,.05) 1px,transparent 1px),linear-gradient(rgba(23,42,58,.05) 1px,transparent 1px),#eee8dc;background-size:24px 24px}button,input{font:inherit}button{cursor:pointer}header{height:88px;display:flex;align-items:center;gap:16px;padding:14px clamp(18px,4vw,56px);border-bottom:2px solid #172a3a;background:#f4efe4}header .mark{display:grid;place-items:center;width:58px;height:58px;background:#172a3a;color:#f4efe4;font-weight:800;font-size:13px}h1{margin:0;font-size:clamp(20px,3vw,30px);letter-spacing:-1px}header p{margin:4px 0 0;font-size:12px}header button{margin-left:auto;border:2px solid #172a3a;background:#e45b35;color:white;padding:10px 14px;box-shadow:4px 4px 0 #172a3a}main{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:28px;padding:28px clamp(18px,4vw,56px) 48px;max-width:1500px;margin:auto}.controls{background:#f4efe4;border:2px solid #172a3a;box-shadow:8px 8px 0 rgba(23,42,58,.18);padding:22px;height:max-content}.field,.slider{display:block;border-bottom:1px dashed #8e8c85;padding:0 0 20px;margin-bottom:20px}.field>span,.slider>span,.exports span{display:flex;justify-content:space-between;font-size:11px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid #172a3a}.segmented button{border:0;border-right:1px solid #172a3a;background:transparent;padding:10px 4px;color:#172a3a}.segmented button:last-child{border:0}.segmented button.active{background:#172a3a;color:#fff}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.colors label{font-size:10px}.colors input{display:block;width:100%;height:44px;border:1px solid #172a3a;padding:3px;margin-top:5px;background:white}input[type=range]{width:100%;accent-color:#e45b35}.remember{display:flex;align-items:center;gap:5px;font-size:12px;margin-bottom:24px}.unit{background:#172a3a;color:#fff;padding:14px;display:flex;justify-content:space-between;align-items:center;font-size:11px}.unit strong{color:#ef8b5e}.preview-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.preview-head b{display:block;font-size:18px}.preview-head span{font-size:11px}.toggle{border:1px solid #172a3a;background:transparent;padding:8px 10px}.toggle.active{background:#172a3a;color:#fff}.canvas{position:relative;height:min(55vh,530px);min-height:330px;border:2px solid #172a3a;overflow:hidden;background-color:#f4efe4;box-shadow:8px 8px 0 rgba(23,42,58,.18)}#tileGuide{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.seams #tileGuide{border:2px dashed rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(23,42,58,.55)}.exports{margin-top:24px;border:2px solid #172a3a;background:#172a3a;color:#f4efe4;padding:16px;display:grid;grid-template-columns:130px 1fr auto;gap:14px;align-items:center}.segmented.small{grid-template-columns:1fr 1fr;border-color:#f4efe4}.segmented.small button{color:#f4efe4;border-color:#f4efe4;padding:7px}.segmented.small button.active{background:#f4efe4;color:#172a3a}pre{margin:0;overflow:auto;white-space:nowrap;font-size:11px;color:#f5a27c}.copy{border:1px solid #f4efe4;background:#e45b35;color:white;padding:10px 12px}#toast{position:fixed;right:24px;bottom:24px;background:#172a3a;color:white;padding:12px 16px;transform:translateY(100px);transition:.2s}#toast.show{transform:none}@media(max-width:820px){header{height:auto}header p{display:none}main{grid-template-columns:1fr;padding-top:20px}.canvas{min-height:300px;height:45vh}.exports{grid-template-columns:1fr}.controls{box-shadow:5px 5px 0 rgba(23,42,58,.18)}}