/* The generator is scoped so gallery, game and shared navigation styles stay intact. */
#transparentGenerator {
    --blue:#3558b4;
    --ink:#26364d;
    --muted:#647187;
    --line:#dce2eb;
    color:var(--ink);
    font:15px/1.55 "Open Sans",Arial,sans-serif;
}
#transparentGenerator div, #transparentGenerator p, #transparentGenerator h1, #transparentGenerator h2, #transparentGenerator form {
    clear:none;
    padding:0;
    margin:0;
}
#transparentGenerator h1, #transparentGenerator h2 {
    font-family:inherit;
    font-weight:700;
}
#transparentGenerator .form {
    border:0;
    min-width:0;
}
#transparentGenerator {
    --blue:#3558b4;
    --ink:#26364d;
    --muted:#647187;
    --line:#dce2eb;
    --paper:#f5f6f7
}
#transparentGenerator * {
    box-sizing:border-box
}
#transparentGenerator button,
#transparentGenerator input,
#transparentGenerator select {
    font:inherit
}
#transparentGenerator button,
#transparentGenerator select {
    cursor:pointer
}
#transparentGenerator button:focus-visible,
#transparentGenerator input:focus-visible,
#transparentGenerator select:focus-visible,
#transparentGenerator summary:focus-visible {
    outline:3px solid #3558b4;
    outline-offset:3px
}
#transparentGenerator button {
    transition:background .12s
}
#transparentGenerator {
    max-width:970px;
    margin:0 auto 30px;
    padding:34px 36px 30px;
    background:#fff;
    border:1px solid #dedede;
    border-radius:20px
}
#transparentGenerator .eyebrow {
    font-size:11px;
    font-weight:700;
    letter-spacing:.13em;
    color:var(--blue);
    margin:0 0 8px
}
#transparentGenerator h1 {
    margin:0 0 8px;
    font-size:33px;
    line-height:1.2;
    letter-spacing:-.7px
}
#transparentGenerator p {
    margin:0
}
#transparentGenerator .lead {
    color:var(--muted);
    font-size:15px
}
#transparentGenerator .workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 342px;
    gap:30px;
    margin-top:30px
}
#transparentGenerator .form {
    grid-column:2;
    grid-row:1
}
#transparentGenerator .preview-column {
    grid-column:1;
    grid-row:1;
    min-width:0
}
#transparentGenerator .field-label {
    font-size:13px;
    font-weight:700;
    display:block;
    margin-bottom:8px
}
#transparentGenerator .dimensions {
    display:grid;
    grid-template-columns:1fr 18px 1fr;
    align-items:end;
    gap:10px
}
#transparentGenerator .dimension-field {
    display:flex;
    border:1px solid #bdc8d9;
    border-radius:8px;
    height:46px;
    background:#fff;
    align-items:center;
    overflow:hidden
}
#transparentGenerator .dimension-field:focus-within {
    outline:2px solid var(--blue);
    outline-offset:2px
}
#transparentGenerator .dimension-field input {
    border:0;
    padding:10px 0 10px 12px;
    width:100%;
    min-width:0;
    color:var(--ink);
    outline:0;
    font-weight:600
}
#transparentGenerator .dimension-field span {
    padding:0 12px 0 5px;
    color:var(--muted);
    font-size:12px
}
#transparentGenerator .times {
    align-self:end;
    margin-bottom:12px;
    color:#8b95a3;
    text-align:center
}
#transparentGenerator .preset-label {
    font-size:11px;
    color:var(--muted);
    margin:13px 0 7px
}
#transparentGenerator .presets {
    display:flex;
    flex-wrap:wrap;
    gap:6px
}
#transparentGenerator .presets button {
    font-size:11px;
    padding:6px 8px;
    border:1px solid var(--line);
    background:white;
    border-radius:5px;
    color:#536278;
    min-height:31px
}
#transparentGenerator .presets button:hover {
    border-color:#97a9cf;
    background:#f4f6fc
}
#transparentGenerator .presets button[aria-pressed=true] {
    border-color:#6d87c4;
    color:#274b9f;
    background:#eef2fb
}
#transparentGenerator .presets button:disabled {
    opacity:.5;
    cursor:not-allowed
}
#transparentGenerator .rule {
    border:0;
    border-top:1px solid #e5e9ef;
    margin:20px 0
}
#transparentGenerator .mode-tabs {
    display:flex;
    padding:4px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#f3f5f8;
    gap:3px
}
#transparentGenerator .mode-tabs button {
    border:0;
    border-radius:6px;
    background:transparent;
    color:#637087;
    padding:9px 5px;
    flex:1;
    font-size:12px;
    font-weight:600;
    min-height:40px
}
#transparentGenerator .mode-tabs button[aria-pressed=true] {
    background:white;
    box-shadow:0 1px 4px #26364d19;
    color:var(--blue)
}
#transparentGenerator .mode-hint {
    font-size:12px;
    color:var(--muted);
    margin:9px 0 0
}
#transparentGenerator .custom-controls {
    margin-top:14px
}
#transparentGenerator .color-line {
    display:flex;
    align-items:center;
    gap:10px
}
#transparentGenerator .picker-wrap {
    height:40px;
    width:44px;
    border:1px solid #bdc8d9;
    border-radius:7px;
    overflow:hidden;
    flex-shrink:0;
    padding:4px;
    background:#fff
}
#transparentGenerator .picker-wrap input {
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer
}
#transparentGenerator .hex {
    height:40px;
    min-width:0;
    width:100%;
    border:1px solid #bdc8d9;
    border-radius:7px;
    padding:8px 12px;
    color:var(--ink);
    font:14px ui-monospace,monospace
}
#transparentGenerator .opacity-heading {
    display:flex;
    justify-content:space-between;
    margin-top:15px;
    font-size:12px;
    font-weight:600
}
#transparentGenerator .opacity-heading output {
    color:var(--blue)
}
#transparentGenerator input[type=range] {
    width:100%;
    accent-color:var(--blue);
    margin:8px 0 0;
    cursor:pointer
}
#transparentGenerator .format-select {
    width:100%;
    height:43px;
    border:1px solid #bdc8d9;
    border-radius:7px;
    background:#fff;
    padding:8px 10px;
    color:var(--ink);
    font-size:13px
}
#transparentGenerator .format-note {
    margin:7px 0 17px;
    color:var(--muted);
    font-size:11px
}
#transparentGenerator .download {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:48px;
    padding:12px 10px;
    border:0;
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    font-size:14px;
    font-weight:700
}
#transparentGenerator .download:hover {
    background:#28458f
}
#transparentGenerator .download:disabled {
    background:#9ca9bf;
    cursor:wait
}
#transparentGenerator .local-note {
    font-size:11px;
    color:var(--muted);
    margin-top:10px;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px
}
#transparentGenerator svg {
    width:19px;
    height:19px;
    vertical-align:middle
}
#transparentGenerator .local-note svg {
    width:13px;
    height:13px
}
#transparentGenerator .preview-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    color:var(--muted);
    margin-bottom:10px
}
#transparentGenerator .preview-head strong {
    font-size:13px;
    color:var(--ink)
}
#transparentGenerator .preview-stage {
    height:328px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:#f2f4f7;
    border:1px solid #e1e5ec;
    border-radius:12px;
    overflow:hidden
}
#transparentGenerator .artboard {
    position:relative;
    width:100%;
    max-height:100%;
    border:1px solid #bdc6d3;
    background-color:#fff;
    background-image:conic-gradient(#dce1e7 25%,#fff 0 50%,#dce1e7 0 75%,#fff 0);
    background-size:20px 20px;
    box-shadow:0 3px 13px #26364d0b
}
#transparentGenerator .tint {
    position:absolute;
    inset:0
}
#transparentGenerator .preview-details {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:13px;
    font-size:12px
}
#transparentGenerator .alpha-badge {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:#416659
}
#transparentGenerator .alpha-badge i {
    display:block;
    width:6px;
    height:6px;
    background:#5a8c79;
    border-radius:50%
}
#transparentGenerator .checker-note {
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:18px;
    color:var(--muted);
    font-size:12px;
    padding:13px 14px;
    background:#f6f8fb;
    border-radius:8px
}
#transparentGenerator .checker-note svg {
    flex-shrink:0;
    width:16px;
    height:16px;
    margin-top:2px
}
#transparentGenerator .file-summary {
    margin-top:14px;
    color:#8490a1;
    font-size:10px;
    overflow-wrap:anywhere;
    line-height:1.6
}
#transparentGenerator .error {
    font-size:12px;
    color:#9c2732;
    background:#fff2f2;
    border:1px solid #e8bbc1;
    padding:9px 11px;
    border-radius:7px;
    margin-top:12px
}
#transparentGenerator .status {
    font-size:12px;
    color:#416659;
    margin-top:12px;
    min-height:0
}
#transparentGenerator .status:empty {
    display:none
}
#transparentGenerator [hidden] {
    display:none!important
}
#transparentGenerator .how {
    display:flex;
    gap:20px;
    padding-top:24px;
    margin-top:30px;
    border-top:1px solid var(--line)
}
#transparentGenerator .how h2 {
    font-size:16px;
    margin:0;
    min-width:155px
}
#transparentGenerator .steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:19px;
    flex:1
}
#transparentGenerator .step b {
    display:block;
    font-size:12px;
    color:#394d6a;
    margin-bottom:4px
}
#transparentGenerator .step p {
    font-size:11px;
    color:var(--muted)
}
#transparentGenerator .step-number {
    color:#8192b0;
    margin-right:6px
}
#transparentGenerator .reading {
    margin-top:30px;
    padding-top:25px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px
}
#transparentGenerator .reading h2 {
    font-size:17px;
    margin:0 0 10px
}
#transparentGenerator .reading .opacity-info {
    grid-column:1 / -1;
}
#transparentGenerator .reading p {
    font-size:12px;
    color:var(--muted)
}
#transparentGenerator .reading p+p {
    margin-top:10px
}
#transparentGenerator details {
    border-bottom:1px solid #e4e8ee;
    padding:11px 0;
    font-size:12px
}
#transparentGenerator details:first-of-type {
    padding-top:0
}
#transparentGenerator summary {
    font-weight:600;
    cursor:pointer
}
#transparentGenerator details p {
    margin:8px 0 0
}
@media(max-width:900px) {
    #transparentGenerator .workspace {
        grid-template-columns:minmax(0,1fr) 310px;
        gap:22px
    }
    #transparentGenerator {
        margin:0 12px 22px;
        padding:26px
    }
    #transparentGenerator .how {
        display:block
    }
    #transparentGenerator .how h2 {
        margin-bottom:14px
    }
}
@media(max-width:680px) {
    #transparentGenerator {
        padding:24px 18px;
        border-radius:15px
    }
    #transparentGenerator h1 {
        font-size:28px
    }
    #transparentGenerator .lead {
        font-size:13px
    }
    #transparentGenerator .workspace {
        display:flex;
        flex-direction:column;
        gap:23px;
        margin-top:24px
    }
    #transparentGenerator .form {
        display:block
    }
    #transparentGenerator .dimensions-section {
        order:0
    }
    #transparentGenerator .preview-column {
        order:3
    }
    #transparentGenerator .mode-section {
        order:1
    }
    #transparentGenerator .download-section {
        order:2
    }
    #transparentGenerator .form>.rule {
        display:none
    }
    #transparentGenerator .preview-stage {
        height:224px;
        padding:16px
    }
    #transparentGenerator .preview-details {
        font-size:11px
    }
    #transparentGenerator .checker-note {
        font-size:11px;
        margin-top:12px
    }
    #transparentGenerator .file-summary {
        display:none
    }
    #transparentGenerator .presets button {
        padding:6px 9px;
        font-size:11px;
        min-height:34px
    }
    #transparentGenerator .mode-tabs button {
        font-size:13px
    }
    #transparentGenerator .mode-section>.field-label {
        margin-bottom:8px
    }
    #transparentGenerator .download-section>.rule {
        margin-top:0
    }
    #transparentGenerator .how {
        margin-top:25px;
        padding-top:21px
    }
    #transparentGenerator .steps {
        grid-template-columns:1fr;
        gap:12px
    }
    #transparentGenerator .step b {
        margin-bottom:2px
    }
    #transparentGenerator .reading {
        grid-template-columns:1fr;
        gap:24px;
        margin-top:24px
    }
    #transparentGenerator .format-note {
        font-size:12px
    }
    #transparentGenerator .format-select {
        font-size:14px
    }
}
#transparentGenerator .no-script {
    margin-top:20px;
    padding:14px;
    background:#f5f7fb;
}
#transparentGenerator .download-retry {
    display:inline-block;
    color:var(--blue);
    text-decoration:underline;
    margin-top:8px;
}
#transparentGenerator .presets button {
    min-height:36px;
}
#transparentGenerator .dimensions input {
    height:44px;
}
#transparentGenerator .how h2 {
    margin:0;
}
@media(max-width:680px) {
    #transparentGenerator .form {
        order:0;
    }
    #transparentGenerator .preview-column {
        order:1;
    }
    #transparentGenerator .form>.rule {
        display:block;
    }
}