*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:#14231f;background:radial-gradient(circle at 12% 8%,rgba(45,212,191,.24),transparent 30%),radial-gradient(circle at 88% 12%,rgba(251,191,36,.22),transparent 28%),linear-gradient(135deg,#eef7f4,#f8fbf3 48%,#edf5ff)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(rgba(31,122,104,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(31,122,104,.055) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 75%);mask-image:linear-gradient(to bottom,black,transparent 75%)}.app-shell{min-height:100vh;padding:clamp(12px,2.2vw,28px) 0}.summary-bar,.side-panel{border:1px solid rgba(31,122,104,.1);background:linear-gradient(135deg,#ffffffeb,#f0fdfabd)!important;box-shadow:0 12px 38px #14534914}.summary-bar,.side-panel{padding:22px}.workspace{border:1px solid rgba(31,122,104,.12);background:#ffffffeb!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.stepper{margin-bottom:28px;overflow-x:auto;padding-bottom:12px}.stepper .MuiStepLabel-label{font-weight:700;white-space:nowrap}.learning-tip{border:1px solid rgba(31,122,104,.14);background:#f0fdfa!important;border-radius:16px}.MuiCard-root{border:1px solid rgba(31,122,104,.1)}.MuiTextField-root,.MuiFormControl-root{border-radius:18px}.MuiOutlinedInput-root{background:#ffffffb8}.input-grid.MuiGrid-container{width:100%;margin:0}.primer-card{padding:14px;cursor:pointer;border:1px solid rgba(31,122,104,.12);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.primer-card:hover{transform:translateY(-2px);border-color:#1f7a6866;box-shadow:0 12px 36px #14534924}.result-card{padding:18px;border:1px solid rgba(217,119,6,.18);background:linear-gradient(135deg,#fffbebf2,#ffffffeb)!important}.gel-frame{display:grid;place-items:center;padding:18px;border-radius:24px;background:linear-gradient(135deg,#0f172aeb,#064e3be6),radial-gradient(circle at 50% 12%,rgba(45,212,191,.28),transparent 35%)}.gel-frame canvas{width:min(100%,560px);height:auto;border-radius:18px;box-shadow:inset 0 0 40px #2dd4bf1f,0 18px 50px #0507063d}.gel-preview{width:100%;max-width:360px;border-radius:16px;border:1px solid rgba(31,122,104,.16)}@media (max-width: 700px){.app-shell{padding:16px 0}.workspace>.MuiCardContent-root{padding:18px}.stepper{margin-inline:-8px}.summary-bar,.side-panel{padding:16px}}