@font-face{font-family:DiarooInk;src:url(/assets/diaroo/clay-2.0/permanent-marker.ttf) format('truetype');font-display:swap}.material-theme-preview{min-width:0;max-width:28rem;margin:auto;color:#29413b}.material-theme-preview [hidden]{display:none!important}.material-theme-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:0 0 1.5rem}.material-theme-button{position:relative;isolation:isolate;appearance:none;cursor:pointer;min-height:5.5rem;padding:1rem .6rem;border:1px solid #b2a28b;border-radius:1.1rem;font:inherit;color:#29413b;box-shadow:inset 2px 3px 3px #fff9,inset -2px -3px 4px #8b67472c,0 5px 0 #b395762b,0 8px 14px #5b44351f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}.material-name{font-size:1.2rem;font-weight:850;line-height:1.2}.material-tier{font-size:.72rem;font-weight:700;display:flex;align-items:center;gap:.3rem;color:#765614}.material-clay{background:radial-gradient(ellipse at 0 0,#fff7e5,transparent 65%),linear-gradient(140deg,#f5d5b1,#f3b6a4)}.material-clay .material-tier{color:#345f4c}.material-stitch{background:#fbf1df url(/assets/diaroo/clay-2.0/stitch-texture.webp) center/18rem;color:#5f493a;outline:1px dashed #a98567;outline-offset:-.4rem}.material-glass-3d{background:linear-gradient(150deg,#ffffffed,#b4e3df99 60%,#ffffffe0);border-color:#fff;backdrop-filter:blur(8px);box-shadow:inset 2px 3px 2px #fff,inset -2px -3px 2px #64b8b87a,inset 0 0 0 2px #c8f8f0a6,0 5px 3px #2e8b8640,0 9px 18px #3b918230}.material-glass-3d .material-name{color:#087784;text-shadow:0 1px #fff}.material-ink{background:#fbf6e8 url(/assets/diaroo/clay-2.0/ink-texture.webp) center/18rem;border:2px solid #302e24;border-radius:.8rem 1rem .75rem 1.1rem;box-shadow:3px 4px 0 #302e24;color:#24221c}.material-ink .material-name{font-family:DiarooInk,cursive;font-weight:400}.material-theme-button[aria-pressed=true]{outline:3px solid #2c6c62;outline-offset:4px}.material-theme-button:focus-visible{outline:3px solid #b06440;outline-offset:5px}.material-theme-button:hover{filter:brightness(1.035)}.material-theme-button:active{translate:0 1px}.material-theme-preview figure{margin:0}.material-device{position:relative;width:min(16rem,100%);aspect-ratio:1350/2760;margin:auto;isolation:isolate}.material-device-screen{position:absolute;inset:0;mask-image:url(/assets/diaroo/clay-2.0/iphone-screen-mask.png);mask-size:100% 100%;mask-mode:luminance;-webkit-mask-image:url(/assets/diaroo/clay-2.0/iphone-screen-mask.png);-webkit-mask-size:100% 100%;background:transparent}.material-screen-image{position:absolute!important;left:5.333333%!important;top:2.5%!important;width:89.333333%!important;height:95%!important;object-fit:contain!important;background:#fff2df;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important}.material-device-art{display:block!important;width:100%!important;height:auto!important;position:absolute;inset:0;z-index:2;pointer-events:none;border:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important;transform:none!important}.material-preview-caption{text-align:center;font-size:.85rem;margin-top:1rem!important;color:#536258!important;line-height:1.6}.material-preview-status{font-size:.8rem;text-align:center;color:#536258;min-height:1.4em;margin:.5rem 0}.material-preview-note{font-size:.75rem;text-align:center;line-height:1.6;color:#536258}.material-theme-preview[data-selected-material=stitch] .material-screen-image{background:#fbf1df}.material-theme-preview[data-selected-material=glass-3d] .material-screen-image{background:#eaf4ed}.material-theme-preview[data-selected-material=ink] .material-screen-image{background:#fbf6e8}@media(max-width:380px){.material-theme-buttons{gap:.7rem}.material-theme-button{min-height:5rem}.material-name{font-size:1.05rem}}

.material-stitch::before{content:"";position:absolute;inset:.35rem;border:1px dashed #a98567;border-radius:.8rem;pointer-events:none}.material-status-bar{position:absolute;left:11%;right:11%;top:3.3%;display:flex;justify-content:space-between;z-index:1;font:700 .6rem/1.3 system-ui;color:#222}.material-theme-preview[data-selected-material=clay] .material-status-bar{display:none}.material-theme-preview:not([data-selected-material=clay]) .material-screen-image{top:8%!important;height:86.5%!important}.material-theme-preview:not([data-selected-material=clay]) .material-device-screen{background:#fbf1df}.material-theme-preview[data-selected-material=glass-3d] .material-device-screen{background:#eaf4ed}.material-theme-preview[data-selected-material=ink] .material-device-screen{background:#fbf6e8}