.loreno-visualizer-page{padding:clamp(3rem,7vw,7rem) 0;background:linear-gradient(145deg,#f7faf8,#edf2ef);min-height:calc(100vh - 120px)}.loreno-visualizer-heading{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2rem}.loreno-visualizer-heading h1{font-size:clamp(2rem,4vw,4.5rem);margin:.5rem 0;color:#101817}.loreno-visualizer-heading p{color:#59706b}.loreno-visualizer-shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1rem;background:#111a18;border:1px solid rgba(145,206,187,.25);border-radius:28px;padding:1rem;box-shadow:0 24px 70px rgba(9,31,26,.22)}.loreno-visualizer-controls{background:rgba(255,255,255,.97);border-radius:20px;padding:1.25rem;display:grid;gap:1rem;align-content:start;max-height:760px;overflow:auto}.loreno-control-group{border-bottom:1px solid #e4ece8;padding-bottom:1rem}.loreno-control-group h2{font-size:1rem;margin:0 0 .7rem;color:#123c32}.loreno-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.loreno-choice-grid button,.loreno-visualizer-controls select{border:1px solid #d5e2dd;background:#fff;border-radius:10px;padding:.6rem;font:inherit;color:#28463e;cursor:pointer}.loreno-choice-grid button.is-selected{background:#087055;color:#fff;border-color:#087055}.loreno-swatch-grid{display:flex;flex-wrap:wrap;gap:.55rem}.loreno-swatch-grid button{width:34px;height:34px;border-radius:50%;background:var(--swatch);border:3px solid #fff;box-shadow:0 0 0 1px #cbd8d3;cursor:pointer}.loreno-swatch-grid button.is-selected{box-shadow:0 0 0 2px #087055}.loreno-control-group label:not(.loreno-switch){display:grid;gap:.35rem;color:#506861;font-size:.85rem;margin-top:.6rem}.loreno-switch{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;font-size:.85rem;color:#36544d}.loreno-switch input{accent-color:#087055}.loreno-button--full{width:100%;justify-content:center}.loreno-visualizer-stage{min-height:700px;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#40574f,#17211f 72%)}.loreno-visualizer-stage__topbar{display:flex;justify-content:flex-end;gap:1rem;color:#b4cec6;padding:.8rem 1rem;font-size:.78rem}.loreno-visualizer-stage__topbar button{border:0;background:transparent;color:#dff8ee;cursor:pointer}.loreno-visualizer-canvas-wrap{position:relative;flex:1;min-height:560px}.loreno-visualizer-canvas-wrap canvas{width:100%;height:100%;display:block;cursor:grab}.loreno-visualizer-canvas-wrap canvas:active{cursor:grabbing}.loreno-visualizer-loading{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);color:#fff;background:rgba(0,0,0,.4);padding:.7rem 1rem;border-radius:50px}.loreno-visualizer-stage__caption{display:flex;justify-content:space-between;padding:1rem 1.25rem;color:#e4f6ef;border-top:1px solid rgba(255,255,255,.12)}.loreno-visualizer-stage__caption span{color:#9ebcb2;font-size:.85rem}.loreno-estimator{margin-top:3rem;background:#fff;border:1px solid #dce8e3;border-radius:24px;padding:clamp(1.25rem,3vw,2.5rem);box-shadow:0 12px 40px rgba(16,49,40,.08)}.loreno-estimator__heading h2{font-size:clamp(1.7rem,3vw,2.8rem);margin:.4rem 0}.loreno-estimator__heading p{color:#688079}.loreno-estimator__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem}.loreno-estimator__grid label{display:grid;gap:.4rem;font-size:.85rem;color:#4d6960}.loreno-estimator__grid input{border:1px solid #d8e4df;border-radius:10px;padding:.75rem;font:inherit}.loreno-estimator__result{margin-top:1.5rem;padding:1rem 1.25rem;border-radius:16px;background:#eff8f4;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.loreno-estimator__result strong{font-size:1.35rem;color:#087055}.loreno-estimator__result small{color:#59766b}@media(max-width:980px){.loreno-visualizer-shell{grid-template-columns:1fr}.loreno-visualizer-controls{max-height:none;order:2}.loreno-visualizer-stage{min-height:560px}.loreno-estimator__grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.loreno-visualizer-heading{display:block}.loreno-visualizer-heading .loreno-button{margin-top:1rem}.loreno-estimator__grid{grid-template-columns:1fr}.loreno-visualizer-stage__caption{display:block}.loreno-visualizer-stage__caption span{display:block;margin-top:.3rem}}

/* Premium studio surface: restrained ivory/emerald UI with a larger, calmer scene. */
.loreno-visualizer-page { background:
    radial-gradient(circle at 8% 0%, rgba(197,165,103,.16), transparent 32rem),
    linear-gradient(135deg,#fbfaf7 0%,#eef4f0 58%,#e5ede8 100%); }
.loreno-visualizer-heading h1 { letter-spacing:-.04em; font-weight:800; }
.loreno-visualizer-shell { grid-template-columns: minmax(300px,340px) minmax(0,1fr); padding:1.2rem; background:linear-gradient(145deg,#12221e,#0c1412); }
.loreno-visualizer-controls { box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 18px 45px rgba(0,0,0,.16); scrollbar-color:#9ab7ab transparent; }
.loreno-control-group h2 { letter-spacing:-.02em; }
.loreno-choice-grid button,.loreno-visualizer-controls select { transition:background .2s,border-color .2s,box-shadow .2s,transform .2s; }
.loreno-choice-grid button:hover,.loreno-visualizer-controls select:focus { border-color:#087055; box-shadow:0 0 0 3px rgba(8,112,85,.12); transform:translateY(-1px); outline:0; }
.loreno-visualizer-stage { min-height:760px; background:
    radial-gradient(circle at 50% 12%, rgba(224,195,143,.35), transparent 23rem),
    linear-gradient(160deg,#536b60 0%,#243731 46%,#101916 100%); box-shadow:inset 0 0 90px rgba(0,0,0,.22); }
.loreno-visualizer-canvas-wrap { min-height:630px; }
.loreno-visualizer-stage__topbar { background:linear-gradient(90deg,transparent,rgba(0,0,0,.2)); }
.loreno-visualizer-stage__caption { background:rgba(6,17,14,.42); backdrop-filter:blur(8px); }
.loreno-estimator__result { background:linear-gradient(135deg,#f0faf5,#e2f3eb); }
@media (max-width:980px) { .loreno-visualizer-stage { min-height:620px; } .loreno-visualizer-canvas-wrap { min-height:520px; } }
@media (max-width:560px) { .loreno-visualizer-stage { min-height:520px; } .loreno-visualizer-canvas-wrap { min-height:420px; } }

/* The visualizer uses the normal Loreno shell, but its dark studio needs a
   readable, interactive header instead of the transparent home-hero header. */
.loreno-visualizer-body .loreno-header {
    position: relative;
    background: #151b19;
    color: #f5efe7;
    border-bottom: 1px solid rgba(214,179,124,.22);
}
.loreno-visualizer-body .loreno-header .loreno-brand__word,
.loreno-visualizer-body .loreno-header .loreno-menu__link,
.loreno-visualizer-body .loreno-header .loreno-header-search__toggle,
.loreno-visualizer-body .loreno-header .loreno-menu-toggle,
.loreno-visualizer-body .loreno-header .loreno-language__link { color: #f5efe7; }
.loreno-visualizer-body .loreno-header .loreno-brand__tagline { color: #c7b69a; }
.loreno-visualizer-body .loreno-main { padding-top: 0; }
.loreno-visualizer-stone-status {
    position: absolute;
    inset: auto 1rem 1rem 1rem;
    z-index: 3;
    padding: .7rem 1rem;
    border: 1px solid rgba(255,214,154,.35);
    border-radius: 12px;
    background: rgba(44,27,20,.86);
    color: #ffe6c3;
    font-size: .82rem;
    text-align: center;
    pointer-events: none;
}
.loreno-swatch-grid { max-height: 170px; overflow: auto; padding: .2rem; }
.loreno-color-picker { display:flex !important; grid-template-columns:none !important; align-items:center; justify-content:space-between; gap:.75rem; }
.loreno-color-input { width:3.2rem; height:2rem; padding:.12rem; border:1px solid #d5e2dd; border-radius:8px; background:#fff; cursor:pointer; }
.loreno-range-label { gap:.55rem !important; }
.loreno-range-label input[type="range"] { width:100%; accent-color:#087055; cursor:pointer; }
.loreno-control-hint { display:block; color:#71877f; font-size:.72rem; line-height:1.7; }
.loreno-visualizer-stage__topbar { align-items:center; flex-wrap:wrap; }
.loreno-visualizer-stage__topbar button[data-action="zoom-in"],
.loreno-visualizer-stage__topbar button[data-action="zoom-out"] { min-width:1.7rem; font-size:1.1rem; line-height:1; border:1px solid rgba(223,248,238,.25); border-radius:6px; }

/* Keep the visualizer inside the viewport. The controls are scrollable
   themselves; the document must never acquire a second horizontal track. */
html, body { overflow-x: hidden; max-width: 100%; }
.loreno-visualizer-page { width: 100%; max-width: 100%; overflow-x: clip; }
.loreno-visualizer-shell,
.loreno-visualizer-stage,
.loreno-visualizer-controls,
.loreno-visualizer-canvas-wrap { min-width: 0; max-width: 100%; }
.loreno-visualizer-canvas-wrap { overflow: hidden; }
.loreno-visualizer-canvas-wrap canvas { touch-action: none; image-rendering: auto; }

/* Mobile has one deliberate column: heading, scene, then controls.  Keep
   every grid item inside the viewport and avoid the large desktop top gap. */
@media (max-width: 760px) {
    .loreno-visualizer-page {
        padding: 1rem 0 2rem;
        min-height: 0;
    }

    .loreno-visualizer-heading {
        margin-bottom: 1rem;
    }

    .loreno-visualizer-heading h1 {
        font-size: clamp(1.55rem, 8vw, 2.35rem);
    }

    .loreno-visualizer-shell {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        padding: .55rem;
        border-radius: 18px;
    }

    .loreno-visualizer-stage {
        order: 1;
        min-height: 0;
        height: min(72svh, 560px);
        border-radius: 14px;
    }

    .loreno-visualizer-controls {
        order: 2;
        max-height: none;
        padding: .9rem;
        border-radius: 14px;
    }

    .loreno-visualizer-canvas-wrap {
        min-height: 0;
        height: calc(min(72svh, 560px) - 88px);
    }

    .loreno-visualizer-stage__topbar {
        justify-content: center;
        gap: .35rem .65rem;
        padding: .55rem .6rem;
        font-size: .7rem;
    }

    .loreno-visualizer-stage__caption {
        padding: .65rem .75rem;
        font-size: .78rem;
    }
}

@media (max-width: 420px) {
    .loreno-visualizer-page .loreno-container {
        width: calc(100% - 16px);
    }

    .loreno-visualizer-stage {
        height: min(68svh, 500px);
    }

    .loreno-visualizer-canvas-wrap {
        height: calc(min(68svh, 500px) - 86px);
    }
}