:root{--color-primary:#7b5cfa;--color-secondary:#ff9f1c;--edge-size:32px;--font-body:"OldStyle1-PND",serif;--bg:#f7f7f8;--text:#222}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.4}h1,h2,h3{font-weight:600;margin-bottom:1rem}section{padding:2rem 1rem;border-bottom:1px solid #ddd}.demo-row{display:flex;flex-wrap:wrap;gap:1rem}.block{--corner:var(--edge-size);position:relative;display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block .row-bottom,.block .row-top{display:flex;height:var(--corner)}.block .row-middle{display:flex;flex-grow:1;min-height:var(--corner)}.block .corner,.block .edge{flex-shrink:0;background-repeat:no-repeat;background-size:contain}.block .corner{width:var(--corner);height:var(--corner)}.block .edge.bh,.block .edge.th{height:100%;flex-grow:1;background-repeat:repeat-x;background-size:auto 100%}.block .edge.lv,.block .edge.rv{width:var(--corner);background-repeat:repeat-y;background-size:100% auto}.block .content{flex-grow:1;padding:.5rem;background:rgba(255,255,255,.4);font-size:.85rem;display:flex;align-items:center;justify-content:center}.block.small{width:200px}.block.wide{width:400px}.block.tall{width:200px;min-height:240px}.block-1 .corner.tl{background-image:url(/_next/static/media/Block-1-Corner-Top-Left.8c1da0a7.png)}.block-1 .corner.tr{background-image:url(/_next/static/media/Block-1-Corner-Top-Right.2e7bbb74.png)}.block-1 .corner.bl{background-image:url(/_next/static/media/Block-1-Corner-Btm-Left.daf3bbe6.png)}.block-1 .corner.br{background-image:url(/_next/static/media/Block-1-Corner-Btm-Right.df338444.png)}.block-1 .edge.th{background-image:url(/_next/static/media/Block-1-Top-Horz-Line.a3029726.png)}.block-1 .edge.bh{background-image:url(/_next/static/media/Block-1-Bottom-Horz-Line.0c785e17.png)}.block-1 .edge.lv{background-image:url(/_next/static/media/Block-1-Left-Vert-Line.5eb95754.png)}.block-1 .edge.rv{background-image:url(/_next/static/media/Block-1-Right-Vert-Line.398f103a.png)}.block-2 .corner.tl{background-image:url(/_next/static/media/Block-2-Corner-Top-Left.8b97f6af.png)}.block-2 .corner.tr{background-image:url(/_next/static/media/Block-2-Corner-Top-Right.25682f72.png)}.block-2 .corner.bl{background-image:url(/_next/static/media/Block-2-Corner-Btm-Left.1e92541d.png)}.block-2 .corner.br{background-image:url(/_next/static/media/Block-2-Corner-Btm-Right.60658b95.png)}.block-2 .edge.th{background-image:url(/_next/static/media/Block-2-Top-Horz-Line.f6902ee8.png)}.block-2 .edge.bh{background-image:url(/_next/static/media/Block-2-Bottom-Horz-Line.00c35b76.png)}.block-2 .edge.lv{background-image:url(/_next/static/media/Block-2-Left-Vert-Line.1406ff64.png)}.block-2 .edge.rv{background-image:url(/_next/static/media/Block-2-Right-Vert-Line.6a6f6ba1.png)}.block-3 .corner.tl{background-image:url(/_next/static/media/Block-3-Corner-Top-Left.850d99e7.png)}.block-3 .corner.tr{background-image:url(/_next/static/media/Block-3-Corner-Top-Right.3293451d.png)}.block-3 .corner.bl{background-image:url(/_next/static/media/Block-3-Corner-Btm-Left.a0cba814.png)}.block-3 .corner.br{background-image:url(/_next/static/media/Block-3-Corner-Btm-Right.c4df57b1.png)}.block-3 .edge.th{background-image:url(/_next/static/media/Block-3-Top-Horz-Line.ad56a3df.png)}.block-3 .edge.bh{background-image:url(/_next/static/media/Block-3-Bottom-Horz-Line.5a6e6a87.png)}.block-3 .edge.lv{background-image:url(/_next/static/media/Block-3-Left-Vert-Line.d9b4d085.png)}.block-3 .edge.rv{background-image:url(/_next/static/media/Block-3-Right-Vert-Line.b7f306c1.png)}.block-4 .corner.tl{background-image:url(/_next/static/media/Block-4-Corner-Top-Left.8d04a4ed.png)}.block-4 .corner.tr{background-image:url(/_next/static/media/Block-4-Corner-Top-Right.bbd28d06.png)}.block-4 .corner.bl{background-image:url(/_next/static/media/Block-4-Corner-Btm-Left.4ef77d28.png)}.block-4 .corner.br{background-image:url(/_next/static/media/Block-4-Corner-Btm-Right.7272402e.png)}.block-4 .edge.th{background-image:url(/_next/static/media/Block-4-Top-Horz-Line.52e1cc35.png)}.block-4 .edge.bh{background-image:url(/_next/static/media/Block-4-Bottom-Horz-Line.e1536828.png)}.block-4 .edge.lv{background-image:url(/_next/static/media/Block-4-Left-Vert-Line.227d63ce.png)}.block-4 .edge.rv{background-image:url(/_next/static/media/Block-4-Right-Vert-Line.a18cce0b.png)}.block-5 .corner.tl{background-image:url(/_next/static/media/Block-5-Corner-Top-Left.fc065e8f.png)}.block-5 .corner.tr{background-image:url(/_next/static/media/Block-5-Corner-Top-Right.baf8b7c2.png)}.block-5 .corner.bl{background-image:url(/_next/static/media/Block-5-Corner-Btm-Left.9292ce4a.png)}.block-5 .corner.br{background-image:url(/_next/static/media/Block-5-Corner-Btm-Right.36110339.png)}.block-5 .edge.th{background-image:url(/_next/static/media/Block-5-Top-Horz-Line.f42ba848.png)}.block-5 .edge.bh{background-image:url(/_next/static/media/Block-5-Bottom-Horz-Line.a62a3644.png)}.block-5 .edge.lv{background-image:url(/_next/static/media/Block-5-Left-Vert-Line.d84e3a90.png)}.block-5 .edge.rv{background-image:url(/_next/static/media/Block-5-Right-Vert-Line.b206db32.png)}.dropdown{position:relative;height:40px;line-height:40px;display:inline-block;color:var(--text);font-size:.9rem;padding-left:40px;padding-right:60px;margin:1rem;background:url(/_next/static/media/DropDown-start.de0a04cf.png) no-repeat 0/contain,url(/_next/static/media/DropDown-end.17f00719.png) no-repeat 100%/contain,url(/_next/static/media/DropDown-mid.1c19a720.png) repeat-x 50%/auto 100%}.dropdown .arrow{position:absolute;right:20px;top:50%;width:24px;height:24px;transform:translateY(-50%);background:url(/_next/static/media/DropDown-arrow.f3573943.png) 50%/contain no-repeat;pointer-events:none}.dropdown.short{width:200px}.dropdown.medium{width:350px}.dropdown.long{width:500px}.checkbox,.radial{width:32px;height:32px;background-size:contain;background-repeat:no-repeat;display:inline-block;margin:.5rem}.checkbox.checked{background-image:url(/_next/static/media/Checkbox-checked.a5007e18.png)}.checkbox.unchecked{background-image:url(/_next/static/media/Checkbox-unchecked.9c759685.png)}.radial.checked{background-image:url(/_next/static/media/Radial-checked.0c27e452.png)}.radial.unchecked{background-image:url(/_next/static/media/Radial-unchecked.6cb5f414.png)}.badge,.icon{width:40px;height:40px;background-size:contain;background-repeat:no-repeat;display:inline-block;margin:.5rem}.icon.arrow-down{background-image:url(/_next/static/media/Arrow-down.480fba14.png)}.icon.arrow-up{background-image:url(/_next/static/media/Arrow-up.e30cc69c.png)}.icon.arrow-left{background-image:url(/_next/static/media/Arrow-left.baad7a5c.png)}.icon.arrow-right{background-image:url(/_next/static/media/Arrow-right.2d003379.png)}.badge.b1{background-image:url(/_next/static/media/Badge-1.895e6870.png)}.badge.b2{background-image:url(/_next/static/media/Badge-2.36673416.png)}.badge.b3{background-image:url(/_next/static/media/Badge-3.40468c8c.png)}body,html{margin:0;padding:0;font-family:var(--font-body);background:var(--bg);color:var(--text)}h1{margin:2rem 0 1rem;text-align:center}.primary-btn{display:inline-block;padding:.75rem 1.25rem;background:var(--color-primary);color:#fff;border:none;border-radius:.25rem;font-size:1rem;cursor:pointer;transition:background .2s ease}.primary-btn:hover{background:var(--color-secondary)}.dynamic{display:flex;height:50px;gap:0}.dynamic.short{width:200px}.dynamic.medium{width:350px}.dynamic.long{width:500px}.dynamic .seg{flex-shrink:0;padding:0;margin:0;background-position:50%;background-repeat:no-repeat}.dynamic .seg.end,.dynamic .seg.start{background-size:100% 100%}.dynamic .seg.mid{flex-grow:1;background-repeat:repeat-x;background-size:auto 100%}.pencil-v1 .seg.start{background-image:url(/_next/static/media/pencil_btn_start_up.fc47c043.png)}.pencil-v1 .seg.mid{background-image:url(/_next/static/media/pencil_btn_middle_up.a5a7dff2.png)}.pencil-v1 .seg.end{background-image:url(/_next/static/media/pencil_btn_end_up.32837367.png)}.title-block .seg.start{background-image:url(/_next/static/media/TitleBlock_start.5aa4dce2.png)}.title-block .seg.mid{background-image:url(/_next/static/media/TitleBlock_middle.cdf93e78.png)}.title-block .seg.end{background-image:url(/_next/static/media/TitleBlock_end.bfdee940.png)}.static-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:1rem;gap:1rem;padding:1rem 0}.static-grid img{max-width:100%;height:auto;border:1px solid #ddd;background:#fff;padding:4px}.dynamic[data-type=pencil-v1]:hover .seg.start{background-image:url(/_next/static/media/pencil_btn_start_over.8a4a0db6.png)}.dynamic[data-type=pencil-v1]:hover .seg.mid{background-image:url(/_next/static/media/pencil_btn_middle_over.a286c4e2.png)}.dynamic[data-type=pencil-v1]:hover .seg.end{background-image:url(/_next/static/media/pencil_btn_end_over.7b4fa48f.png)}.pencil-v1 .seg.end,.pencil-v1 .seg.start,.pencil-v2 .seg.end,.pencil-v2 .seg.start{width:18px}.title-block .seg.end,.title-block .seg.start{width:28px}