html.pjo-locked,
body.pjo-locked {
    overflow: hidden !important;
}

.pjo-entry,
.pjo-entry * { box-sizing: border-box; }

.pjo-entry {
    --pjo-wall: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000;
    isolation: isolate;
    overflow: hidden;
    opacity: 1;
}

.pjo-stage,
.pjo-shards,
.pjo-flash {
    position: absolute;
    inset: 0;
}

.pjo-stage {
    background-image: var(--pjo-wall);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: contrast(1.02) saturate(1.03);
    transform: scale(1);
    transition: transform 1.4s ease, opacity .55s ease;
    cursor: pointer;
}

.pjo-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 44%, rgba(255,214,108,.08), transparent 24%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
    pointer-events: none;
}

.pjo-flash {
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 58% 50%, rgba(255,247,225,.98) 0, rgba(255,235,190,.84) 13%, rgba(255,214,120,.23) 28%, rgba(255,214,120,0) 52%),
        radial-gradient(circle at 82% 44%, rgba(255,222,132,.26), transparent 20%);
}

.pjo-brandmark {
    position: absolute;
    z-index: 8;
    left: clamp(18px, 4vw, 72px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(90px, 10vw, 150px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.42));
}

.pjo-brandmark-crown {
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1;
    color: #f0cb72;
    text-shadow: 0 0 10px rgba(255,211,117,.18), 0 2px 2px rgba(0,0,0,.5);
    margin-bottom: -3px;
}

.pjo-brandmark-ring {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(221,176,82,.86);
    background: radial-gradient(circle at 50% 28%, rgba(255,231,162,.14), rgba(255,231,162,0) 32%), linear-gradient(180deg, rgba(8,8,8,.42), rgba(0,0,0,.18));
    box-shadow: inset 0 0 0 1px rgba(255,227,156,.16), 0 0 0 1px rgba(0,0,0,.4);
}

.pjo-brandmark-letters {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2.65vw, 42px);
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(239,199,109,.92);
    text-shadow: 0 1px 0 rgba(255,239,196,.18), 0 -1px 0 rgba(0,0,0,.56);
}

.pjo-keypad {
    position: absolute;
    z-index: 8;
    right: clamp(18px, 4.2vw, 58px);
    top: 49.5%;
    transform: translateY(-50%);
    width: clamp(148px, 11vw, 192px);
    padding: 8px 8px 10px;
    color: rgba(239,199,109,.92);
    background:
        linear-gradient(180deg, rgba(12,12,12,.992), rgba(2,2,2,.997)),
        radial-gradient(circle at 50% 0%, rgba(255,224,145,.16), rgba(255,224,145,0) 34%),
        linear-gradient(135deg, rgba(255,224,145,.03), rgba(255,224,145,0) 46%);
    border: 1px solid rgba(195,146,52,.92);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.98),
        0 0 0 2px rgba(18,18,18,.96),
        0 0 0 4px rgba(203,151,53,.48),
        0 0 0 5px rgba(23,23,23,.9),
        inset 0 1px 0 rgba(255,236,191,.08),
        inset 0 16px 20px rgba(255,209,102,.028),
        inset 0 -18px 24px rgba(0,0,0,.44),
        0 16px 38px rgba(0,0,0,.42);
}

.pjo-keypad::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(214,161,58,.34);
    pointer-events: none;
}

.pjo-keypad::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -1px;
    left: 50%;
    width: 20px;
    height: 7px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(62,48,27,.95), rgba(18,14,9,.92));
    border-left: 1px solid rgba(187,140,47,.52);
    border-right: 1px solid rgba(187,140,47,.52);
    border-bottom: 1px solid rgba(187,140,47,.42);
}

.pjo-display {
    position: relative;
    border: 1px solid rgba(194,145,50,.66);
    border-radius: 5px;
    min-height: 54px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.97), rgba(8,8,8,.995)),
        linear-gradient(135deg, rgba(255,222,142,.03), rgba(255,222,142,0) 44%);
    box-shadow: inset 0 0 0 1px rgba(255,225,151,.03), inset 0 2px 8px rgba(0,0,0,.82);
    padding: 7px 7px 6px;
}

.pjo-display-window {
    border: 1px solid rgba(193,145,49,.72);
    border-radius: 4px;
    min-height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(8px, .7vw, 11px);
    letter-spacing: .38em;
    color: #f2ca72;
    background: linear-gradient(180deg, rgba(8,8,8,.97), rgba(2,2,2,.995));
    box-shadow: inset 0 0 0 1px rgba(255,228,156,.02);
}

.pjo-display-status,
.pjo-display-message {
    text-align: center;
    text-transform: uppercase;
}

.pjo-display-status {
    margin-top: 5px;
    font-size: clamp(4.8px, .36vw, 6px);
    letter-spacing: .22em;
    color: rgba(244,202,114,.95);
}

.pjo-display-message {
    margin-top: 4px;
    min-height: 1.1em;
    font-size: clamp(4px, .34vw, 5.5px);
    letter-spacing: .15em;
    color: rgba(231,187,83,.72);
}

.pjo-led {
    position: absolute;
    right: 7px;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8b6d23;
    box-shadow: 0 0 0 1px rgba(255,223,144,.16);
}

.pjo-keypad.led-ready .pjo-led { background: #d5a73c; box-shadow: 0 0 10px rgba(241,196,82,.36); }
.pjo-keypad.led-success .pjo-led,
.pjo-keypad.led-opening .pjo-led { background: #f1c66e; box-shadow: 0 0 14px rgba(255,225,145,.54); }
.pjo-keypad.led-error .pjo-led { background: #d86a4d; box-shadow: 0 0 12px rgba(221,108,86,.44); }

.pjo-pad-shell {
    margin-top: 8px;
    padding: 7px;
    border: 1px solid rgba(191,143,49,.66);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(10,10,10,.98), rgba(2,2,2,.995)),
        linear-gradient(135deg, rgba(255,222,142,.02), rgba(255,222,142,0) 48%);
    box-shadow: inset 0 0 0 1px rgba(255,227,155,.02), inset 0 2px 8px rgba(0,0,0,.78);
}

.pjo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.pjo-key {
    appearance: none;
    border: 1px solid rgba(189,142,48,.76);
    border-radius: 5px;
    min-height: 26px;
    background:
        linear-gradient(180deg, rgba(12,12,12,.96), rgba(4,4,4,.995)),
        linear-gradient(135deg, rgba(255,225,144,.05), rgba(255,225,144,0) 46%);
    color: rgba(239,199,109,.92);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(10px, .92vw, 15px);
    font-weight: 500;
    box-shadow:
        inset 0 1px 0 rgba(255,233,178,.08),
        inset 0 -1px 0 rgba(0,0,0,.72),
        0 1px 2px rgba(0,0,0,.26);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    padding: 0;
}

.pjo-key:hover,
.pjo-key:focus-visible,
.pjo-open-btn:hover,
.pjo-open-btn:focus-visible {
    outline: none;
    filter: brightness(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255,233,178,.11),
        inset 0 -1px 0 rgba(0,0,0,.72),
        0 0 12px rgba(240,195,83,.18);
}

.pjo-key:active,
.pjo-open-btn:active { transform: translateY(1px); }

.pjo-open-btn {
    width: 100%;
    margin-top: 5px;
    appearance: none;
    border: 1px solid rgba(189,142,48,.82);
    border-radius: 5px;
    min-height: 30px;
    background:
        linear-gradient(180deg, rgba(16,16,16,.97), rgba(5,5,5,.997)),
        linear-gradient(135deg, rgba(255,225,144,.08), rgba(255,225,144,0) 48%);
    color: #ffd98c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(9px, .72vw, 12px);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,233,178,.08),
        inset 0 -1px 0 rgba(0,0,0,.72),
        0 1px 2px rgba(0,0,0,.26);
}

.pjo-caption {
    margin-top: 5px;
    text-align: center;
    font-size: clamp(4px, .32vw, 5.2px);
    line-height: 1.32;
    letter-spacing: .14em;
    color: rgba(229,186,83,.82);
    text-transform: uppercase;
}

.pjo-title {
    margin-top: 5px;
    text-align: center;
    font-size: clamp(7px, .52vw, 9px);
    letter-spacing: .16em;
    color: rgba(239,199,109,.92);
    text-transform: uppercase;
}

.pjo-keypad.is-error .pjo-display-status,
.pjo-keypad.is-error .pjo-display-message { color: #ef987f; }

.pjo-keypad.is-success .pjo-display-status,
.pjo-keypad.is-success .pjo-display-message,
.pjo-keypad.led-opening .pjo-display-status,
.pjo-keypad.led-opening .pjo-display-message { color: #f6d487; }

.pjo-shards {
    z-index: 4;
    pointer-events: none;
}

.pjo-shard {
    position: absolute;
    background-image: var(--pjo-wall);
    background-repeat: no-repeat;
    opacity: 0;
    will-change: transform, opacity, filter;
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
    filter: brightness(1);
}

.pjo-entry.is-opening .pjo-stage { opacity: 0; transform: scale(1.03); }
.pjo-entry.is-opening .pjo-keypad,
.pjo-entry.is-opening .pjo-brandmark { opacity: 0; transform: translateY(-50%) scale(.97); transition: opacity .26s ease, transform .26s ease; }
.pjo-entry.is-opening .pjo-flash { animation: pjoFlash 1.25s ease forwards; }
.pjo-entry.is-opening .pjo-shard { animation: pjoShatter var(--dur) cubic-bezier(.2,.78,.16,1) forwards; animation-delay: var(--delay); }

@keyframes pjoFlash {
    0% { opacity: 0; }
    12% { opacity: .82; }
    48% { opacity: .34; }
    100% { opacity: 0; }
}

@keyframes pjoShatter {
    0% { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(0deg); filter: brightness(1.06); }
    16% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(var(--scale)) rotate(var(--rot)); filter: brightness(1.24) blur(1px); }
}

@media (max-width: 900px) {
    .pjo-keypad { right: 12px; width: 152px; }
    .pjo-brandmark { left: 12px; width: 104px; }
}

@media (max-width: 640px) {
    .pjo-keypad {
        right: 10px;
        top: auto;
        bottom: 5.2vh;
        transform: none;
        width: 140px;
        padding: 8px 7px 12px;
    }
    .pjo-keypad::before { inset: -4px; }
    .pjo-brandmark { left: 8px; top: 13px; transform: none; width: 78px; }
    .pjo-entry.is-opening .pjo-keypad { transform: scale(.97); }
    .pjo-key { min-height: 24px; font-size: 12px; }
    .pjo-open-btn { min-height: 26px; font-size: 10px; }
}


.pjo-key {
    background: linear-gradient(180deg, rgba(20,20,20,.99), rgba(4,4,4,.997));
    box-shadow: inset 0 1px 0 rgba(255,233,178,.12), inset 0 -2px 3px rgba(0,0,0,.84), 0 1px 2px rgba(0,0,0,.36), 0 0 0 1px rgba(255,217,125,.04);
}

.pjo-open-btn {
    background: linear-gradient(180deg, rgba(28,28,28,.99), rgba(6,6,6,.997));
    box-shadow: inset 0 1px 0 rgba(255,233,178,.14), inset 0 -2px 3px rgba(0,0,0,.84), 0 1px 2px rgba(0,0,0,.34);
}


/* ===== v2.0.5 exact artwork overlay remake ===== */
.pjo-brandmark { display:none !important; }
.pjo-keypad {
    position:absolute;
    z-index:8;
    left:82.54%;
    top:23.38%;
    width:11.36%;
    height:34.96%;
    transform:none !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#f0cb72;
}
.pjo-keypad::before,.pjo-keypad::after,.pjo-caption,.pjo-title,.pjo-display-status,.pjo-display-message,.pjo-led { display:none !important; }
.pjo-display,.pjo-pad-shell { position:static; margin:0; padding:0; border:none !important; background:transparent !important; box-shadow:none !important; min-height:0; }
.pjo-display-window {
    position:absolute;
    left:23.8%; top:6.5%; width:55.8%; height:10.0%; min-height:0;
    border:none !important; background:transparent !important; box-shadow:none !important;
    font-family:Georgia, "Times New Roman", serif; font-size:clamp(10px,.8vw,15px); letter-spacing:.46em; color:rgba(244,204,108,.95); text-shadow:0 0 8px rgba(255,214,120,.28);
}
.pjo-grid {
    position:absolute; left:16.8%; top:26.5%; width:66.8%; height:42.6%;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); gap:5.2% 7.3%;
}
.pjo-key {
    min-height:0 !important; width:100%; height:100%; padding:0; appearance:none;
    border:none !important; border-radius:7px; background:transparent !important; box-shadow:none !important; color:transparent !important; cursor:pointer;
}
.pjo-open-btn {
    position:absolute; left:13.5%; top:76.0%; width:73.0%; height:14.2%; margin:0; padding:0;
    appearance:none; border:none !important; border-radius:10px; background:transparent !important; box-shadow:none !important; color:transparent !important; cursor:pointer;
}
.pjo-key:hover,.pjo-key:focus-visible,.pjo-open-btn:hover,.pjo-open-btn:focus-visible { outline:none; filter:none; box-shadow:none !important; }
.pjo-key:active,.pjo-open-btn:active { transform:none !important; }
@media (max-width:900px){ .pjo-keypad{left:81.5%; top:24%; width:12.8%; height:35.6%;} .pjo-display-window{font-size:clamp(9px,.95vw,13px);} }
@media (max-width:640px){ .pjo-keypad{left:79.8%; top:25.2%; width:15.8%; height:36.8%;} .pjo-display-window{font-size:clamp(8px,1.8vw,11px);} }


/* ===== v2.0.8 embedded transparent crest/keypad restart ===== */
.pjo-brandmark {
    left: 5.1% !important;
    top: 25.4% !important;
    transform: none !important;
    width: clamp(170px, 17vw, 280px) !important;
    aspect-ratio: 326 / 460;
    background: url("./pjt-crest-embed.png") center center / contain no-repeat !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.32));
}
.pjo-brandmark > * { display:none !important; }

.pjo-keypad {
    right: clamp(24px, 4vw, 56px) !important;
    top: 49.4% !important;
    transform: translateY(-50%) !important;
    width: clamp(180px, 14vw, 250px) !important;
    aspect-ratio: 398 / 662;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}
.pjo-keypad::before, .pjo-keypad::after { display:none !important; }
.pjo-keypad-art {
    position:absolute; inset:0;
    background: url("./pjt-keypad-embed.png") center center / contain no-repeat;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.26)) brightness(1.03) contrast(1.03);
    pointer-events:none;
}
.pjo-display, .pjo-pad-shell { display:none !important; }
.pjo-caption, .pjo-title {
    position:absolute !important;
    left: 10% !important; width: 80% !important; text-align:center;
    font-family: Arial, sans-serif; text-transform: uppercase;
    color: rgba(239,199,109,.90);
    text-shadow: 0 0 8px rgba(0,0,0,.5);
    pointer-events:none;
}
.pjo-caption { bottom: 11.5% !important; font-size: clamp(4px,.36vw,6px) !important; letter-spacing: .16em; opacity:.0 !important; }
.pjo-title { bottom: 7.4% !important; font-size: clamp(7px,.62vw,10px) !important; letter-spacing: .18em; opacity:0 !important; }
.pjo-display-window {
    position:absolute !important; left: 19.3% !important; top: 10.2% !important; width: 60.6% !important; height: 7.2% !important;
    display:flex; align-items:center; justify-content:center;
    background: transparent !important; border: 0 !important; box-shadow:none !important;
    font-size: clamp(8px,.8vw,12px) !important; letter-spacing: .38em !important; color:#f2ca72 !important;
    text-shadow: 0 0 6px rgba(255,220,128,.15);
    pointer-events:none; z-index:2;
}
.pjo-display-status {
    position:absolute !important; left: 18%; top: 19.1%; width: 64%; text-align:center;
    font-size: clamp(4px,.33vw,5.5px) !important; letter-spacing:.18em; color: rgba(244,202,114,.0) !important;
    pointer-events:none; z-index:2;
}
.pjo-display-message {
    position:absolute !important; left: 18%; top: 20.8%; width: 64%; text-align:center;
    font-size: clamp(4px,.31vw,5px) !important; letter-spacing:.12em; color: rgba(231,187,83,0) !important;
    pointer-events:none; z-index:2;
}
.pjo-led {
    position:absolute !important; right: 22.5%; top: 11.6%; width: 4px; height:4px; border-radius:50%;
}
.pjo-grid {
    position:absolute !important; left: 13.7% !important; top: 31.2% !important; width: 72.5% !important; height: 39.2% !important;
    display:grid; grid-template-columns:repeat(3,1fr); gap: 6.2% 9.0%; z-index:3;
}
.pjo-key {
    min-height: 0 !important; width:100%; height:100%; padding:0 !important;
    background: transparent !important; border: 0 !important; box-shadow:none !important; border-radius:12px !important;
    color: transparent !important; font-size:0 !important; cursor:pointer;
}
.pjo-key:hover, .pjo-key:focus-visible, .pjo-open-btn:hover, .pjo-open-btn:focus-visible {
    filter:none !important; outline:none; box-shadow:none !important;
}
.pjo-open-btn {
    position:absolute !important; left: 14.7% !important; top: 80.4% !important; width: 70.6% !important; height: 10.8% !important;
    background: transparent !important; border:0 !important; box-shadow:none !important; color:transparent !important; font-size:0 !important;
    border-radius: 12px !important; z-index:3; cursor:pointer;
}
@media (max-width: 767px) {
    .pjo-brandmark { left: 4.2% !important; top: 30.5% !important; width: clamp(115px, 23vw, 180px) !important; }
    .pjo-keypad { width: clamp(125px, 24vw, 175px) !important; right: clamp(10px, 3vw, 18px) !important; }
    .pjo-grid { gap: 5.5% 8.2% !important; }
}