/* CanSat Systems Lab — the descent of a can-sized satellite over the steppe at dusk.
   Page accent: the parachute orange from the hero photo, alongside the site's ice blue. */

:root{
  --space:#050913;
  --panel:rgba(12,22,44,.62);
  --panel-solid:#0B1529;
  --edge:rgba(170,200,255,.14);
  --edge-hi:rgba(140,200,255,.38);
  --ice:#F5C518;
  --chute:#FF8A3D;
  --sun:#FEC50C;
  --snow:#F2F6FC;
  --mist:#9FADC4;
  --gutter:clamp(16px,3.4vw,40px);
  --wrap:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{color:var(--snow);line-height:1.6;overflow-x:hidden}
button{font:inherit;color:inherit}
.arr{width:18px;height:11px;flex:none}

/* Buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;font-size:15.5px;font-weight:600;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;transition:box-shadow .2s,border-color .2s,background .2s,transform .2s}
.pill:active{transform:translateY(1px)}
.pill.solid{background:#fff;color:#0A1428;box-shadow:0 8px 28px rgba(255,255,255,.12)}
.pill.solid:hover{box-shadow:0 8px 32px rgba(255,255,255,.28)}
.pill.line{background:rgba(5,9,19,.35);border:1.5px solid rgba(242,246,252,.5);color:#fff}
.pill.line:hover{border-color:#fff}
.pill.small{font-size:13.5px;padding:10px 18px}
.pill:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ── Hero ────────────────────────────────────── */
.cs-hero{position:relative;min-height:min(100vh,920px);min-height:min(100svh,920px);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.cs-hero-bg,.cs-hero-bg img{position:absolute;inset:0;width:100%;height:100%}
.cs-hero-bg img{object-fit:cover;object-position:30% 40%}
.cs-hero-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 40% 50% at 62% 42%,rgba(3,6,14,.55),transparent 75%),
             linear-gradient(180deg,rgba(3,6,14,.55) 0%,transparent 18%,transparent 60%,rgba(5,9,19,.75) 85%,var(--space) 100%)}
.cs-hero-text{position:relative;z-index:2;width:min(600px,100% - 2*var(--gutter));margin-left:max(var(--gutter),40%);padding:120px 0 200px}
.cs-kicker{font-size:12.5px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(242,246,252,.8);margin-bottom:16px}
.cs-hero h1{font-size:clamp(42px,5.6vw,80px);font-weight:800;line-height:1;letter-spacing:-.02em;margin-bottom:22px;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.cs-lead{font-size:clamp(15.5px,1.2vw,17.5px);color:rgba(242,246,252,.88);max-width:520px;margin-bottom:30px;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.cs-actions{display:flex;flex-wrap:wrap;gap:14px}
.cs-back{display:inline-block;margin-top:22px;font-size:14px;color:rgba(242,246,252,.72);text-decoration:underline;text-decoration-color:rgba(242,246,252,.3);text-underline-offset:5px}
.cs-back:hover{color:#fff}

.cs-profile{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter) 34px}
.cs-profile-title{font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,246,252,.6);margin-bottom:14px}
.cs-profile dl{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(242,246,252,.18)}
.cs-profile dl>div{display:flex;flex-direction:column;padding:16px 20px 0 0}
.cs-profile dl>div+div{padding-left:20px;border-left:1px solid rgba(242,246,252,.12)}
.cs-profile dd{font-size:clamp(26px,2.6vw,38px);font-weight:300;line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-profile dd small{font-size:.45em;font-weight:500;color:var(--mist);margin-left:4px}
.cs-profile dl>div:nth-child(2) dd{color:#FFB27A}
.cs-profile dt{font-size:13px;color:var(--mist);margin-top:8px}

/* ── Sections ────────────────────────────────── */
.cs-section{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:clamp(70px,8vw,110px) var(--gutter) 0;scroll-margin-top:60px}
.cs-head{max-width:720px;margin-bottom:clamp(26px,3vw,40px)}
.cs-head h2{font-size:clamp(28px,3.2vw,42px);font-weight:800;line-height:1.1;letter-spacing:-.015em;margin-bottom:12px}
.cs-head p{color:var(--mist);font-size:16px}

/* ── Model ───────────────────────────────────── */
.cs-model{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:stretch}
.lab{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;border:1px solid var(--edge);
  background:radial-gradient(ellipse 60% 55% at 50% 48%,rgba(245,197,24,.14),transparent 70%),linear-gradient(180deg,#0B1529,#060B18)}
.lab::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(170,200,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(170,200,255,.06) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent)}
.view-tabs{position:relative;z-index:5;align-self:center;display:inline-flex;margin-top:20px;padding:4px;border-radius:999px;background:rgba(5,9,19,.7);border:1px solid var(--edge)}
.view-tab{border:0;background:none;color:rgba(242,246,252,.72);font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.view-tab:hover{color:#fff}
.view-tab.active{background:#fff;color:#0A1428}
.lab-stage{position:relative;flex:1;min-height:600px}
.model3d{position:absolute;inset:0}
.model3d canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.model3d canvas:active{cursor:grabbing}
.model3d #interactiveWrap{display:none}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;pointer-events:auto;opacity:0;padding:6px 12px;border-radius:999px;border:1px solid rgba(245,197,24,.55);background:rgba(5,9,19,.9);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;will-change:transform;transition:opacity .25s,background .2s,border-color .2s;visibility:hidden}
.tag.show{visibility:visible}
.tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ice);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(245,197,24,.25)}
.tag:hover{border-color:#fff}
.tag.active{background:var(--ice);border-color:var(--ice);color:#04101F}
.tag.active::before{background:#04101F;box-shadow:none}
.open-btn{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;padding:12px 22px;border-radius:999px;border:0;background:#fff;color:#0A1428;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.view-external .open-btn{display:block}
.drag-hint{position:absolute;right:18px;bottom:16px;font-size:12px;color:rgba(159,173,196,.75);pointer-events:none}
.view-external .drag-hint{display:none}
.stage-help{position:relative;z-index:5;margin:0 20px 20px;padding:13px 16px;border-radius:14px;background:rgba(5,9,19,.6);border:1px solid var(--edge);font-size:13.5px;color:rgba(242,246,252,.82)}

.spec{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);border-radius:22px;background:var(--panel);border:1px solid var(--edge)}
.crumbs{display:flex;gap:8px;font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--mist);margin-bottom:18px}
.crumb-sep{opacity:.5}
.spec-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.component-icon{flex:none;width:56px;height:56px;display:grid;place-items:center;font-size:28px;border-radius:16px;background:rgba(245,197,24,.1);border:1px solid var(--edge)}
.spec-top h3{font-size:clamp(22px,2vw,28px);font-weight:700;line-height:1.15;margin-bottom:6px}
.spec-top p{font-size:14.5px;color:rgba(242,246,252,.8)}
.spec-rows{border-top:1px solid var(--edge)}
.info-row{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--edge)}
.info-row dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ice);padding-top:2px}
.info-row dd{font-size:14px;color:rgba(242,246,252,.86)}
.parts-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:22px 0 10px}
.part-grid{display:flex;flex-wrap:wrap;gap:8px}
.part-btn{border:1px solid var(--edge);background:rgba(255,255,255,.03);color:rgba(242,246,252,.85);font-size:13.5px;font-weight:500;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.part-btn:hover{border-color:var(--edge-hi);color:#fff}
.part-btn.active{background:var(--ice);border-color:var(--ice);color:#04101F;font-weight:700}
.component-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:24px}

/* ── Mission simulation ──────────────────────── */
.cs-sim{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:18px;align-items:start}
.canvas-wrap{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--edge);background:#04070F}
.canvas-wrap canvas{display:block;width:100%;height:clamp(460px,64vh,620px)}
.gauge{position:absolute;left:22px;top:70px;bottom:40px;width:44px;border-left:1px solid rgba(242,246,252,.35);pointer-events:none}
.gauge-tick{position:absolute;left:0;transform:translateY(50%);font-size:11px;font-weight:500;color:rgba(242,246,252,.65);padding-left:10px;font-variant-numeric:tabular-nums}
.gauge-tick::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:rgba(242,246,252,.5)}
.gauge-tick.chute-line{color:#FFB27A}
.gauge-tick.chute-line::before{background:var(--chute);width:10px}
.gauge-marker{position:absolute;left:-6px;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--ice);transform:translateY(50%);box-shadow:0 0 0 4px rgba(245,197,24,.25);transition:background .3s}
.gauge-marker.chute{background:var(--chute);box-shadow:0 0 0 4px rgba(255,138,61,.25)}
.gauge-val{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;color:#fff;white-space:nowrap;padding:3px 8px;border-radius:999px;background:rgba(5,9,19,.75)}
.sim-overlay{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.sim-chip{padding:7px 13px;border-radius:999px;background:rgba(5,9,19,.75);border:1px solid var(--edge);font-size:12px;font-weight:600;letter-spacing:.06em;color:rgba(242,246,252,.8)}
.sim-chip.live{color:#fff;border-color:rgba(255,138,61,.55);display:inline-flex;align-items:center;gap:8px}
.sim-chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--chute);box-shadow:0 0 0 3px rgba(255,138,61,.25)}

.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:16px;position:relative}
.steps::before{content:"";position:absolute;left:14px;right:14px;top:14px;height:1px;background:var(--edge)}
.mission-step{position:relative;padding:0 10px 0 0}
.step-num{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--space);border:1.5px solid rgba(242,246,252,.3);font-size:12px;font-weight:600;color:var(--mist);transition:background .3s,border-color .3s,color .3s}
.mission-step h4{font-size:14px;font-weight:600;margin:10px 0 2px;color:rgba(242,246,252,.85)}
.mission-step p{font-size:12.5px;color:var(--mist);line-height:1.45}
.mission-step.past .step-num{border-color:var(--ice);color:var(--ice)}
.mission-step.active .step-num{background:var(--chute);border-color:var(--chute);color:#1A0B02;box-shadow:0 0 0 5px rgba(255,138,61,.2)}
.mission-step.active h4{color:#fff}

.control{padding:clamp(20px,2.2vw,26px);border-radius:22px;background:var(--panel);border:1px solid var(--edge)}
.control h3{font-size:20px;font-weight:700;margin-bottom:6px}
.control-desc{font-size:14px;color:var(--mist);margin-bottom:18px}
.control-buttons{display:flex;gap:10px;margin-bottom:18px}
.control-buttons .pill{padding:12px 18px;font-size:14px}
.control-buttons .pill.solid{flex:1}
.telemetry{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.telemetry-card{padding:14px;border-radius:14px;background:rgba(5,9,19,.55);border:1px solid var(--edge)}
.telemetry-card p{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.telemetry-card .tv{display:block;font-size:24px;font-weight:300;margin-top:4px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.telemetry-card:last-child .tv{font-size:16px;font-weight:600;padding-top:6px}
.chart{margin-top:16px}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:8px}
.legend{display:inline-flex;align-items:center;gap:6px;letter-spacing:0;text-transform:none;font-weight:500}
.legend i{display:inline-block;width:12px;height:3px;border-radius:2px}
.legend i+span{margin-right:8px}
.lg-alt{background:var(--ice)}
.lg-vel{background:var(--chute)}
.chart-box{position:relative;border-radius:14px;background:rgba(5,9,19,.55);border:1px solid var(--edge);overflow:hidden}
.chart-box canvas{display:block;width:100%;height:150px}
.chart-empty{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:13px;color:var(--mist)}

/* ── Physics ─────────────────────────────────── */
.cs-physics{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.formula-card,.vt-card{padding:clamp(24px,3vw,36px);border-radius:22px;background:var(--panel);border:1px solid var(--edge)}
.formula-card h2{font-size:clamp(26px,2.6vw,34px);font-weight:800;margin-bottom:10px}
.formula-card>p{color:var(--mist);max-width:56ch;margin-bottom:24px}
.formula-box{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:16px;background:rgba(5,9,19,.6);border:1px solid var(--edge)}
.formula{font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
.formula.sub{font-size:clamp(17px,1.7vw,21px);color:#B9D3F2}
.vt-card h3{font-size:18px;font-weight:700;margin-bottom:22px}
.vt-row{margin-bottom:20px}
.vt-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:8px}
.vt-label b{font-weight:600;font-variant-numeric:tabular-nums}
.vt-bar{height:8px;border-radius:8px;background:rgba(159,173,196,.15);overflow:hidden}
.vt-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#F5C518,var(--ice))}
.vt-row.chute .vt-bar i{background:linear-gradient(90deg,#E8622A,var(--chute))}
.vt-row small{display:block;font-size:12px;color:var(--mist);margin-top:6px}
.vt-note{font-size:12.5px;color:var(--mist);border-top:1px solid var(--edge);padding-top:14px}

/* ── Roadmap ─────────────────────────────────── */
.roadmap{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.roadmap li{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:18px;background:var(--panel);border:1px solid var(--edge)}
.rm-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--edge-hi);font-size:12.5px;font-weight:600;color:var(--mist)}
.rm-num svg{width:15px;height:15px}
.roadmap p{font-size:14.5px;color:rgba(242,246,252,.86);flex:1}
.rm-state{align-self:flex-start;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);padding:4px 10px;border-radius:999px;border:1px solid var(--edge)}
.roadmap li.done{border-color:rgba(34,197,94,.35)}
.roadmap li.done .rm-num{background:#22c55e;border-color:#22c55e;color:#04140A}
.roadmap li.done .rm-state{color:#4ADE80;border-color:rgba(34,197,94,.4)}

/* ── Responsive ──────────────────────────────── */
@media (max-width:1120px){
  .cs-model,.cs-sim,.cs-physics{grid-template-columns:1fr}
  .roadmap{grid-template-columns:1fr 1fr}
  .cs-hero-text{margin-left:max(var(--gutter),32%)}
}
@media (max-width:720px){
  .cs-hero{min-height:0;display:block}
  .cs-hero-bg{position:relative;display:block;height:auto;margin-top:58px}
  .cs-hero-bg img{position:relative;height:auto;aspect-ratio:1/.95;object-position:9% 0%}
  .cs-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--space) 0%,transparent 12%,transparent 55%,var(--space) 100%)}
  .cs-hero-shade{display:none}
  .cs-hero-text{width:auto;margin:-80px 0 0;padding:0 var(--gutter)}
  .cs-kicker{font-size:11px;letter-spacing:.24em}
  .cs-hero h1{font-size:clamp(38px,11vw,48px);margin-bottom:16px}
  .cs-lead{font-size:15px;margin-bottom:22px}
  .cs-actions{gap:10px}
  .cs-actions .pill{flex:1 1 auto;padding:12px 18px;font-size:14px}
  .cs-profile{position:relative;padding:34px var(--gutter) 0}
  .cs-profile dl{grid-template-columns:1fr 1fr}
  .cs-profile dl>div{padding:14px 12px 14px 0}
  .cs-profile dl>div+div{padding-left:0;border-left:0}
  .cs-profile dl>div:nth-child(even){padding-left:16px;border-left:1px solid rgba(242,246,252,.12)}
  .cs-profile dl>div:nth-child(n+3){border-top:1px solid rgba(242,246,252,.12)}
  .lab-stage{min-height:440px}
  .drag-hint{display:none}
  .view-tab{padding:8px 13px;font-size:12.5px}
  .info-row{grid-template-columns:1fr;gap:4px}
  .canvas-wrap canvas{height:440px}
  .steps{grid-template-columns:1fr;gap:12px}
  .steps::before{left:14px;right:auto;top:14px;bottom:14px;width:1px;height:auto}
  .mission-step{display:flex;gap:14px;padding:0}
  .mission-step h4{margin-top:3px}
  .roadmap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.no-webgl .model3d canvas,.no-webgl .flight3d canvas{background:radial-gradient(ellipse at 50% 50%,#0B1734,#04070F)}


/* The header blur would be recomputed every frame over the live 3D canvases; an opaque bar costs nothing */
#site-header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,9,19,.96)}

/* Mission controls: speed, parameters, pause */
.sim-speed{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ctl-label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(5,9,19,.55);border:1px solid var(--edge)}
.seg button{border:0;background:transparent;color:var(--mist);font:inherit;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.seg button.active{background:#fff;color:#0A1428}
.params{margin-bottom:18px;border-radius:14px;background:rgba(5,9,19,.55);border:1px solid var(--edge);padding:4px 14px 12px}
.params summary{cursor:pointer;list-style:none;padding:10px 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);display:flex;justify-content:space-between;align-items:center}
.params summary::-webkit-details-marker{display:none}
.params summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.params[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.param{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:8px 0;font-size:13.5px;color:#fff}
.param output{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ice)}
.param input{grid-column:1/-1;width:100%;accent-color:var(--ice);height:22px;margin:0;cursor:pointer;touch-action:pan-y}
.param input:disabled{opacity:.4;cursor:not-allowed}
.param:has(input:disabled) output{color:var(--mist)}
.param-hint{font-size:12px;color:var(--mist);margin-top:4px;line-height:1.45}
#startMission.is-paused{background:var(--chute);color:#1A0B02}
.seg.seg-sm button{font-size:11.5px;padding:4px 10px;letter-spacing:0;text-transform:none}
.chart-legend{display:flex;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--mist)}
.telemetry-card:last-child{grid-column:1/-1}
/* hero: Kainar's own photo of his CanSat under its parachute, on the left; the words on the right, over dark */
@media (min-width:761px){
  .cs-hero{background:#03050a}
  .cs-hero-bg{right:auto;width:58%}
  .cs-hero-bg img{object-position:40% 50%}
  .cs-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,5,10,0) 55%,#03050a 100%),linear-gradient(180deg,rgba(3,5,10,.35) 0%,rgba(3,5,10,0) 25%,rgba(3,5,10,0) 70%,#03050a 100%)}
  .cs-hero-shade{display:none}
  .cs-hero-text{margin-left:max(var(--gutter),56%);width:min(560px,40%)}
  .cs-hero h1{text-shadow:none}
}
@media (max-width:760px){.cs-hero-bg img{object-position:42% 45%}}
.cs-hero h1{word-break:keep-all}