/* Friendly studio layout, scoped to Sporgan tools. */
.spgplay{--ink:#203e31;--green:#285b3c;--lime:#ddedb5;--cream:#fbf9f3;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:1160px}.spgplay .spgp-hero{max-width:730px;margin:10px 0 34px}.spgplay .spgp-hero h2{font:650 clamp(34px,4.2vw,54px)/1.06 ui-sans-serif,system-ui,sans-serif;letter-spacing:-2px;margin:16px 0 20px;color:var(--ink)}.spgplay .spgp-hero>p:not(.spgtools-eyebrow){font-size:17px;line-height:1.55;max-width:550px;color:#5d6d61}.spgplay .spgtools-eyebrow{font-size:11px;letter-spacing:.13em;color:#557644}.spgp-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.spgp-pills span{padding:5px 11px;border:1px solid #e2e7da;border-radius:20px;background:#fff;font-size:11px;font-weight:600}.spgplay [data-workspace]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}.spgplay .spgp-left{min-width:0}.spgplay form{padding:27px;background:#fff;border:1px solid #e3e7dd;border-radius:0 0 22px 22px;box-shadow:0 8px 24px #23422b04}.spgplay .spgp-steps{display:flex;gap:5px;background:#f0f2e9;border:1px solid #e3e7dd;border-bottom:0;border-radius:18px 18px 0 0;padding:10px}.spgplay .spgp-steps button{display:flex;gap:7px;align-items:center;justify-content:center;background:transparent;border:0;padding:9px 5px;color:#6e796b;flex:1;font-size:12px;white-space:nowrap;min-height:38px;border-radius:10px}.spgplay .spgp-steps b{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:22px;height:22px;background:#e4e8dc;font-size:11px}.spgplay .spgp-steps .is-active{background:white;color:var(--ink);box-shadow:0 2px 8px #283e3010}.spgplay .spgp-steps .is-active b{background:var(--green);color:white}.spgplay .spgp-steps .is-complete b{background:var(--lime);color:#285b3c}.spgp-formtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.spgp-formtop>span{font-size:10px;font-weight:700;letter-spacing:.12em;color:#728268}.spgplay .spgp-unit{display:flex;gap:7px;align-items:center;color:#71806d;font-size:11px;white-space:nowrap}.spgplay .spgp-unit select{font:12px system-ui;border:1px solid #e0e5d8;border-radius:20px;padding:5px 22px 5px 10px;min-height:32px;width:auto;margin:0}.spgplay [data-stage]>h3{font:650 25px/1.2 system-ui;letter-spacing:-.65px;margin:0 0 10px}.spgplay [data-stage]>p{font-size:14px;line-height:1.5;color:#687467;margin:0 0 24px}.spgplay .spgb-fields{gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px}.spgplay[data-sporgan-batch=liner] [data-stage="0"] .spgb-fields{grid-template-columns:1fr 1fr}.spgplay label.spgp-field{font-size:12px;font-weight:600}.spgp-input{display:flex;align-items:center;border:1px solid #dce3d5;border-radius:10px;background:#fafbf6;margin:8px 0}.spgplay .spgp-input input{font:600 17px system-ui;min-height:48px;min-width:0;width:100%;border:0;background:transparent;padding:10px 8px;margin:0;border-radius:10px;appearance:textfield;-moz-appearance:textfield}.spgplay input::-webkit-inner-spin-button{appearance:none}.spgp-input>span{font-size:10px;color:#76856f;padding-right:10px}.spgplay small{display:block;font-size:10px;line-height:1.4;color:#788471;font-weight:400}.spgp-tip{display:flex;gap:12px;align-items:center;background:#f3f6e9;border-radius:12px;padding:12px;margin:20px 0}.spgp-tip>span{font-size:26px;color:#78904c}.spgp-tip p{font-size:12px;line-height:1.5;margin:0;color:#596b46}.spgplay button.spgp-next{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;border-radius:11px;background:var(--green);color:white;border:0;padding:14px 17px;font:600 14px system-ui;min-height:49px;transition:transform .15s,background .15s}.spgplay button.spgp-next:hover{background:#1c482e;transform:translateY(-1px)}.spgplay button.spgp-back{font-size:12px;padding:8px 0;border:0;min-height:38px;color:#61725a;background:transparent}.spgp-example{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid #edf0e7;padding-top:15px;margin-top:22px;font-size:11px;color:#84907d}.spgplay .spgp-example button{padding:0;border:0;color:#42633a;background:transparent;font:600 11px system-ui;min-height:32px;text-decoration:underline;text-underline-offset:4px}.spgplay .spgp-privacy{font-size:10px;color:#899080;margin:15px 0 0;line-height:1.5}.spgplay .spgp-preview{background:#edf3e2;border:1px solid #e0e9d0;border-radius:22px;padding:22px;min-width:0;overflow:hidden}.spgp-preview-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.spgp-preview-top>span:first-child{font-size:9px;font-weight:700;letter-spacing:.1em;color:#647655}.spgp-status{font-size:9px;color:#526e44;background:#fff9;padding:5px 8px;border-radius:20px;white-space:nowrap}.spgplay [data-illustration] svg{margin:14px 0 0;width:100%;height:auto;max-height:none}.spgplay .spgp-preview-caption{text-align:center;padding:0 15px 18px}.spgplay .spgp-preview-caption h3{font:600 20px/1.3 system-ui;letter-spacing:-.5px;margin:8px 0 10px}.spgplay .spgp-preview-caption p{font-size:12px;color:#718062;max-width:295px;margin:auto;line-height:1.65}.spgplay .spgp-options{background:#fafbf6;border:1px solid #e5e9df;border-radius:12px;padding:4px 12px;margin:18px 0}.spgplay .spgp-options summary{font:600 12px system-ui;padding:12px 0}.spgp-options summary span{font-size:10px;color:#819077;margin-left:8px;font-weight:400}.spgplay .spgp-options p{font-size:12px;color:#738269}.spgplay .spgb-check{font-size:12px;display:flex;gap:8px;align-items:center;font-weight:500}.spgplay input[type=checkbox]{accent-color:var(--green);flex-shrink:0}.spgplay .spgb-size{grid-template-columns:1fr 1fr .65fr;gap:10px;background:#f8faf3;padding:13px;border-radius:12px;margin:12px 0}.spgplay .spgb-size label{font-size:10px}.spgplay .spgb-size input{font:500 15px system-ui;padding:8px;min-height:42px;margin-bottom:0;border-color:#dce3d5;border-radius:8px}.spgplay .spgb-size button{grid-column:1/-1;justify-self:end;font-size:10px;border:0;background:transparent;padding:0;min-height:25px;color:#7d786d}.spgplay [data-add]{border:1px dashed #bacaaa;background:#f5f9ed;color:#47633c;width:100%;font:600 12px system-ui;border-radius:10px}.spgplay [data-results]{padding:0;margin:20px 0 0;border:0;border-radius:0;animation:spgp-arrive .25s ease-out}.spgplay [data-results]>h3{font:650 32px/1.1 system-ui;letter-spacing:-1px;margin:14px 0;color:#234a32}.spgplay [data-results] p,.spgplay [data-results] li{font-size:12px;line-height:1.6;color:#54654a}.spgplay [data-results] svg{background:#fff;border-radius:12px;padding:12px;max-height:340px;box-sizing:border-box}.spgplay [data-results] table{font-size:11px;background:#ffffff80}.spgplay [data-results] summary{font-size:13px}.spgplay [data-results]>button{background:white;color:#285b3c;border:1px solid #c7d4b6;border-radius:10px;width:100%;font:600 13px system-ui}.spgplay .spgp-help{border-top:1px solid #e0e6d7;margin-top:30px;padding:12px 0}.spgplay .spgp-help summary{font-size:13px;color:#68785c}.spgplay .spgp-help p{font-size:13px;color:#6c7766}.spgplay .spgp-help h3{font-size:18px}.spgplay [role=alert]:empty{display:none}.spgplay [role=alert]{font-size:12px;background:#fff1e6;padding:10px;border-radius:8px}.spgplay :focus-visible{outline:2px solid #4d7340;outline-offset:3px}.spgplay [hidden]{display:none!important}@keyframes spgp-arrive{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.spgplay *{animation:none!important;transition:none!important}}@media(max-width:800px){.spgplay [data-workspace]{grid-template-columns:1fr;gap:18px}.spgplay .spgp-hero{margin-bottom:25px}.spgplay .spgp-hero h2{font-size:39px}.spgplay .spgp-preview{padding:18px}.spgplay form{padding:22px}.spgplay .spgp-preview-top>span:first-child{font-size:8px}}@media(max-width:380px){.spgplay form{padding:16px}.spgplay .spgp-steps button{font-size:10px;gap:4px}.spgplay .spgp-steps{padding:8px 5px}.spgplay .spgb-fields{gap:8px}.spgplay .spgp-hero h2{font-size:33px}.spgplay .spgp-formtop{gap:5px}.spgplay .spgp-input input{font-size:15px}}