@font-face{font-family:"Vazirmatn Variable";font-style:normal;font-display:block;font-weight:100 900;src:url("/static/fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Vazirmatn Variable";font-style:normal;font-display:block;font-weight:100 900;src:url("/static/fonts/vazirmatn-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02FF,U+1E00-1EFF,U+2020,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Vazirmatn Variable";font-style:normal;font-display:block;font-weight:100 900;src:url("/static/fonts/vazirmatn-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;--ink:#17202a;--muted:#5e6975;--blue:#1658a8;--blue2:#0f447f;--line:#d7dee7;--bg:#f4f6f9;--panel:#fff;--red:#cf2f36;--green:#147640;font-family:"Vazirmatn Variable",Tahoma,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{min-height:100vh}.app-header{height:64px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.brand-mark{height:100%;display:flex;align-items:center}.brand-logo{display:block;width:48px;height:48px;object-fit:contain}.progress{color:var(--muted);font-size:.92rem}.app{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:clamp(24px,5vh,64px) clamp(16px,4vw,64px)}.screen{width:min(780px,100%);text-align:center}.screen.wide{width:min(1440px,100%)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.35}h2{font-size:clamp(1.45rem,3vw,2.2rem)}p,li,label{line-height:1.9}.lead{font-size:1.1rem;color:var(--muted);max-width:68ch;margin:0 auto 24px}.panel{padding:clamp(20px,4vw,40px);background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 35px #22334a12}.primary,.secondary{min-height:52px;padding:12px 24px;border-radius:10px;font:700 1rem inherit;cursor:pointer}.primary{border:0;background:var(--blue);color:#fff}.primary:hover{background:var(--blue2)}.secondary{border:2px solid var(--blue);background:#fff;color:var(--blue)}button:disabled{opacity:.5;cursor:not-allowed}.check{display:flex;gap:12px;align-items:flex-start;text-align:right;margin:22px 0}.check input{width:22px;height:22px;margin-top:6px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:right}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}input,select{min-height:48px;padding:9px 12px;border:1px solid #aeb8c4;border-radius:9px;font:inherit;background:#fff}.notice{padding:14px 16px;border-radius:10px;background:#edf5ff;border:1px solid #b8d2f0;text-align:right;margin:16px 0}.warning{background:#fff6df;border-color:#e4c26e}.error{background:#fff0f1;border-color:#e3a4a8;color:#7b1e23}.instructions{text-align:right;margin:18px auto;max-width:64ch}.kss{display:grid;gap:8px;text-align:right}.kss label{display:flex;gap:9px;align-items:flex-start;padding:7px 10px;border-radius:8px}.kss label:hover{background:#f2f6fb}.kss input,.effort input{accent-color:var(--blue)}.targets{position:fixed;inset:64px 0 0;background:#fff;z-index:20}.target{position:absolute;width:54px;height:54px;transform:translate(-50%,-50%);border:5px solid #fff;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px #8d171c;cursor:crosshair}.target-text{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:min(520px,70vw);text-align:center;color:var(--muted);pointer-events:none}.fixation{position:fixed;inset:64px 0 0;display:grid;place-items:center;background:#fff;z-index:15}.fixation p{position:absolute;top:12%;left:50%;transform:translateX(-50%)}.plus{border:0;background:transparent;font:300 86px/1 Arial;cursor:pointer}.criteria{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:14px 0 22px}.criterion{background:#edf3fa;border:1px solid #c7d7ea;border-radius:999px;padding:7px 13px}.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}.product{display:flex;flex-direction:column;min-width:0;padding:14px;border:2px solid var(--line);border-radius:14px;background:#fff;text-align:right;cursor:pointer;transition:border-color .12s,box-shadow .12s}.product:hover{border-color:#6b99ce}.product.selected{border-color:var(--blue);box-shadow:0 0 0 3px #1658a822}.product img{width:100%;height:clamp(130px,19vh,220px);object-fit:contain;background:#f7f8fa;border-radius:10px}.product h3{text-align:center;margin:12px 0;font-size:1.15rem}.attrs{display:grid;gap:7px;margin-top:auto}.attr{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid #edf0f4;font-size:.92rem}.attr b{font-weight:700}.trial-action{margin-top:22px}.effort{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin:24px 0}.effort label{display:grid;place-items:center;gap:6px;padding:12px 4px;border:1px solid var(--line);border-radius:9px;background:#fff}.anchors{display:flex;justify-content:space-between;color:var(--muted)}.toast{position:fixed;z-index:50;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#7b1e23;color:#fff;border-radius:9px}.hidden{display:none!important}.fatal{margin:30px}.ltr{direction:ltr;unicode-bidi:isolate}.save-status{color:var(--muted);margin-top:14px}
#webgazerVideoContainer,#webgazerVideoFeed,#webgazerFaceOverlay,#webgazerFaceFeedbackBox{display:none!important;visibility:hidden!important;pointer-events:none!important}
.criterion{line-height:1.25}.product h3{line-height:1.2}.attr{line-height:1.25}

/* After calibration the viewport must stay fixed because gaze coordinates are
   viewport-relative. Every screen therefore compacts with both viewport axes
   instead of relying on scrolling. */
html.post-calibration,body.post-calibration{width:100%;height:100%;max-height:100%;overflow:hidden!important;overscroll-behavior:none}
.post-calibration .app{height:calc(100vh - 64px);height:calc(100dvh - 64px);min-height:0;overflow:hidden;padding:clamp(8px,2vh,24px) clamp(12px,3.5vw,56px)}
.post-calibration .screen{max-height:100%;min-height:0}
.post-calibration .screen:not(.wide){font-size:clamp(.82rem,min(1.5vw,2vh),1rem)}
.post-calibration .panel{max-height:100%;overflow:hidden;padding:clamp(12px,min(2.8vw,3.2vh),28px)}
.post-calibration .panel h1{margin-bottom:clamp(8px,2vh,20px);font-size:clamp(1.35rem,min(3.2vw,4.2vh),2.35rem);line-height:1.25}
.post-calibration .panel h2{margin-bottom:clamp(6px,1.5vh,16px);font-size:clamp(1.15rem,min(2.5vw,3.3vh),1.8rem);line-height:1.3}
.post-calibration .panel p,.post-calibration .panel li,.post-calibration .panel label{line-height:clamp(1.4em,calc(1.2em + .55vh),1.75em)}
.post-calibration .panel p{margin-bottom:clamp(7px,1.5vh,16px)}
.post-calibration .instructions{margin:clamp(6px,1.3vh,14px) auto}
.post-calibration .instructions li+li{margin-top:clamp(2px,.6vh,6px)}
.post-calibration .primary,.post-calibration .secondary{min-height:clamp(40px,6vh,52px);padding:clamp(7px,1.2vh,12px) clamp(16px,2vw,24px)}
.post-calibration .lead{margin-bottom:clamp(8px,1.8vh,20px);font-size:clamp(.9rem,min(1.7vw,2.2vh),1.1rem)}
.post-calibration .effort{gap:clamp(4px,.65vw,8px);margin:clamp(10px,2.3vh,24px) 0}
.post-calibration .effort label{gap:clamp(2px,.5vh,6px);padding:clamp(5px,1.2vh,12px) 3px}
.post-calibration .anchors{font-size:clamp(.78rem,min(1.4vw,1.8vh),1rem)}
.post-calibration .save-status{margin-top:clamp(5px,1vh,12px)}

/* Product-choice screens occupy the remaining height. Four columns are an
   experimental invariant and must not collapse at any desktop viewport. */
.post-calibration .screen.wide{width:min(2400px,100%);height:100%;min-height:0;padding-top:clamp(4px,1.6vh,18px);display:grid;grid-template-rows:auto auto auto auto;align-content:start}
.post-calibration .screen.wide>h1{margin:0;font-size:clamp(1.45rem,min(3vw,4.4vh),2.65rem);line-height:1.15}
.post-calibration .criteria{gap:clamp(6px,.75vw,18px);margin:clamp(10px,2.8vh,28px) 0 clamp(16px,4vh,42px)}
.post-calibration .criterion{min-height:clamp(26px,4vh,40px);display:inline-flex;align-items:center;padding:clamp(3px,.65vh,8px) clamp(9px,1vw,18px);font-size:clamp(.78rem,min(1.15vw,1.9vh),1rem)}
.post-calibration .products{width:100%;height:auto;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,36px);align-items:start}
.post-calibration .product{width:100%;min-height:0;padding:clamp(7px,1.2vh,14px)}
.post-calibration .product img{height:clamp(110px,min(31vh,15vw),310px)}
.post-calibration .product h3{min-height:clamp(25px,4.4vh,44px);display:flex;align-items:center;justify-content:center;margin:clamp(5px,1vh,10px) 0;font-size:clamp(.9rem,min(1.5vw,2.25vh),1.3rem)}
.post-calibration .attrs{gap:0;min-height:0;margin-top:0}
.post-calibration .attr{min-height:clamp(24px,4.8vh,48px);align-items:center;padding:clamp(2px,.65vh,7px) 0;font-size:clamp(.78rem,min(1.15vw,1.95vh),1.05rem)}
.post-calibration .attr b,.post-calibration .attr span{min-width:0;overflow-wrap:anywhere}
.post-calibration .trial-action{margin-top:clamp(14px,7vh,75px)}
.post-calibration .trial-action .primary{min-width:clamp(130px,9vw,190px);min-height:clamp(42px,6.4vh,64px);font-size:clamp(.82rem,min(1.1vw,1.8vh),1rem)}

/* Six attributes need a little more vertical compression, without changing
   card order, card count, or the four-column geometry. */
.post-calibration.high-density-trial .app{padding:clamp(7px,1.5vh,16px) clamp(12px,2.5vw,64px)}
.post-calibration.high-density-trial .criteria{margin:clamp(9px,2.5vh,25px) 0 clamp(14px,5.8vh,58px)}
.post-calibration.high-density-trial .criterion{min-height:clamp(24px,3.8vh,38px);padding:clamp(2px,.55vh,7px) clamp(8px,.9vw,16px);font-size:clamp(.74rem,min(1.05vw,1.8vh),.96rem)}
.post-calibration.high-density-trial .products{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,36px)}
.post-calibration.high-density-trial .product{padding:clamp(6px,1.1vh,13px)}
.post-calibration.high-density-trial .product img{height:clamp(92px,min(23vh,11vw),230px)}
.post-calibration.high-density-trial .product h3{min-height:clamp(23px,4vh,40px);margin:clamp(3px,.7vh,8px) 0;font-size:clamp(.84rem,min(1.35vw,2.1vh),1.2rem)}
.post-calibration.high-density-trial .attr{min-height:clamp(20px,4.5vh,46px);padding:clamp(1px,.4vh,5px) 0;font-size:clamp(.74rem,min(1.05vw,1.85vh),1.02rem)}
.post-calibration.high-density-trial .trial-action{margin-top:clamp(10px,4.8vh,48px)}
.post-calibration.high-density-trial .trial-action .primary{min-width:clamp(126px,8.5vw,180px);min-height:clamp(40px,6vh,60px);padding:clamp(6px,1vh,12px) clamp(18px,2vw,30px)}
.fixation-content{display:grid;justify-items:center;gap:18px;text-align:center}
.fixation .fixation-content p{position:static;transform:none;margin:0;color:var(--muted);font-weight:600}
@media(max-width:1050px){.products{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.form-grid,.products{grid-template-columns:1fr}.app-header{height:auto;min-height:64px}.app{padding:22px 14px}.effort{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){.post-calibration .products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-height:560px){.post-calibration.high-density-trial .criteria{margin-bottom:14px}.post-calibration.high-density-trial .trial-action{margin-top:6px}}
@media(pointer:coarse),(max-width:560px){.desktop-block{display:block}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}