@font-face{font-family:Tajawal;src:url('assets/sk_plugins/sk_ui/html/fonts/Tajawal-Medium.ttf')}*{box-sizing:border-box}body{margin:0;background:#0e1017;color:#ececf5;font-family:Tajawal,Arial,sans-serif;display:flex;height:100vh;overflow:hidden}button,input,select{font:inherit}aside{width:300px;flex-shrink:0;background:#171922;border-left:1px solid #2b2e3c;display:flex;flex-direction:column;padding:22px 16px}.brand{display:flex;align-items:center;gap:12px;padding-bottom:22px}.mark{font:bold 25px Arial;background:#d086fe;color:#1c0c28;border-radius:12px;padding:13px}h1{font-size:21px;margin:0 0 4px}small,footer,#counter{color:#9b9fb5;font-size:12px}input[type=search]{background:#10121a;border:1px solid #343747;color:white;border-radius:9px;padding:12px;width:100%}#counter{padding:14px 2px 7px}nav{overflow-y:auto;flex:1;padding-left:4px}nav h3{font-size:13px;color:#d086fe;margin:20px 7px 8px}nav button{display:block;width:100%;border:1px solid transparent;background:transparent;color:#cccfe0;text-align:right;padding:10px 12px;border-radius:8px;cursor:pointer;margin:3px 0}nav button:hover{background:#252836}nav button.active{background:#342441;color:#fff;border-color:#8958a7}nav button small{display:block;font:10px monospace;margin-top:5px;color:#858da5}footer{border-top:1px solid #2b2e3c;padding-top:14px;line-height:1.7;margin-top:16px}footer bdi{font:10px monospace}main{flex:1;min-width:0;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #292d3b;background:#14161f}h2{font-size:20px;margin:8px 0 0}.badge{font-size:11px;color:#bfa2d8;background:#34243e;border:1px solid #4b345b;padding:4px 8px;border-radius:5px}.controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}button,select,.color{border:1px solid #343849;border-radius:7px;background:#202330;color:#eee;padding:9px;cursor:pointer}.color{display:flex;align-items:center;gap:6px;font-size:12px}input[type=color]{width:24px;height:22px;padding:0;border:0;background:none;cursor:pointer}.origin{display:flex;align-items:center;gap:20px;padding:12px 24px;background:#181b25;min-height:65px;flex-wrap:wrap}.origin span{display:block;color:#8e96b0;font-size:11px;margin-bottom:5px}code{direction:ltr;display:block;text-align:left;font:11px Consolas,monospace;color:#d5cae2;user-select:all;overflow-wrap:anywhere}.path{flex:1;min-width:240px}.origin button{font-size:12px}.viewport{flex:1;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 30%,#334456 0,#293b46 30%,#182b31 58%,#14252a 100%)}.grid-bg{position:absolute;inset:0;opacity:.15;background-image:linear-gradient(#8190a933 1px,transparent 1px),linear-gradient(90deg,#8190a933 1px,transparent 1px);background-size:48px 48px}iframe{width:100%;height:100%;border:0;position:absolute;inset:0}#empty{position:absolute;inset:0;display:grid;place-items:center;color:#aab4c1}#notice{display:none;position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#181b27f0;color:#fff;padding:14px 24px;border:1px solid #b07dd6;border-radius:9px;max-width:80%;z-index:10;font-size:14px}.bottom{display:flex;justify-content:space-between;gap:18px;padding:11px 24px;background:#171a23;color:#9fa8bf;font-size:11px;line-height:1.6}#viewport:fullscreen{width:100vw;height:100vh}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#454055;border-radius:5px}@media(max-width:1050px){aside{width:225px}header{align-items:flex-start;flex-direction:column;padding:12px}.origin{padding:10px}.bottom{flex-direction:column;gap:4px}}@media(max-width:700px){aside{width:185px;padding:14px 9px}.controls{gap:4px}.controls>*{font-size:11px;padding:6px}.origin .path{min-width:100%}h1{font-size:16px}.mark{padding:10px}.brand{gap:7px}}
.origin .path,#copy-path{display:none}.origin{min-height:0}