*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden=until-found])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;-moz-tab-size:2;-o-tab-size:2;tab-size:2}@media(prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role=button],[role=option]){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + .5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}:root{--color-main: hsl(200 70% 50%);--color-main-dark: light-dark(hsl(200 70% 32%), hsl(200 70% 78%));--color-main-light: light-dark(hsl(200 70% 93%), hsl(200 70% 18%));--color-main-border: light-dark( hsl(200 70% 40% / .35), hsl(200 70% 70% / .35) );--color-accent: light-dark(hsl(25 90% 50%), hsl(25 90% 65%));--color-secondary: light-dark(hsl(210 90% 20%), hsl(210 90% 25%));--color-font: light-dark(hsl(200 20% 12%), hsl(200 20% 88%));--color-font-muted: light-dark( hsl(200 20% 12% / .8), hsl(200 20% 88% / .8) );--color-bg: light-dark(hsl(200 20% 98%), hsl(200 20% 10%));--color-bg-card: light-dark(hsl(200 20% 96% / .5), hsl(200 20% 13% / .5));--color-bg-input: light-dark(hsl(200 20% 99%), hsl(200 20% 8%));--color-border: light-dark(hsl(200 15% 82% / .8), hsl(200 15% 28% / .8));--color-error: light-dark(hsl(0 70% 50%), hsl(0 70% 65%));--color-success: light-dark(hsl(150 55% 38%), hsl(150 55% 55%));--font-deco: "Yusei Magic", sans-serif;--font-maru: "Zen Maru Gothic", sans-serif;--transition: all .25s linear;--liquid-size-sp: clamp(.75rem, 4.444vw - .083rem, 1rem);--liquid-size-pc: clamp(.625rem, 1.172vw + .063rem, 1rem);--contents--sp: min(100%, 24.375rem);--contents--pc: min(100%, 80rem);--liquid-size: var(--liquid-size-sp);--contents: var(--contents--sp);--side-pad: .75rem}@media not (min-width:768px){:root{--liquid-size: var(--liquid-size-pc);--contents: var(--contents--pc);--side-pad: 2.25rem}}:root{scroll-behavior:smooth}body{background:linear-gradient(to bottom,#269dd91f 20%,#269dd9cc) fixed,var(--color-bg);font-size:1rem;font-family:var(--font-maru);color:var(--color-font);line-height:1.5;letter-spacing:.02em;transition:color .5s linear,background-color .5s linear}:where(img),:where(svg[role=img]){width:100%;height:100%;-o-object-fit:cover;object-fit:cover}a{text-decoration:none}button{box-sizing:border-box}summary{list-style:none}summary::-webkit-details-marker{display:none}.grecaptcha-badge{visibility:hidden}.l-body-wrapper{display:grid;position:relative;z-index:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"header" "main" "footer";min-height:100vh;overflow:clip}.l-body-wrapper:has(.l-aside){grid-template-columns:minmax(0,3fr) minmax(0,1fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"header" "main" "aside" "footer"}@media not (min-width:1024px){.l-body-wrapper:has(.l-aside){grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"header header" "main   aside" "footer footer"}}.l-header{grid-area:header;position:sticky;top:0;width:100%;z-index:25}.l-main{grid-area:main}.l-aside{grid-area:aside;align-self:start;position:sticky;top:0}.l-footer{grid-area:footer}.l-modals{position:fixed;top:0;z-index:-100;visibility:hidden}.l-background{position:fixed;top:0;width:100%;height:100vh;z-index:-10}.l-foreground{position:fixed;top:0;width:100%;height:100vh;z-index:55}.l-svg-mask{position:fixed;top:0;width:0;height:0;visibility:hidden;z-index:-100}.p-site-header{background:transparent;border-bottom:1px solid var(--color-border)}.p-site-header__inner{max-width:68.75rem;margin:0 auto;padding:.875rem var(--side-pad)}.p-site-header__title{font-family:var(--font-deco);font-size:.9375rem;font-weight:400;color:var(--color-font)}.p-qr-maker{max-width:68.75rem;margin:0 auto;padding:3rem var(--side-pad) 6.25rem}.p-qr-maker__header{margin-bottom:2.5rem}.p-qr-maker__title{font-family:var(--font-deco);font-size:1.625rem;font-weight:400;color:var(--color-font);margin-bottom:1.25rem}.p-qr-maker__guide{background:var(--color-bg-card);border:.125rem solid var(--color-main-border);border-radius:1.5em;padding:1rem 1.5rem;display:flex;align-items:baseline;gap:1.25rem}@media not (min-width:768px){.p-qr-maker__guide{flex-direction:column;gap:.625rem}}.p-qr-maker__guide-heading{font-family:var(--font-deco);font-size:1rem;font-weight:400;color:var(--color-main-dark);white-space:nowrap}.p-qr-maker__guide-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.25rem;counter-reset:guide-step}.p-qr-maker__guide-steps li{position:relative;padding-left:1.375rem;font-size:1rem;color:var(--color-font-muted);counter-increment:guide-step}.p-qr-maker__guide-steps li:before{content:counter(guide-step);position:absolute;left:0;top:.125rem;width:1rem;height:1rem;border-radius:50%;background:var(--color-main);color:#f9fafb;font-size:.625rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}.p-qr-maker__list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.p-qr-maker__actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.p-qr-maker__add-btn{display:inline-flex;align-items:center;padding:.5625rem 1.5rem;border:.125rem solid var(--color-main);border-radius:100vmax;background:var(--color-secondary);color:var(--color-main-dark);font-family:var(--font-deco);font-size:.875rem;font-weight:400;cursor:pointer;opacity:.8;transition:var(--transition)}@media(any-hover:hover){.p-qr-maker__add-btn:hover{opacity:1;background:var(--color-main);color:#f9fafb;box-shadow:0 0 .15rem .1rem var(--color-main-light)}}.p-qr-maker__generate-btn{display:inline-flex;align-items:center;padding:.5625rem 1.75rem;border:none;border-radius:100vmax;background:var(--color-accent);color:#f9fafb;font-family:var(--font-deco);font-size:.875rem;font-weight:400;cursor:pointer;opacity:.85;transition:var(--transition)}@media(any-hover:hover){.p-qr-maker__generate-btn:hover{opacity:1;box-shadow:0 0 .15rem .15rem var(--color-main-light)}}.p-qr-maker__generate-btn:active{opacity:.65}.p-qr-item{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;border:.125rem solid var(--color-border);border-radius:2em;background:var(--color-bg-card);transition:border-color .25s linear}@media not (min-width:768px){.p-qr-item{flex-direction:column;gap:1.25rem}}.p-qr-item.is-error{border-color:var(--color-error)}.p-qr-item.is-generated{border-color:var(--color-main-border)}.p-qr-item__input-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:.625rem}.p-qr-item__input-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.p-qr-item__label{display:flex;align-items:center;gap:.5rem;font-family:var(--font-deco);font-size:.75rem;font-weight:400;color:var(--color-font-muted);cursor:pointer}.p-qr-item__num{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--color-main-light);color:var(--color-main-dark);font-size:.6875rem;font-weight:700;line-height:1;flex-shrink:0}.p-qr-item__remove-btn{flex-shrink:0;padding:.25rem .75rem;border:.0625rem solid var(--color-border);border-radius:100vmax;background:transparent;color:var(--color-font-muted);font-size:.75rem;cursor:pointer;opacity:.7;transition:var(--transition)}.p-qr-item__remove-btn:disabled{opacity:.25;cursor:not-allowed}@media(any-hover:hover){.p-qr-item__remove-btn:hover:not(:disabled){opacity:1;border-color:var(--color-error);color:var(--color-error)}}.p-qr-item__input{width:100%;padding:.625rem .875rem;border:1px solid var(--color-font-muted);border-radius:.5em;font-size:.875rem;font-family:inherit;line-height:1.6;resize:vertical;outline:none;background:var(--color-bg-input);color:var(--color-font);opacity:.75;transition:var(--transition)}.p-qr-item__input:focus{opacity:1;border-color:var(--color-accent);box-shadow:0 0 0 2px #f26c0d33}.p-qr-item.is-error .p-qr-item__input{border-color:var(--color-error);opacity:1}.p-qr-item__error-msg{display:none;font-size:.75rem;color:var(--color-error)}.p-qr-item.is-error .p-qr-item__error-msg{display:block}.p-qr-item__color-col{width:10.625rem;flex-shrink:0;display:flex;flex-direction:column;gap:.875rem;padding-top:.25rem}@media not (min-width:768px){.p-qr-item__color-col{width:100%;flex-direction:row;gap:1rem;padding-top:0}}.p-qr-item__color-group{display:flex;flex-direction:column;gap:.375rem}@media not (min-width:768px){.p-qr-item__color-group{flex:1}}.p-qr-item__color-label{font-family:var(--font-deco);font-size:.75rem;font-weight:400;color:var(--color-font-muted)}.p-qr-item__color-ctrl{display:flex;align-items:center;gap:.375rem}.p-qr-item__color-picker{flex-shrink:0;width:2.375rem;height:2.25rem;padding:.125rem;border:1px solid var(--color-border);border-radius:.5em;cursor:pointer;background:none;transition:var(--transition)}.p-qr-item__color-picker:hover{border-color:var(--color-main)}.p-qr-item__color-picker::-webkit-color-swatch-wrapper{padding:0}.p-qr-item__color-picker::-webkit-color-swatch{border:none;border-radius:.1875rem}.p-qr-item__color-picker::-moz-color-swatch{border:none;border-radius:.1875rem}.p-qr-item__color-hex{flex:1;min-width:0;padding:.5rem;border:1px solid var(--color-border);border-radius:.5em;font-size:.75rem;font-family:monospace;outline:none;background:var(--color-bg-input);color:var(--color-font);opacity:.75;transition:var(--transition)}.p-qr-item__color-hex:focus{opacity:1;border-color:var(--color-accent);box-shadow:0 0 0 2px #f26c0d33}.p-qr-item__output-col{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:15rem;flex-shrink:0}@media not (min-width:768px){.p-qr-item__output-col{width:100%;max-width:16rem}}.p-qr-item__canvas-wrap{position:relative;width:15rem;height:15rem;border:.125rem solid var(--color-border);border-radius:1em;background:var(--color-bg-input);overflow:hidden;transition:border-color .25s linear}@media not (min-width:768px){.p-qr-item__canvas-wrap{width:100%;height:auto;aspect-ratio:1}}.p-qr-item.is-generated .p-qr-item__canvas-wrap{border-color:var(--color-main-border)}.p-qr-item__canvas{display:none;position:absolute;top:0;left:0;width:100%;height:100%}.p-qr-item.is-generated .p-qr-item__canvas{display:block}.p-qr-item__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--color-font-muted);text-align:center;padding:1rem;pointer-events:none}.p-qr-item.is-generated .p-qr-item__placeholder{display:none}.p-qr-item__dl-buttons{display:flex;gap:.5rem;opacity:.3;pointer-events:none;transition:opacity .25s linear}.p-qr-item.is-generated .p-qr-item__dl-buttons{opacity:1;pointer-events:auto}.p-qr-item__dl-btn{padding:.375rem 1rem;border:.0625rem solid var(--color-main-border);border-radius:100vmax;background:transparent;font-family:var(--font-deco);font-size:.75rem;font-weight:400;color:var(--color-main-dark);cursor:pointer;opacity:.8;transition:var(--transition)}@media(any-hover:hover){.p-qr-item__dl-btn:hover{opacity:1;background:var(--color-main);color:#f9fafb;border-color:var(--color-main)}}