/* matrixxx — мастер в духе Windows 98, схема «Баклажан».
   Фаски — inset box-shadow в два кольца, как рисовал GDI. */
:root{
  --desk:#4b3a6e; --face:#90b0a8; --light:#e8f0ee; --soft:#b8ccc6; --shade:#5c7a72; --ink:#000;
  --title-a:#584078; --title-b:#8c74b4; --well:#fff;
  --raise:inset -1px -1px 0 var(--ink),inset 1px 1px 0 var(--soft),inset -2px -2px 0 var(--shade),inset 2px 2px 0 var(--light);
  --press:inset 1px 1px 0 var(--ink),inset -1px -1px 0 var(--light),inset 2px 2px 0 var(--shade);
  --sink:inset -1px -1px 0 var(--light),inset 1px 1px 0 var(--shade),inset -2px -2px 0 var(--soft),inset 2px 2px 0 var(--ink);
  --ui:Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif; --mono:"Lucida Console","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--desk);color:var(--ink);font:13px/1.45 var(--ui);display:flex;align-items:center;justify-content:center;padding:24px 16px}
svg{display:block;shape-rendering:crispEdges}

.wiz{width:100%;max-width:560px;background:var(--face);box-shadow:var(--raise);padding:3px}
.bar{display:flex;align-items:center;gap:6px;height:22px;padding:0 3px 0 4px;background:linear-gradient(90deg,var(--title-a),var(--title-b));color:#fff}
.bar__icon{width:16px;height:16px;flex:none}
.bar__title{flex:1;margin:0;font:700 12px/1 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__btn{width:16px;height:14px;background:var(--face);color:var(--ink);box-shadow:var(--raise);font:700 9px/14px var(--ui);text-align:center}

.wiz__main{display:flex;min-height:300px;padding:10px 10px 0}
.art{flex:0 0 150px;box-shadow:var(--sink);padding:2px;background:#2e2147}
.art svg{width:100%;height:100%}
.pages{flex:1;padding:4px 4px 12px 18px;min-width:0}
.page__title{margin:2px 0 12px;font:700 15px/1.3 var(--ui)}
.page p{margin:0 0 12px;max-width:44ch}
.note{color:#2e3d3a}

.group{border:0;margin:16px 0 0;padding:14px 12px 8px;box-shadow:inset 1px 1px 0 var(--shade),inset -1px -1px 0 var(--light),inset 2px 2px 0 var(--light),inset -2px -2px 0 var(--shade);position:relative}
.group legend{padding:0 4px;margin-left:-4px;background:var(--face)}
.radio{display:flex;align-items:center;gap:6px;margin:4px 0;cursor:pointer}
.radio input{margin:0;accent-color:var(--title-a)}

.row{display:flex;gap:6px;align-items:stretch;margin-bottom:12px}
.well{flex:1;min-width:0;background:var(--well);box-shadow:var(--sink);padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbl{display:block;margin-bottom:4px}
.field{width:190px;max-width:100%;border:0;background:var(--well);box-shadow:var(--sink);padding:5px 6px;font:14px var(--mono);letter-spacing:1px}
.field:focus{outline:1px dotted var(--ink);outline-offset:-4px}

.mycode{display:inline-block;background:var(--well);box-shadow:var(--sink);padding:6px 12px;font:20px var(--mono);letter-spacing:3px;margin-bottom:12px}
.progress{height:18px;box-shadow:var(--sink);padding:3px;overflow:hidden;margin-bottom:10px}
.progress span{display:block;height:100%;width:40%;background:repeating-linear-gradient(90deg,var(--title-a) 0 8px,transparent 8px 10px);animation:slide 2.4s steps(24) infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

.foot{display:flex;justify-content:flex-end;gap:6px;padding:10px;margin-top:8px;box-shadow:inset 0 1px 0 var(--shade),inset 0 2px 0 var(--light)}
.foot__cancel{margin-left:10px}
.btn{min-width:75px;height:23px;padding:0 10px;border:0;background:var(--face);color:var(--ink);font:12px var(--ui);box-shadow:var(--raise);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.btn:active:not(:disabled){box-shadow:var(--press);padding-top:1px}
.btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}
.btn--default{box-shadow:inset 0 0 0 1px var(--ink),var(--raise)}
.btn:disabled{color:var(--shade);text-shadow:1px 1px 0 var(--light);cursor:default}
.radio input:focus-visible+span{outline:1px dotted var(--ink)}
.sr{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sr:focus-visible+*{outline:1px dotted var(--ink)}

.msg{border:0;padding:3px;background:var(--face);box-shadow:var(--raise);width:min(360px,calc(100% - 32px))}
.msg::backdrop{background:transparent}
.msg__body{display:flex;gap:14px;align-items:flex-start;padding:16px 12px 8px}
.msg__body p{margin:6px 0 0}
.msg__icon{width:32px;height:32px;flex:none;shape-rendering:auto}
.msg__foot{display:flex;justify-content:center;padding:8px 0 10px}

@media (max-width:540px){.art{display:none}.pages{padding-left:4px}.wiz__main{min-height:0}}
@media (prefers-reduced-motion:reduce){.progress span{animation:none;width:100%}}