.input{position:relative;min-height:var(--h-control);padding:var(--s2) var(--s3);border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--surface);
  font-size:var(--fs-input);font-weight:400;line-height:var(--lh-dense);color:var(--text);text-align:start;cursor:text;
  white-space:pre-wrap;overflow-wrap:anywhere;hyphens:manual;transition:border-color var(--t-fast)}
.input:focus{outline:2px solid var(--accent);outline-offset:2px}
.input[data-empty]::before{content:attr(data-placeholder);position:absolute;color:var(--text-3);pointer-events:none}
.input>div{min-height:1lh}
.input .mark{color:var(--text-3);font-weight:400;font-style:normal}
.input code{line-height:0}
.input .item{--hang:calc((var(--depth) + 1)*var(--indent-step));padding-left:var(--hang);text-indent:calc(-1*var(--hang))}
.input .item[data-list="number"]{--hang:calc(var(--depth)*var(--indent-step) + var(--indent-number))}
.input .item>.mark:first-child{display:inline-block;min-width:var(--hang);text-indent:0;text-align:end;white-space:pre}
.input [data-depth="0"]{--depth:0} .input [data-depth="1"]{--depth:1} .input [data-depth="2"]{--depth:2} .input [data-depth="3"]{--depth:3}
.input [data-depth="4"]{--depth:4} .input [data-depth="5"]{--depth:5} .input [data-depth="6"]{--depth:6}
.input[data-kind="number"]{font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){ .input:hover{border-color:var(--text-3)} }
@media print{ .input{break-inside:avoid} }