@font-face { font-family:"JOHS DM Sans"; src:url("assets/joss/DM-Sans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"JOHS DM Sans"; src:url("assets/joss/DM-Sans-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
.project-panel.joss-panel { min-height:0; padding:0; }
.project-panel.joss-panel:not([hidden]) { display:block; }

.joss-demo { --joss-green:#1b8a57; --joss-progress:0%; position:relative; isolation:isolate; container-type:inline-size; width:100%; height:620px; overflow:hidden; color:#f1f7f2; background:#091f17; font-family:"JOHS DM Sans",Arial,sans-serif; }
.joss-ambient { position:absolute; z-index:-1; inset:0; overflow:hidden; background:radial-gradient(ellipse at 78% 45%,#245d40 0%,#123524 43%,#091f17 80%); }
.joss-ambient-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgb(180 225 194 / 13%) 1px,transparent 1px),linear-gradient(90deg,rgb(180 225 194 / 13%) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,transparent,#000); animation:joss-grid-drift 42s linear infinite; }
.joss-ambient-glow { position:absolute; width:65%; aspect-ratio:1; right:0; top:-8%; border-radius:50%; background:radial-gradient(circle,rgb(158 213 139 / 12%),transparent 66%); animation:joss-glow 12s ease-in-out infinite alternate; }
.joss-presentation { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.9fr); align-items:center; gap:28px; height:calc(100% - 54px); padding:28px 32px 20px; }
.joss-copy { position:relative; z-index:2; min-width:0; }
.joss-wordmark { display:block; width:106px; height:auto; margin-bottom:24px; }
.joss-copy h3 { margin:0; color:#f1f7f2; font-size:clamp(32px,4cqw,48px); font-weight:700; line-height:1.06; letter-spacing:-.055em; text-align:left; }
.joss-demo[data-scene="intro"] .joss-copy h3 { font-size:clamp(36px,4.6cqw,56px); }
.joss-copy h3 em { color:#9fe3b8; font-style:normal; }
.joss-copy > p { max-width:320px; margin:22px 0 0; color:#b0c6b7; font-size:15px; line-height:1.75; }
.joss-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.joss-tags > span { padding:5px 9px; border:1px solid rgb(184 225 198 / 18%); border-radius:5px; color:#adcab8; font-size:10px; }
.joss-stage { position:relative; width:100%; min-width:0; height:480px; perspective:1300px; }
.joss-intro { position:absolute; inset:0; opacity:0; transform:translateY(20px) scale(.94); transition:opacity .5s,transform .8s; pointer-events:none; }
.joss-demo[data-scene="intro"] .joss-intro { opacity:1; transform:translateY(0) scale(1); }
.joss-product-orbit { position:absolute; left:50%; top:48%; width:90%; aspect-ratio:1; border:1px solid rgb(193 228 169 / 12%); border-radius:50%; translate:-50% -50%; box-shadow:0 0 0 28px rgb(193 228 169 / 2%); }
.joss-product-card { position:absolute; overflow:hidden; border:1px solid rgb(255 255 255 / 55%); border-radius:20px; background:#f9faf7; box-shadow:0 25px 50px rgb(0 0 0 / 24%); }
.joss-product-card > img { display:block; width:100%; height:calc(100% - 43px); object-fit:cover; mix-blend-mode:multiply; }
.joss-product-back { top:27%; width:33%; height:58%; }
.joss-product-back > span { display:block; padding:12px 10px; color:#6b756a; font-size:11px; text-align:center; }
.joss-product-left { left:1%; transform:rotate(-10deg); opacity:.66; }
.joss-product-right { right:1%; transform:rotate(10deg); opacity:.66; }
.joss-product-main { left:23%; top:7%; z-index:1; width:54%; height:81%; animation:joss-product-float 7s ease-in-out infinite alternate; }
.joss-product-main > div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 17px; color:#273f2e; font-size:12px; font-weight:700; }
.joss-product-main small { display:block; margin-top:4px; color:#85907f; font-size:9px; font-weight:400; }
.joss-product-main > div > span:last-child { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#2d7450; background:#e5efdf; font-size:17px; }
.joss-intro-note { position:absolute; z-index:2; right:1%; bottom:28px; display:flex; align-items:center; gap:10px; padding:13px 17px; border:1px solid rgb(177 222 164 / 25%); border-radius:10px; background:rgb(15 48 31 / 90%); color:#d7eed9; backdrop-filter:blur(12px); box-shadow:0 10px 25px rgb(0 0 0 / 15%); font-size:12px; }
.joss-intro-note > span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#7ab68a; color:#13331e; font-weight:700; }
.joss-intro-note small { display:block; margin-top:4px; color:#91b99a; font-size:10px; }

.joss-app { position:absolute; inset:0; overflow:hidden; border:1px solid rgb(224 239 222 / 55%); border-radius:15px; color:#1f2922; background:#fff; box-shadow:0 25px 50px rgb(0 0 0 / 28%); transform:rotateY(-3deg) rotateX(1deg); transition:opacity .6s,transform .85s; }
.joss-demo[data-scene="intro"] .joss-app { opacity:0; transform:translateY(15px) scale(.93); pointer-events:none; }
.joss-app-bar { display:flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-bottom:1px solid #e8ece7; color:#8b958b; background:#fafbf8; font-size:9px; }
.joss-app-dot { width:5px; height:5px; border-radius:50%; background:#b4c5b8; }
.joss-session { display:flex; align-items:center; gap:5px; margin-left:auto; color:#6e9c7e; font-size:8px; white-space:nowrap; }
.joss-session i { width:4px; height:4px; border-radius:50%; background:#4d9d68; }
.joss-app-body { display:grid; grid-template-columns:62px minmax(0,1fr); height:calc(100% - 36px); }
.joss-sidebar { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:10px 0 10px 8px; padding:17px 5px 10px; border:1px solid #e7ebe5; border-radius:20px; background:#f5f5f4; box-shadow:0 6px 14px rgb(32 54 37 / 3%); }
.joss-sidebar > img { width:34px; height:auto; margin:0 auto 14px; }
.joss-sidebar > span { display:grid; justify-items:center; gap:5px; padding:9px 1px; border-radius:8px; color:#98a39c; }
.joss-sidebar svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.joss-sidebar small { font-size:7px; }
.joss-sidebar > span.is-active { color:#267747; background:#fff; box-shadow:0 4px 10px rgb(28 59 39 / 5%); }
.joss-sidebar > .joss-settings { margin-top:auto; }
.joss-views { position:relative; min-width:0; }
.joss-view { position:absolute; inset:0; padding:16px; opacity:0; transform:translateY(16px); transition:opacity .4s,transform .6s; pointer-events:none; }
.joss-view.is-active { opacity:1; transform:translateY(0); }
.joss-view-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; margin-bottom:14px; }
.joss-view-heading > div > strong { display:block; color:#202a22; font-size:22px; font-weight:700; line-height:1.15; letter-spacing:-.6px; }
.joss-view-heading > div > small { display:block; margin-top:5px; color:#95a095; font-size:10px; }
.joss-ui-button { display:inline-flex; align-items:center; justify-content:center; flex:none; padding:9px 12px; border-radius:6px; background:#16764c; color:#fff; font-size:10px; font-weight:700; line-height:1.3; }
.joss-outline-button { border:1px solid #d5e4d9; color:#347149; background:#f1f7f0; }
.joss-order-tag { padding:6px 8px; border-radius:5px; color:#819481; background:#f1f5ed; font-size:9px; white-space:nowrap; }
.joss-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:13px; }
.joss-stat-grid > div { min-width:0; padding:11px 13px; border:1px solid #e5ebe3; border-radius:10px; background:#f8faf5; }
.joss-stat-grid small { display:block; color:#889583; font-size:9px; }
.joss-stat-grid strong { display:block; margin-top:5px; color:#2f513a; font-size:23px; font-weight:700; line-height:1.1; letter-spacing:-.7px; }
.joss-stat-grid > div > span { display:block; margin-top:7px; color:#9ca698; font-size:7px; }
.joss-catalogue { overflow:hidden; border:1px solid #e5eae2; border-radius:10px; background:#fff; }
.joss-catalogue-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:41px; padding:9px 12px; }
.joss-catalogue-heading > strong { font-size:11px; }
.joss-search { display:flex; align-items:center; gap:6px; min-width:135px; padding:7px 9px; border:1px solid #e1e8dc; border-radius:6px; color:#b3bcae; background:#fafbf8; font-size:9px; }
.joss-search > span:first-child { font-size:14px; line-height:10px; }
.joss-demo:is([data-action="searching"],[data-action="expanded"]) .joss-search { border-color:#98c1a1; color:#39774b; }
.joss-inventory-head,.joss-inventory-row { display:grid; grid-template-columns:minmax(0,1.65fr) .5fr minmax(0,1fr) .5fr; align-items:center; gap:8px; padding:0 12px; }
.joss-inventory-head { min-height:25px; background:#f6f8f3; color:#8b9886; font-size:8px; }
.joss-inventory-row { min-height:50px; border-top:1px solid #eef0e9; color:#7b8874; font-size:9px; transition:opacity .4s,background .4s; }
.joss-product-name { display:flex; align-items:center; gap:8px; min-width:0; }
.joss-product-name > img { flex:none; width:31px; height:37px; object-fit:contain; mix-blend-mode:multiply; }
.joss-product-name strong { color:#384332; font-size:10px; font-weight:700; line-height:1.35; }
.joss-inventory-row > b { color:#3e593f; font-size:12px; font-weight:700; }
.joss-warehouse-col { display:flex; flex-wrap:wrap; gap:3px; }
.joss-warehouse-col i { padding:3px 5px; border-radius:4px; color:#7b9175; background:#f0f5ea; font-size:7px; font-style:normal; }
.joss-demo:is([data-action="searching"],[data-action="expanded"]) .joss-inventory-row:not(.joss-selected-product) { opacity:.38; }
.joss-demo[data-action="expanded"] .joss-selected-product { background:#f0f7eb; }
.joss-inventory-detail { display:flex; align-items:center; justify-content:space-between; gap:8px; max-height:0; padding:0 12px; overflow:hidden; color:#91a28c; background:#f8fbf4; font-size:8px; opacity:0; transition:max-height .5s,padding .5s,opacity .4s; }
.joss-demo[data-action="expanded"] .joss-inventory-detail { max-height:42px; padding-block:10px; opacity:1; }
.joss-inventory-detail b { margin-left:5px; color:#49774a; font-size:9px; }
.joss-stock-caption { display:flex; align-items:center; gap:5px; margin-top:12px; color:#93a38a; font-size:8px; }
.joss-status-dot { width:4px; height:4px; border-radius:50%; background:#6aaa6a; }

.joss-sale-settings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; padding:11px 13px; border:1px solid #e4e9df; border-radius:8px; background:#f8faf5; }
.joss-sale-settings small { display:block; margin-bottom:5px; color:#8e9b85; font-size:8px; }
.joss-sale-settings strong { color:#536348; font-size:10px; font-weight:400; }
.joss-sale-card { overflow:hidden; border:1px solid #e5eadd; border-radius:8px; }
.joss-sale-head,.joss-sale-row { display:grid; grid-template-columns:minmax(0,1.6fr) .4fr .7fr; align-items:center; gap:9px; padding:0 12px; }
.joss-sale-head { min-height:26px; color:#8a987f; background:#f7f9f2; font-size:8px; }
.joss-sale-row { min-height:57px; border-top:1px solid #edf0e6; }
.joss-sale-row > :last-child,.joss-sale-head > :last-child { text-align:right; }
.joss-sale-row > b { color:#4b6340; font-size:11px; font-weight:400; white-space:nowrap; }
.joss-product-name small { display:block; margin-top:4px; color:#a3ad9b; font-size:8px; }
.joss-quantity { display:grid; place-items:center; width:29px; height:28px; border:1px solid #cfddc6; border-radius:5px; color:#427036; background:#f9fcf5; font-size:11px; }
.joss-demo[data-action="adding"] .joss-quantity { border-color:#7ead6b; }
.joss-sale-bottom { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:12px; margin-top:12px; }
.joss-sale-note { display:flex; align-items:center; gap:5px; color:#95a58b; font-size:8px; line-height:1.5; }
.joss-sale-note > span { color:#4d8b48; }
.joss-sale-totals { display:grid; gap:8px; }
.joss-sale-totals > span,.joss-sale-totals > strong { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#8b9c7d; font-size:9px; }
.joss-sale-totals b { font-weight:400; white-space:nowrap; }
.joss-sale-totals > strong { margin-top:2px; padding-top:9px; border-top:1px solid #e4eadc; color:#315c2a; font-size:14px; font-weight:700; }
.joss-sale-totals > strong > b { font-weight:700; }
.joss-save-sale { margin-top:2px; padding-block:9px; font-size:10px; }
.joss-toast { position:absolute; bottom:12px; left:16px; right:16px; display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid #bed9c1; border-radius:8px; color:#347149; background:#eaf5e9; box-shadow:0 5px 18px rgb(46 89 49 / 8%); transform:translateY(10px); opacity:0; transition:opacity .4s,transform .5s; }
.joss-toast > span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:#73a876; font-size:12px; }
.joss-toast strong { display:block; font-size:11px; }
.joss-toast small { display:block; margin-top:4px; color:#7a9b77; font-size:8px; }
.joss-demo[data-action="registered"] .joss-toast { opacity:1; transform:translateY(0); }

.joss-ticket-stage { display:grid; place-items:start center; min-height:0; padding:0 0 8px; }
.joss-receipt { position:relative; width:76%; max-width:320px; padding:12px 20px 10px; border:1px solid #e4e6dc; border-radius:5px; color:#47533e; background:#fffefa; box-shadow:0 12px 24px rgb(75 85 58 / 10%); transform:translateY(0); }
.joss-receipt::after { position:absolute; content:""; height:6px; bottom:-5px; left:-1px; right:-1px; background:linear-gradient(135deg,#fffefa 25%,transparent 25%) 0 0 / 10px 10px,linear-gradient(225deg,#fffefa 25%,transparent 25%) 0 0 / 10px 10px; }
.joss-receipt-logo { display:block; width:93px; height:auto; margin:0 auto 10px; }
.joss-receipt-number { display:flex; justify-content:space-between; align-items:center; gap:6px; padding-bottom:10px; border-bottom:1px dashed #d9ddcf; }
.joss-receipt-number strong { font-size:11px; }
.joss-receipt-number span { font-size:8px; }
.joss-receipt-client { display:grid; gap:4px; padding:8px 0; }
.joss-receipt-client > span { display:flex; justify-content:space-between; gap:8px; color:#9ca58f; font-size:8px; }
.joss-receipt-client b { color:#6b785b; font-weight:400; }
.joss-receipt-head { display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-block:1px dashed #d9ddcf; color:#939c86; font-size:7px; }
.joss-receipt-line { display:flex; justify-content:space-between; gap:10px; padding:8px 0; font-size:10px; }
.joss-receipt-line small { display:block; margin-top:4px; color:#a1aa94; font-size:8px; }
.joss-receipt-line b { font-weight:400; white-space:nowrap; }
.joss-receipt-totals { display:grid; gap:6px; padding-top:9px; border-top:1px dashed #d9ddcf; }
.joss-receipt-totals > span,.joss-receipt-totals > strong { display:flex; justify-content:space-between; gap:8px; font-size:9px; }
.joss-receipt-totals b { font-weight:400; }
.joss-receipt-totals > strong { color:#2a5728; font-size:15px; }
.joss-receipt-totals > strong b { font-weight:700; }
.joss-receipt-barcode { width:56%; height:15px; margin:9px auto 5px; background:repeating-linear-gradient(90deg,#7b886a 0 1px,transparent 1px 3px,#7b886a 3px 5px,transparent 5px 6px,#7b886a 6px 7px,transparent 7px 10px); opacity:.7; }
.joss-receipt-thanks { display:block; color:#a2ac95; font-size:8px; text-align:center; }
.joss-receipt-stamp { position:absolute; right:-21px; bottom:76px; padding:9px 13px; border:2px solid #7ca77b; border-radius:5px; color:#679567; background:rgb(248 254 241 / 90%); font-size:10px; font-weight:700; letter-spacing:1px; opacity:0; transform:rotate(-12deg) scale(1.25); transition:transform .4s,opacity .3s; }
.joss-demo[data-action="issued"] .joss-receipt-stamp { opacity:1; transform:rotate(-12deg) scale(1); }
.joss-sales-stats > div:first-child { background:linear-gradient(125deg,#125a39,#1b8a57); border-color:transparent; }
.joss-sales-stats > div:first-child small { color:#acd4b8; }
.joss-sales-stats > div:first-child strong { color:#f4fbf3; }
.joss-sales-stats > div:first-child > span { color:#98c8a5; }
.joss-summary-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; }
.joss-platform-card,.joss-recent-sales { min-width:0; padding:14px; border:1px solid #e5eadd; border-radius:10px; background:#fff; }
.joss-platform-card > strong,.joss-recent-sales > strong { display:block; color:#4a5c3c; font-size:11px; }
.joss-platform-row { margin-top:17px; }
.joss-platform-row > span { display:flex; justify-content:space-between; gap:8px; margin-bottom:7px; color:#8c9b7d; font-size:8px; }
.joss-platform-row b { color:#607f4c; font-weight:400; white-space:nowrap; }
.joss-platform-row > div { height:6px; overflow:hidden; border-radius:5px; background:#eff4e7; }
.joss-platform-row i { display:block; width:0; height:100%; border-radius:inherit; background:#76a95f; transition:width 1.5s cubic-bezier(.2,.7,.2,1); transition-delay:var(--bar-delay); }
.joss-view.is-active .joss-platform-row i { width:var(--bar-width); }
.joss-platform-row:nth-of-type(2) i { background:#a3bd7c; }
.joss-platform-row:nth-of-type(3) i { background:#c8d7a1; }
.joss-recent-head,.joss-recent-row { display:grid; grid-template-columns:45px minmax(0,1fr) 43px; align-items:center; gap:8px; }
.joss-recent-head { margin-top:14px; padding-bottom:8px; color:#a0ad91; font-size:7px; }
.joss-recent-row { min-height:37px; border-top:1px solid #edf1e6; color:#829470; font-size:8px; }
.joss-recent-row b { color:#719258; font-size:9px; }
.joss-recent-row > strong,.joss-recent-head > span:last-child { text-align:right; font-weight:400; }
.joss-new-ticket { transition:background .5s; }
.joss-demo[data-action="updated"] .joss-new-ticket { background:#f0f7e9; }
.joss-summary-note { display:flex; align-items:center; gap:9px; margin-top:14px; padding:11px 13px; border:1px solid #e4ecda; border-radius:8px; color:#779966; background:#f5f9ee; }
.joss-summary-note > span { font-size:16px; }
.joss-summary-note strong { display:block; color:#59824b; font-size:10px; }
.joss-summary-note small { display:block; margin-top:4px; color:#93a584; font-size:8px; }
.joss-cursor { position:absolute; z-index:5; width:22px; height:28px; overflow:visible; filter:drop-shadow(0 2px 4px rgb(12 44 26 / 20%)); pointer-events:none; transition:opacity .3s; }
.joss-demo[data-scene="intro"] .joss-cursor { opacity:0; }

.joss-controls { position:absolute; inset:auto 0 0; display:flex; align-items:center; gap:15px; height:54px; padding:0 26px; border-top:1px solid rgb(184 223 190 / 12%); background:rgb(5 24 16 / 72%); }
.joss-scene-buttons { display:flex; align-items:center; gap:3px; }
.joss-scene-buttons button { display:grid; place-items:center; width:20px; height:30px; padding:0; border-radius:4px; background:none; }
.joss-scene-buttons button > span { width:5px; height:5px; border-radius:50%; background:#325c41; }
.joss-scene-buttons button[aria-pressed="true"] > span { background:#a8dca1; box-shadow:0 0 10px rgb(168 220 161 / 30%); }
.joss-scene-buttons button:is(:hover,:focus-visible) > span { background:#ddf7cf; }
.joss-scene-buttons button:focus-visible { outline:1px solid #a8dca1; outline-offset:1px; }
.joss-scene-name { overflow:hidden; color:#a6c2ac; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.joss-demo-note { margin-left:auto; color:#64836c; font-size:9px; white-space:nowrap; }
.joss-progress { position:absolute; inset:auto 0 0; height:2px; background:#173721; }
.joss-progress > span { display:block; width:var(--joss-progress); height:100%; background:linear-gradient(90deg,#236943,#a8dca1); }
@keyframes joss-grid-drift { to { background-position:64px 64px; } }
@keyframes joss-glow { to { transform:translate(-35px,30px) scale(1.1); } }
@keyframes joss-product-float { from { transform:translateY(0) rotate(-3deg); } to { transform:translateY(-9px) rotate(2deg); } }
.joss-demo[data-playing="false"] * { animation-play-state:paused; }

@media(max-width:900px) and (min-width:701px) {
  .joss-presentation { gap:18px; padding-inline:22px; }
  .joss-copy h3 { font-size:31px; }
  .joss-copy > p { font-size:13px; }
  .joss-tags { gap:4px; }
  .joss-tags > span { padding:4px 6px; font-size:8px; }
  .joss-view { padding:12px; }
  .joss-view-heading > div > strong { font-size:19px; }
  .joss-view-heading > .joss-ui-button { display:none; }
  .joss-view-heading > div > small { font-size:9px; }
  .joss-catalogue-heading { align-items:stretch; flex-direction:column; gap:7px; }
  .joss-search { min-width:0; }
  .joss-warehouse-col { display:none; }
  .joss-inventory-head,.joss-inventory-row { grid-template-columns:minmax(0,1fr) 34px 38px; gap:6px; }
  .joss-inventory-detail > span:first-child { display:none; }
  .joss-sale-note { display:none; }
  .joss-sale-bottom { grid-template-columns:1fr; }
  .joss-sale-totals { width:75%; margin-left:auto; }
  .joss-summary-grid { grid-template-columns:1fr; }
  .joss-recent-sales { display:none; }
  .joss-platform-row { margin-top:12px; }
}

@media(max-width:700px) {
  .joss-demo { height:900px; }
  .joss-presentation { display:flex; flex-direction:column; align-items:stretch; gap:18px; height:calc(100% - 62px); padding:22px 16px 16px; }
  .joss-wordmark { width:84px; margin-bottom:16px; }
  .joss-copy h3,.joss-demo[data-scene="intro"] .joss-copy h3 { font-size:36px; }
  .joss-copy > p { max-width:440px; margin-top:14px; font-size:14px; line-height:1.65; }
  .joss-tags { margin-top:16px; gap:6px; }
  .joss-tags > span { font-size:9px; }
  .joss-stage { flex:none; height:480px; margin-top:auto; }
  .joss-product-card { border-radius:14px; }
  .joss-product-main { top:10%; height:76%; width:62%; left:19%; }
  .joss-product-back { top:31%; width:35%; height:51%; }
  .joss-product-left { left:5%; }
  .joss-product-right { right:5%; }
  .joss-product-card > img { height:calc(100% - 48px); }
  .joss-product-main > div { padding-inline:10px; gap:5px; font-size:10px; }
  .joss-product-main small { font-size:8px; }
  .joss-product-main > div > span:last-child { display:none; }
  .joss-product-back > span { padding:12px 5px; font-size:9px; }
  .joss-intro-note { right:0; bottom:27px; padding:10px 13px; font-size:11px; }
  .joss-intro-note small { font-size:9px; }
  .joss-app { transform:none; border-radius:10px; }
  .joss-app-bar { height:32px; padding-inline:9px; font-size:8px; }
  .joss-session { font-size:6px; gap:4px; }
  .joss-app-body { height:calc(100% - 32px); grid-template-columns:40px minmax(0,1fr); }
  .joss-sidebar { margin:8px 0 8px 5px; padding:12px 3px 8px; border-radius:14px; gap:9px; }
  .joss-sidebar > img { width:25px; margin-bottom:9px; }
  .joss-sidebar > span { padding:8px 1px; }
  .joss-sidebar svg { width:15px; height:15px; }
  .joss-sidebar small { font-size:5px; }
  .joss-view { padding:12px 9px; }
  .joss-view-heading { gap:6px; margin-bottom:12px; }
  .joss-view-heading > div > strong { font-size:20px; }
  .joss-view-heading > div > small { font-size:9px; line-height:1.4; }
  .joss-view-heading > .joss-ui-button { display:none; }
  .joss-order-tag { font-size:7px; padding:4px 5px; }
  .joss-stat-grid { gap:5px; margin-bottom:11px; }
  .joss-stat-grid > div { padding:9px 6px; }
  .joss-stat-grid small { font-size:7px; }
  .joss-stat-grid strong { margin-top:5px; font-size:19px; }
  .joss-catalogue-heading { flex-direction:column; align-items:stretch; gap:7px; padding:10px 8px; }
  .joss-catalogue-heading > strong { font-size:10px; }
  .joss-search { min-width:0; font-size:8px; }
  .joss-warehouse-col { display:none; }
  .joss-inventory-head,.joss-inventory-row { grid-template-columns:minmax(0,1fr) 29px 32px; gap:5px; padding-inline:7px; }
  .joss-inventory-head { min-height:24px; font-size:7px; }
  .joss-inventory-row { min-height:52px; font-size:7px; }
  .joss-product-name { gap:5px; }
  .joss-product-name > img { width:23px; height:31px; }
  .joss-product-name strong { font-size:9px; }
  .joss-inventory-row > b { font-size:11px; }
  .joss-inventory-detail { gap:5px; padding-inline:8px; font-size:7px; }
  .joss-inventory-detail > span:first-child { display:none; }
  .joss-inventory-detail b { margin-left:3px; font-size:8px; }
  .joss-stock-caption { margin-top:10px; font-size:7px; line-height:1.4; }
  .joss-sale-settings { padding:10px 8px; gap:6px; }
  .joss-sale-settings small { font-size:7px; }
  .joss-sale-settings strong { font-size:8px; line-height:1.5; }
  .joss-sale-head,.joss-sale-row { grid-template-columns:minmax(0,1fr) 23px 44px; padding-inline:7px; gap:6px; }
  .joss-sale-head { font-size:7px; }
  .joss-sale-row { min-height:61px; }
  .joss-sale-row > b { font-size:8px; }
  .joss-product-name small { font-size:7px; line-height:1.4; }
  .joss-quantity { width:23px; height:25px; font-size:10px; }
  .joss-sale-note { display:none; }
  .joss-sale-bottom { grid-template-columns:1fr; margin-top:11px; }
  .joss-sale-totals { gap:8px; }
  .joss-sale-totals > span { font-size:8px; }
  .joss-sale-totals > strong { padding-top:8px; font-size:13px; }
  .joss-save-sale { font-size:9px; }
  .joss-toast { bottom:9px; left:9px; right:9px; gap:6px; padding:9px 8px; }
  .joss-toast > span { flex:none; width:20px; height:20px; }
  .joss-toast strong { font-size:10px; }
  .joss-toast small { font-size:7px; line-height:1.4; }
  .joss-receipt { width:92%; padding:15px 12px 12px; }
  .joss-receipt-logo { width:80px; margin-bottom:12px; }
  .joss-receipt-number strong { font-size:10px; }
  .joss-receipt-number > span { font-size:7px; }
  .joss-receipt-client > span { font-size:7px; }
  .joss-receipt-line { padding:10px 0; font-size:8px; gap:7px; }
  .joss-receipt-line small { font-size:7px; }
  .joss-receipt-totals > span { font-size:8px; }
  .joss-receipt-totals > strong { font-size:13px; }
  .joss-receipt-stamp { right:-9px; bottom:82px; padding:7px 8px; font-size:8px; }
  .joss-sales-stats { grid-template-columns:1.5fr .75fr .75fr; }
  .joss-sales-stats strong { font-size:17px; letter-spacing:-.8px; }
  .joss-sales-stats > div > span { display:none; }
  .joss-summary-grid { grid-template-columns:1fr; }
  .joss-recent-sales { display:none; }
  .joss-platform-card { padding:12px; }
  .joss-platform-card > strong { font-size:11px; }
  .joss-platform-row { margin-top:19px; }
  .joss-platform-row > span { font-size:8px; }
  .joss-summary-note { padding:10px 8px; gap:6px; margin-top:12px; }
  .joss-summary-note strong { font-size:9px; line-height:1.4; }
  .joss-summary-note small { font-size:7px; line-height:1.4; }
  .joss-controls { height:62px; padding:0 14px; gap:8px; flex-wrap:wrap; align-content:center; }
  .joss-scene-buttons { gap:0; }
  .joss-scene-buttons button { width:19px; height:25px; }
  .joss-scene-name { font-size:9px; }
  .joss-demo-note { width:100%; margin:-2px 0 0; font-size:8px; }
}

@media(max-width:380px) {
  .joss-copy h3,.joss-demo[data-scene="intro"] .joss-copy h3 { font-size:32px; }
}

@media(prefers-reduced-motion:reduce) {
  .joss-demo *,.joss-demo *::before { animation:none !important; transition:none !important; }
}