/*
====================================================
Project Name	: © QR Studio - Abed
Version		: UNPKG 1.9.2 https://app.unpkg.com/qr-code-styling@1.9.2/files/lib
Developed	: 19 August 2026
Developer	: Abednego Dinarim Siregar / Microsoft 365 Copilot with GPT 5.6 Deep Think.
Lisensi		: You may not copy, steal, modify, reverse engineer, redistribute, sell, or use any part of the application, code, design, brand, or included materials without the owner’s written permission, except where expressly permitted by applicable law.
====================================================
*/
/* PARTICLE CSSIN START: styles for index */
:root{--bg:#f6f8fb;--soft:#fff;--card:rgba(255,255,255,.84);--text:#121826;--muted:#637083;--line:rgba(18,24,38,.1);--p:#2663ff;--p2:#7c3aed;--good:#0f9f6e;--bad:#dc2626;--shadow:0 24px 70px rgba(15,23,42,.12);--focus:0 0 0 4px rgba(38,99,255,.18)}[data-theme=dark]{--bg:#080b12;--soft:#0e1422;--card:rgba(17,24,39,.86);--text:#eef2ff;--muted:#9aa7bc;--line:rgba(238,242,255,.12);--p:#77a4ff;--p2:#c084fc;--good:#34d399;--bad:#fb7185;--shadow:0 24px 70px rgba(0,0,0,.38);--focus:0 0 0 4px rgba(119,164,255,.2)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(38,99,255,.2),transparent 32rem),radial-gradient(circle at top right,rgba(124,58,237,.18),transparent 30rem),linear-gradient(135deg,var(--bg),var(--soft))}.shell{width:min(1180px,calc(100% - 28px));margin:auto;padding:18px 0 28px}.top{position:sticky;top:10px;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;margin-bottom:24px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:0 10px 30px rgba(0,0,0,.12);backdrop-filter:blur(22px)}.brand{display:flex;align-items:center;gap:10px;font-weight:850}.logo{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--p),var(--p2))}.logo svg{width:27px}.tools{display:flex;gap:10px}.theme,.langbtn{display:flex;align-items:center;gap:9px;min-height:44px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--text);background:var(--card);font-weight:800}.custom{position:relative}.menu{position:absolute;right:0;top:calc(100% + 8px);display:none;min-width:190px;padding:7px;border:1px solid var(--line);border-radius:16px;background:var(--soft);box-shadow:var(--shadow)}.custom.open .menu{display:grid;gap:4px}.choice{display:flex;align-items:center;gap:9px;width:100%;padding:11px;border-radius:11px;color:var(--text);background:transparent;border:0;font-weight:750;text-align:left}.choice:hover,.choice.sel{color:#fff;background:linear-gradient(135deg,var(--p),var(--p2))}.flag{width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(127,127,127,.2)}.hero{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:24px}.card{padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:26px;background:var(--card);box-shadow:var(--shadow);backdrop-filter:blur(22px)}.intro{margin-bottom:24px}.eyebrow{color:var(--p);font-weight:800}h1{margin:14px 0 10px;font-size:clamp(2rem,5vw,4.5rem);line-height:.98;letter-spacing:-.065em}.lead,.hint,.note{color:var(--muted);line-height:1.65}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;margin:20px 0;border-radius:17px;background:color-mix(in srgb,var(--muted) 10%,transparent)}button,input,textarea{font:inherit}.tab,.btn{border:0;border-radius:13px;padding:11px;color:var(--muted);background:transparent;font-weight:800}.tab.on,.primary{color:#fff;background:linear-gradient(135deg,var(--p),var(--p2))}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{display:grid;gap:7px}.full{grid-column:1/-1}label{font-weight:750}input,textarea,.selectbtn{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:15px;color:var(--text);background:var(--soft);outline:0}input:focus,textarea:focus,.selectbtn:focus{border-color:var(--p);box-shadow:var(--focus)}textarea{min-height:110px;resize:vertical}.select{position:relative}.selectbtn{display:flex;justify-content:space-between;text-align:left;font-weight:700}.selectmenu{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 7px);display:none;padding:7px;border:1px solid var(--line);border-radius:15px;background:var(--soft);box-shadow:var(--shadow)}.select.open .selectmenu{display:grid}.opt{padding:10px;border:0;border-radius:10px;color:var(--text);background:transparent;text-align:left}.opt:hover,.opt.sel{color:#fff;background:linear-gradient(135deg,var(--p),var(--p2))}.preview{position:sticky;top:94px;align-self:start}.qrbox{display:grid;place-items:center;min-height:350px;padding:25px;border:1px solid var(--line);border-radius:22px}#qr{width:min(100%,320px)}#qr canvas,#qr svg{width:100%!important;height:auto!important;border-radius:16px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.btn{min-height:46px;color:var(--text);background:var(--soft);border:1px solid var(--line)}.btn.primary{color:#fff}.status{min-height:22px;color:var(--good)}.footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:24px;padding:17px 20px}.footlinks{display:flex;align-items:center;gap:10px}.footer a{color:var(--p);font-weight:800;text-decoration:none}.consentBtn{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:var(--soft);font-weight:750}.consentBtn svg{width:17px}.banner{position:fixed;z-index:60;left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;max-width:980px;margin:auto;padding:18px}.bannerBtns{display:flex;gap:8px;flex-wrap:wrap}.modalbg{position:fixed;z-index:70;inset:0;display:none;place-items:center;padding:18px;background:rgba(0,0,0,.45)}.modalbg.open{display:grid}.modal{width:min(560px,100%)}.hidden{display:none!important}@media(max-width:900px){.hero{grid-template-columns:1fr}.preview{position:relative;top:0}}@media(max-width:650px){.top{align-items:flex-start}.tools{flex-direction:column}.tabs,.grid,.actions{grid-template-columns:1fr}.banner{grid-template-columns:1fr}.footlinks{width:100%;justify-content:space-between}}

.arrow-icon{width:10px;height:10px;flex:0 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}.custom.open .arrow-icon,.select.open .arrow-icon{transform:rotate(225deg) translate(-2px,-2px)}
input[type=color]{display:block;width:100%;height:48px;padding:5px;border:1px solid var(--line);border-radius:15px;background:var(--soft);cursor:pointer;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:10px}input[type=color]::-moz-color-swatch{border:0;border-radius:10px}
.consent-options{display:grid;gap:10px;margin:18px 0}.consent-option{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--soft);cursor:pointer}.consent-option:has(input:checked){border-color:var(--p);box-shadow:var(--focus)}.consent-option input{width:18px;height:18px;margin-top:2px;accent-color:var(--p)}.consent-option strong{display:block}.consent-option small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}

.tab{position:relative;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.tab.on{transform:translateY(-2px) scale(1.025);box-shadow:0 8px 24px rgba(84,132,255,.34),0 0 22px rgba(168,100,255,.22);filter:saturate(1.08)}.panel:not(.hidden){animation:panelPop .22s ease both}.panel:not(.hidden) input:focus,.panel:not(.hidden) textarea:focus{transform:translateY(-1px);box-shadow:var(--focus),0 8px 22px rgba(38,99,255,.12)}@keyframes panelPop{from{opacity:.75;transform:translateY(4px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Liquid glass refinement: visual-only, keeps existing layout and behavior */
.top,.card,.menu,.selectmenu,.modal,.banner{isolation:isolate;overflow:visible;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 86%,rgba(255,255,255,.18)),color-mix(in srgb,var(--card) 70%,transparent));border-color:color-mix(in srgb,var(--line) 72%,rgba(255,255,255,.32));-webkit-backdrop-filter:blur(28px) saturate(155%);backdrop-filter:blur(28px) saturate(155%);box-shadow:0 22px 55px rgba(15,23,42,.14),inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(255,255,255,.08);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.top{overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 76%,rgba(255,255,255,.22)),color-mix(in srgb,var(--card) 58%,transparent));box-shadow:0 16px 44px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(255,255,255,.10)}
.top::before,.card::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 32%,transparent 56%,rgba(124,58,237,.08));opacity:.62}
.top::after{content:"";position:absolute;pointer-events:none;top:-120%;left:-28%;width:34%;height:340%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);animation:glassSheen 9s ease-in-out infinite}
.theme,.langbtn,.selectbtn,.btn,.consentBtn{background:linear-gradient(145deg,color-mix(in srgb,var(--soft) 76%,rgba(255,255,255,.18)),color-mix(in srgb,var(--soft) 62%,transparent));border-color:color-mix(in srgb,var(--line) 72%,rgba(255,255,255,.28));-webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 7px 20px rgba(15,23,42,.08);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease,background .25s ease}
.theme:hover,.langbtn:hover,.selectbtn:hover,.btn:hover,.consentBtn:hover{transform:translateY(-1px) scale(1.012);border-color:color-mix(in srgb,var(--p) 38%,var(--line));box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 11px 26px rgba(38,99,255,.13)}
.theme:active,.langbtn:active,.selectbtn:active,.btn:active,.consentBtn:active{transform:translateY(0) scale(.985)}
.menu,.selectmenu{overflow:hidden;animation:glassMenuIn .2s cubic-bezier(.2,.8,.2,1) both}.choice,.opt{transition:transform .18s ease,background .2s ease,box-shadow .2s ease}.choice:hover,.opt:hover{transform:translateX(2px)}
.qrbox,input,textarea,input[type=color]{background:linear-gradient(145deg,color-mix(in srgb,var(--soft) 86%,rgba(255,255,255,.15)),color-mix(in srgb,var(--soft) 72%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.035);transition:box-shadow .25s ease,border-color .25s ease,transform .2s ease}
input:focus,textarea:focus{box-shadow:var(--focus),inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px rgba(38,99,255,.12)}
[data-theme=dark] .top,[data-theme=dark] .card,[data-theme=dark] .menu,[data-theme=dark] .selectmenu,[data-theme=dark] .modal,[data-theme=dark] .banner{border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(255,255,255,.035)}
[data-theme=dark] .top::before,[data-theme=dark] .card::before{background:linear-gradient(115deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 34%,transparent 58%,rgba(124,58,237,.10))}
@keyframes glassSheen{0%,72%,100%{left:-38%;opacity:0}80%{opacity:.48}94%{left:120%;opacity:0}}
@keyframes glassMenuIn{from{opacity:0;transform:translateY(-7px) scale(.975);filter:blur(3px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.top::after{animation:none}.menu,.selectmenu{animation:none}.top,.card,.theme,.langbtn,.selectbtn,.btn,.consentBtn{transition:none}}

/* Targeted fixes: dropdown stacking and field validation */
.top{overflow:visible!important;z-index:100}.top::after{border-radius:inherit;clip-path:inset(0 round 22px)}.tools,.custom{position:relative;z-index:110}.custom.open{z-index:130}.custom .menu{z-index:140;overflow:hidden}.field-error{margin:2px 2px 0;color:var(--bad);font-size:.82rem;line-height:1.4}.invalid{border-color:var(--bad)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 18%,transparent)!important}.valid{border-color:color-mix(in srgb,var(--good) 62%,var(--line))!important}
.top::after{inset:0!important;top:0!important;left:0!important;width:auto!important;height:auto!important;transform:none!important;border-radius:inherit;background:linear-gradient(112deg,transparent 0%,transparent 34%,rgba(255,255,255,.30) 47%,transparent 60%,transparent 100%)!important;background-size:240% 100%!important;background-position:130% 0;animation:glassSheenContained 9s ease-in-out infinite!important}.card:has(.select.open){position:relative;z-index:80}.select.open{z-index:200}.select.open .selectmenu{z-index:210}.footer{position:relative;z-index:1}#qr.no-margin canvas,#qr.no-margin svg{border-radius:0!important}@keyframes glassSheenContained{0%,72%,100%{background-position:130% 0;opacity:0}80%{opacity:.48}94%{background-position:-130% 0;opacity:0}}@media(prefers-reduced-motion:reduce){.top::after{animation:none!important}}
/* iOS-inspired QR motion: smooth, restrained, and dependency-free */
.qrbox{position:relative;perspective:1600px;transform-style:preserve-3d;will-change:transform}
.qrbox.qr-flip-x{animation:qrFlipX 2.4s cubic-bezier(.25,.1,.25,1) both}
.qrbox.qr-flip-y{animation:qrFlipY 2.4s cubic-bezier(.25,.1,.25,1) both}
@keyframes qrFlipX{0%{transform:rotateY(0deg) scale(1)}18%{transform:rotateY(32deg) scale(.995)}50%{transform:rotateY(180deg) scale(.982)}82%{transform:rotateY(328deg) scale(.995)}100%{transform:rotateY(360deg) scale(1)}}
@keyframes qrFlipY{0%{transform:rotateX(0deg) scale(1)}18%{transform:rotateX(32deg) scale(.995)}50%{transform:rotateX(180deg) scale(.982)}82%{transform:rotateX(328deg) scale(.995)}100%{transform:rotateX(360deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.qrbox{will-change:auto}.qrbox.qr-flip-x,.qrbox.qr-flip-y{animation:none}}

/* Compact mobile header and footer navigation */
.lang-code{display:none}
@media(max-width:650px){
  .top{align-items:center;padding:8px 10px;gap:8px;border-radius:18px}
  .brand{gap:8px;font-size:.94rem;white-space:nowrap}.logo{width:38px;height:38px;border-radius:13px}.logo svg{width:23px}
  .tools{flex-direction:row;align-items:center;gap:7px}
  .theme,.langbtn{min-height:38px;padding:7px 10px;gap:7px}
  .langbtn .lang-name,.theme #themeText{display:none}.langbtn .lang-code{display:inline;font-size:.78rem;letter-spacing:.04em}
  .langbtn .flag{width:22px;height:15px}.langbtn .arrow-icon{width:8px;height:8px}
  .footlinks{justify-content:flex-start;gap:8px 12px;flex-wrap:wrap}.footer a{font-size:.78rem;line-height:1.35}.consentBtn{font-size:.78rem}
}

/* CHANGE 3dd23 START: mobile QR detail carousel */
.detail-carousel-controls{display:none}
@media(max-width:650px){
  .tabs{display:none}
  .detail-carousel{position:relative;overflow:hidden;touch-action:pan-y}
  .detail-carousel .panel{animation:none}
  .detail-carousel-controls{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:10px;margin:18px 0 2px}
  .carousel-arrow{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--text);background:var(--soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px rgba(15,23,42,.09);font-size:1.25rem;font-weight:900}
  .carousel-dots{display:flex;justify-content:center;align-items:center;gap:8px}
  .carousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--muted) 38%,transparent);transition:width .22s ease,background .22s ease}
  .carousel-dot.active{width:24px;border-radius:999px;background:linear-gradient(135deg,var(--p),var(--p2))}
}
/* CHANGE 3dd23 END */

/* CHANGE w87tf7 START: active feature label and animated desktop/tablet highlight */
.feature-current{display:none;align-items:center;justify-content:center;gap:9px;width:max-content;max-width:100%;margin:14px auto 12px;padding:8px 13px;border:1px solid color-mix(in srgb,var(--line) 70%,rgba(255,255,255,.35));border-radius:999px;color:var(--text);background:linear-gradient(145deg,color-mix(in srgb,var(--soft) 78%,rgba(255,255,255,.2)),color-mix(in srgb,var(--soft) 62%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px rgba(38,99,255,.1);font-size:.84rem;font-weight:850;letter-spacing:.01em}.feature-current::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 14%,transparent)}
@media(max-width:650px){.feature-current{display:flex}}
@media(min-width:651px){.tabs{position:relative;isolation:isolate}.tabs::before{content:"";position:absolute;z-index:-1;top:6px;bottom:6px;left:6px;width:calc((100% - 12px - 18px)/4);border-radius:13px;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 8px 24px rgba(84,132,255,.34),0 0 22px rgba(168,100,255,.22);transform:translateX(calc(var(--feature-index,0) * (100% + 6px)));transition:transform .42s cubic-bezier(.22,.8,.2,1),box-shadow .3s ease}.tabs .tab.on{background:transparent;box-shadow:none}.tabs .tab{z-index:1;transition:color .28s ease,transform .28s ease}.tabs .tab.on{color:#fff;transform:translateY(-1px) scale(1.015)}}
@media(prefers-reduced-motion:reduce){.tabs::before{transition:none}}
/* CHANGE w87tf7 END */
/* PARTICLE CSSIN END */