/* Direct shell extraction from page-paprika-client-preview.php at 1fbca878.
 * Preview image data is intentionally replaced by the site's Media Library background.
 * Keep rule order aligned with the source; the final block is the WP missing-data adapter.
 */
:root{color-scheme:light;--pepper:#ec5f68;--pepper-deep:#b13749;--pepper-hover:#dc4859;--sun:#ffd16a;--sun-light:#ffecc2;--leaf:#89b354;--ink:#513b32;--muted:#826f62;--paper:#fffaf0;--line:#efd9bc;--white:#fffdfa;--font:'Chiron GoRound TC','Noto Sans CJK TC','PingFang TC','Microsoft JhengHei',sans-serif;--shadow:0 8px 24px #72432124;--focus:#284f39;--bubble-size:68px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font);font-weight:500;background:#cbaa7b;min-width:0;line-height:1.55}
button,input,select,textarea{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
a{color:inherit}
img{display:block;max-width:100%}
button:disabled{cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
button,a{touch-action:manipulation}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.skip{position:fixed;top:-80px;left:20px;z-index:300;padding:12px 20px;background:var(--paper);border-radius:12px}
.skip:focus{top:12px}
.scene-background{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;pointer-events:none}
.scene-background::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#59210a0a,transparent 43%,#fff0d00d);box-shadow:inset 0 0 120px #63401b26}
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;width:5px;height:5px;background:#fff7c2;box-shadow:0 0 14px 4px #fffac7a0;border-radius:50%;animation:drift 8s ease-in-out infinite}
.ambient i:nth-child(1){left:14%;top:32%}
.ambient i:nth-child(2){left:34%;top:12%;animation-delay:-3s}
.ambient i:nth-child(3){left:65%;top:70%;animation-delay:-5s}
.ambient i:nth-child(4){left:90%;top:24%;animation-delay:-2s}
.ambient i:nth-child(5){left:5%;top:85%;animation-delay:-6s}
@keyframes drift{0%,100%{transform:translateY(12px);opacity:.2}50%{transform:translate(8px,-12px);opacity:.85}}
.world{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:12px;max-width:1620px;width:calc(100% - 124px);margin:28px 100px 20px 24px;min-height:calc(100svh - 64px)}
@media(min-width:1740px){.world{margin-inline:auto;width:calc(100% - 180px)}}
@media(min-width:1600px) and (max-height:820px){.world{margin-top:16px}}
@media(max-width:1599px){:root{--bubble-size:57px}.world{display:block;width:calc(100% - 40px);max-width:760px;margin:18px auto 20px;min-height:0}}
@media(max-width:600px){:root{--bubble-size:48px}.world{width:calc(100% - 22px);margin:10px auto 17px}}
@media(max-width:350px){:root{--bubble-size:44px}.world{width:calc(100% - 16px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ambient{display:none}}
/* PREVIEW-02 stage sizing, in its original cascade position. */
:root{--preview-stage-max:2800px;--preview-stage-width:min(var(--preview-stage-max),calc(100vw - clamp(132px,8.5vw,300px)));--preview-stage-left:max(clamp(24px,2vw,60px),calc((100vw - var(--preview-stage-max))/2))}
@media(min-width:1600px){:root{--bubble-size:clamp(4.25rem,4.5vw,5.5rem)}.world{width:var(--preview-stage-width);max-width:var(--preview-stage-max);margin:28px 0 20px var(--preview-stage-left);min-height:0}}
@media(min-width:1600px) and (max-height:820px){.world{margin-top:1rem}}
/* PREVIEW-06 scene sizing; TIME-01 uses the same Media Library scene at every hour. */
:root{--scene-focus:center;--scene-day-warmth:linear-gradient(0deg,#6332191a,#ffedbc0d);--scene-vignette:linear-gradient(90deg,#59210a0a,transparent 43%,#fff0d00d);--store-top-gap:max(24px,env(safe-area-inset-top));--store-bottom-gap:max(24px,env(safe-area-inset-bottom));--store-admin-gap:0px}
body.admin-bar{--store-admin-gap:32px}
@media(max-width:782px){body.admin-bar{--store-admin-gap:46px}}
.scene-background{background-position:var(--scene-focus)}
.scene-background::before{content:'';position:absolute;inset:0;background:var(--scene-day-warmth)}
.scene-background::after{background:var(--scene-vignette)}
@media(min-width:1600px){:root{--category-toolbar-gap:.875rem}html{scroll-padding-top:calc(4rem + var(--category-toolbar-gap) + var(--store-admin-gap))}.world{margin-top:0;margin-bottom:0;align-items:start;min-height:0}}
@media(max-width:1599px){:root{--scene-focus:32% center;--scene-vignette:#8a4d1212}}
@media(max-width:1599px){.world{margin-top:0}}
.scene-background::after{opacity:.7}
/* TIME-01 lighting tokens match page-paprika-client-preview.php exactly. */
:root{--pf-scene-wash:var(--scene-day-warmth);--pf-scene-vignette:var(--scene-vignette);--pf-scene-edge-shadow:inset 0 0 120px #63401b26;--pf-window-light:none;--pf-lamp-light:none;--pf-counter-light:none;--pf-keeper-beam:radial-gradient(ellipse at 45% 45%,#ffe5ab55,transparent 70%);--pf-keeper-front:none;--pf-keeper-rim:transparent}
html[data-pf-time="dawn"]{
 --pf-scene-wash:linear-gradient(112deg,#ffd5cc4d 0%,#fff2de48 48%,#ffe1c54a 100%);
 --pf-scene-vignette:linear-gradient(90deg,#f4b4a02b,transparent 55%,#ffe9c52e);
 --pf-scene-edge-shadow:inset 0 0 115px #a9706020;
 --pf-window-light:radial-gradient(ellipse 34% 52% at 84% 35%,#ffe2b67a,transparent 78%);
 --pf-lamp-light:radial-gradient(ellipse 18% 28% at 29% 10%,#ffe7c282,transparent 75%);
 --pf-keeper-beam:radial-gradient(ellipse 47% 44% at 50% 50%,#ffdbb78c 0%,#ffe8d062 42%,transparent 88%);
 --pf-keeper-front:radial-gradient(ellipse 46% 42% at 49% 43%,#ffe8d64a,transparent 76%);
 --pf-keeper-rim:#ffd7ac73;
}
html[data-pf-time="sunset"]{
 --pf-scene-wash:linear-gradient(105deg,#b34b4545 0%,#ee944f60 40%,#ffb45f69 100%);
 --pf-scene-vignette:linear-gradient(90deg,#733b4c30,transparent 48%,#b25a2b2e);
 --pf-scene-edge-shadow:inset 0 0 130px #75373a47;
 --pf-window-light:radial-gradient(ellipse 62% 75% at 78% 31%,#ffc56db8,transparent 73%),linear-gradient(116deg,transparent 27%,#ffd08473 72%,transparent 100%);
 --pf-lamp-light:radial-gradient(ellipse 18% 28% at 29% 10%,#ffe0a8c2,transparent 78%),radial-gradient(ellipse 13% 20% at 75% 4%,#ffd89082,transparent 78%);
 --pf-counter-light:radial-gradient(ellipse 33% 22% at 24% 79%,#ffbd6591,transparent 78%);
 --pf-keeper-beam:radial-gradient(ellipse 47% 44% at 50% 50%,#ffc876d2 0%,#ffd085a3 42%,transparent 88%);
 --pf-keeper-front:radial-gradient(ellipse 49% 48% at 52% 44%,#ffda915c,transparent 78%);
 --pf-keeper-rim:#ffc16cc4;
}
html[data-pf-time="night"]{
 --pf-scene-wash:linear-gradient(112deg,#10243f91 0%,#243b6180 48%,#102746a1 100%);
 --pf-scene-vignette:linear-gradient(90deg,#081a3d55,transparent 44%,#081a3d47);
 --pf-scene-edge-shadow:inset 0 0 170px #07163091;
 --pf-window-light:radial-gradient(ellipse 48% 60% at 90% 32%,#8aabd133,transparent 78%);
 --pf-lamp-light:radial-gradient(ellipse 19% 32% at 29% 10%,#ffe2a3b8,transparent 70%),radial-gradient(ellipse 15% 24% at 73% 5%,#ffc97954,transparent 76%);
 --pf-counter-light:radial-gradient(ellipse 35% 24% at 26% 79%,#ffc7764c,transparent 72%);
 --pf-keeper-beam:radial-gradient(ellipse 47% 44% at 50% 50%,#ffe0a170 0%,#6b92c868 48%,transparent 88%);
 --pf-keeper-front:radial-gradient(ellipse 49% 45% at 49% 43%,#fff1c447,transparent 75%);
 --pf-keeper-rim:#f5c77b94;
}
.scene-background::before{background:var(--pf-scene-wash)}
.scene-background::after{background:var(--pf-scene-vignette);box-shadow:var(--pf-scene-edge-shadow)}
.scene-lights{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--pf-window-light)}
.scene-lights::before,.scene-lights::after{content:'';position:absolute;inset:0;pointer-events:none}
.scene-lights::before{background:var(--pf-lamp-light)}
.scene-lights::after{background:var(--pf-counter-light)}
@media(min-width:1600px){.world{column-gap:clamp(2rem,2.3vw,3.5rem);grid-template-columns:minmax(0,36fr) minmax(0,64fr)}}
@media(min-width:1200px) and (max-width:1599px){.world{max-width:68rem}}
/* WordPress adapter: no valid SCF shopkeeper means the real catalogue fills the stage. */
.world--no-shopkeeper{grid-template-columns:minmax(0,1fr)}
.world--no-shopkeeper>.store{width:min(100%,73.75rem);margin-inline:auto}
@media(max-width:1599px){.world--no-shopkeeper>.store{width:100%}}